track.easterbunny.cc Version 4 turned a proof-of-concept Easter Bunny Tracker into a fully fledged web application. It ushered in dozens of innovations never seen before in Easter Bunny Tracking, all done in a simple and lightweight fashion.
Version 4 included many unique features - including tracker customization, light & dark mode, estimated Easter Bunny arrival times, and a more modern UI.
track.easterbunny.cc Version 4 garnered 35,000 hits from across the world during Easter 2020 - an 850% YoY growth compared to Easter 2019.
—
Lines of code: ~10,000
Languages: HTML, CSS, JavaScript, Python
Frameworks: jQuery, Material Design Bootstrap, Flask
Timeframe: January 2020 - April 2020 (track.easterbunny.cc remains under active development, this is the timeframe when v4 was specifically coded.)
—
You can visit this project at track.easterbunny.cc.
Version 4 uses Material Design Bootstrap for a much lighter design language that’s easier on the eyes, and less bulky.
The main controls for the tracker are in the bottom left in a vertical stack. The button priority is sorted from bottom to top - settings is most important, but centering controls aren’t incredibly important.
Dark mode was added in Version 4 of the tracker. The street map automatically goes into dark mode when it’s selected.
Customization of map modes were added to Version 4. The screenshot above shows Satellite mode, and the screenshot below shows Hybrid mode.
The about window of the tracker shows a quick guide on how to use the tracker, using the iconography of the tracker.
The settings window is split into four different sections to control different parts of the tracker.
Reset settings is important - but I also added a set of optimized settings for streaming the tracker online.
Version 4 adds an estimated arrival time for the Easter Bunny, rounded to the nearest half hour. I used a method called IP geolocation to estimate locations of users. The tracker calls a basic system made in Python w/ Flask to get the approximate user location, and the tracker calculates the estimated arrival time.
I made sure this could be turned off in settings - especially useful to protect the privacy of folks streaming the tracker online.
Clicking on basket icons pops up a stop information window. Each stop has information on arrival time, the weather on arrival, population, and elevation. An excerpt from Wikipedia is shown - with a direct link to learn more.
Phone usability remained a top priority for Version 4 - and it worked out beautifully. I made a small tweak on mobile where the default zoom level was 1 level lower than that on desktop, so that mobile users could get a similar perspective.
Version 4 included a Twitter bot made in Python with Twython. The Twitter bot would tweet out every stop the Easter Bunny made, and every update during the Easter Bunny’s final preparations.