track.easterbunny.cc Version 7 was the sixth and final run of track.easterbunny.cc - the seasonal Easter Bunny Tracker I ran since 2019.
v7 fixed the production issues that plagued the previous run of the tracker - along with adding some much-requested features to truly make this the best Easter Bunny Tracker experience on the planet.
The final run of the tracker garnered 140,000 hits during the 28 hours of tracking, totaling 165,000 hits on the morning after Easter. It reached a peak of 287 hits/minute in the evening hours and was visited from over 100 countries.
—
Lines of code: Too many at this point
Languages: HTML, JavaScript, CSS, Python
Frameworks: React, MDB 5, Axios, Luxon, Flask, MaxMind GeoIP2, MUI Icons, Flag Icons, Weather Icons, Polyfill.io
Services used: Cloudflare CDN, WeatherKit, Google Maps JS API & Timezone API, Mapbox Reverse Geocoding API, GeoNames, Wikipedia, AWS Polly
track.easterbunny.cc Version 7 retained the same design that was introduced from Version 6 without any major changes.
This article goes over all the changes made from Version 6 to Version 7, and will be light on details about how the rest of the tracker is designed and operates - so I recommend reading the Version 6 page to get the lowdown on all that info.
Nonetheless - the basic UI of the tracker remained unchanged for this year. In the standard layout on desktop, three boxes at the top. Last stop on the left, next stop in the middle (with the Easter Bunny’s estimated arrival time), and the metric box on the right (showing Baskets delivered by default)
The settings page got a minor rework from Version 6 to Version 7. One extra section got added - Stop Info, with settings relating to the Stop Info window moving here.
Additionally, the order of the tabs in the settings window changed so that the more frequently accessed tabs were closer to the top.
This is what the new Stop Info section contains - two settings that were previously in the tracker setting got moved here
We’ll talk about the stop pronunciation settings very shortly!
One of the biggest changes to track.easterbunny.cc Version 7 was finally having the ability to show multiple metrics at the same time. In prior versions of the tracker, users could choose between seeing one of five metrics. But if you wanted to keep tabs on all of them, you’d have to constantly flip between metrics.
But not anymore with Version 7! The radios that were present in all previous version have moved to checkboxes, allowing you to see every metric at once.
There’s also a “Hide value of distance from you metric” setting, which is useful for people who are streaming the tracker to avoid accidentally exposing their location.
On desktop, this is what it would look like when all metrics were selected to be visible. Absolute game changer.
Additionally, I made it clearer with the distance from you metric is being rendered using an IP location: rather than ~xxx miles, it’s now About xxx miles (or km).
Kinda sucks this feature had to come in the last version of the tracker, but hey, better now than never!
This is what having all the metrics enabled looks like on mobile devices.
In previous versions of the tracker, I had code that would shift the Easter Bunny down below the top box if your device’s height was too low on mobile devices.
For this year, additional logic had to be built in to account for anywhere from 0-5 metrics being shown and how to handle shifting the Easter Bunny down on the screen.
As was the case in every prior version of the tracker, clicking on a basket icon on the map throws up this stop information window.
One of the coolest features in Version 7 was introducing a stop pronunciation button in this window. Especially for some global cities, it can be pretty hard to know how to pronounce them, so this feature attempts to solve that!
The voices are generated using AWS Polly, which does a pretty good job of getting pronunciations correct. I generated them in six different English accents which correlated to the six English speaking regions that the tracker got the most hits from. The tracker looks at your browsers’ locale to determine which accent to use.
Other than that, the stop info window largely remained unchanged from last year.
These are the two additional settings in the stop info window that control pronunciation settings. There’s a playback speed slider so you can globally change how fast the pronunciations run.
You can also override the locale of the pronunciation here and pick from any one of the six locales up for offering.
track.easterbunny.cc continues to be really the only tracker out there with an extensive “pre-tracking” experience - basically in the 3 hours leading to liftoff, updates on the Easter Bunny’s preparations are shown.
Although this part of tracking doesn’t get a ton of hits, I still wanted to make it more interactive. For that, I added a metric box to pre-tracking, which shows the number of baskets wrapped and loaded depending on which stage of pre-tracking the tracker is in.
At about 1.5 hours into pre-tracking (when the Easter Bunny’s helpers finish wrapping baskets), the metric switches to baskets loaded. Once that process is complete (~30-40 minutes before liftoff), the metric is frozen at what will be the final baskets delivered count - a really cool attention to detail thing (that also required some nifty sheets magic to make it work!).
When tracking is over, I coded the tracker to show a pop-up indicating to users that the tracker would be shut down after this year. Here is that pop-up in action.
As has previously been the case, track.easterbunny.cc nominally reaches out to the Geo API whenever its loaded.
The Geo API is an API I built to serve a users approximate location (via IP address) to power the estimated arrival time. However, it also has turned into the de-facto hit counter for the tracker - after all, when the tracker loads far enough (and with JS enabled), the Geo API is called and we can be sure that was a hit.
The insights dashboard was a custom dashboard I made a couple years ago to keep tabs on hits during tracking. This is what the interface looked like for this year - showing lots of data on how the tracker performed during tracking.
Below the main hit counter graph are a bunch of extra graphs - hit per minute/hour graphs, growth compared to 2023 (in hindsight, this should’ve been 2022, but I’m surprised given the issues we had last year the turnout the tracker got!). There’s also the oh-so-lovely estimated Google Maps API cost graph, which shows in real-time how annihilated my wallet is.
And that’s track.easterbunny.cc Version 7, the last version of this amazing project I’ve been running.
This has been by far one of my most memorable and amazing projects - it genuinely taught me so much about web development and how to make a project scale for the web.
Getting 140,000 hits in the final year was such an amazing way to go out - and it was insane to almost hit 300 hits/minute! Truly some insane numbers - and this doesn’t count the people on YouTube who were streaming it as well.
While shutting down this tracker wasn’t an easy decision and I’m sad to do it (especially given the growth in the final year of operations!), I wanted this project to go out on such an amazing note - and it did exactly that.
track.easterbunny.cc remains an open-source project though, and the source code for Version 7 will be released over Summer 2024, empowering others to make all sorts of exciting Easter Bunny Trackers!
At the end of all this, I’m so incredibly proud of myself for making this project, maintaining and running it for 5+ years, and learning so much from making this tracker. But most of all, I’m so proud that this project genuinely left the world a little bit better than I found it.
Dozens of people have told me about the memories they have (and will have!) from using this tracker - and I can only assume tens of thousands more will have these same memories, just like the ones I had on Christmas Eve as a kid when tracking NORAD. Hearing and knowing this is so incredibly special - it’s truly an honor to be able to have a positive impact on the world with what I built.