Bun Alert

• 

  Bun Alert Logo

Try it Yourself!

Want to try out Bun Alert yourself? Feel free! It's available for you to try at https://andrewdimmer.github.io/bun-alert.

Inspiration

I love xkcd, and some of my favorite comics are those related to "Buns" (also known as Rabbits, Hares, or Lagomorphs). In xkcd 1682, the title text explained that "If a wild bun is sighted, a nice gesture of respect is to send a 'BUN ALERT' message to friends and family, with photographs documenting the bun's location and rank." Then, in xkcd 1871, we saw a glimpse of how Bun Alert might be used. With that, the idea was set to create the "Bun Alert" webapp to bring the idea from the comics to life.

xkcd 1682

Title Text: "If a wild bun is sighted, a nice gesture of respect is to send a 'BUN ALERT' message to friends and family, with photographs documenting the bun's location and rank. If no photographs are possible, emoji may be substituted."

xkcd 1871

Title Text: "Since buns range from crepuscular to nocturnal, it's recommended that you enable the scheduled "Do Not Disturb" mode on your phone to avoid being woken by alerts about Night Buns."

What it does

By dissecting the comics, we get the following feature set:

• Create a Bun Alert with the Rank of the Bun (complete, and also includes size)
• Notify others nearby with photographs or emojis (emojis complete, photographs coming soon)
• Have a Do Not Disturb option (complete)

We also have the following extra features:

• Get the route to each bun, along with estimated travel time based on configurable parameters
• Filter notifications by Bun Rank
• Report the number of buns in a sighting
• Automatically update the "Find Buns" page to keep it up-to-date even when just open on a computer or phone
• Implemented a "Proprietary Bun Alert Freshness Algorithm" to use your walking speed, the number of obstructions, the distance from the bun and the time since the sighting to maximize the chance a user can make it to the bun sighting before it hops elsewhere.

How we built it

Bun Alert was build using Typescript, React, and Material UI for a fast and flexible front end that is easily accessible from all devices and browsers. Then, Firebase Firestore was used for the database to store Bun Alerts and push them out to other users, and the app was final hosted on GitHub pages.

Challenges we ran into

This was my first time using raw location data and native notifications from the browser, so the authentication and permission flow was a bit challenging.

Accomplishments that we're proud of

Other than supporting pictures (which we didn't want to do yet before implementing users and reporting content to keep Bun Alert safe), we completed everything that we set out to do to match the features laid out in the original source xkcd comics.

What we learned

I learned a lot about how Push Notifications worked during the course of building Bun Alert, as well as some more knowledge of how the React Dom renders information to make Bun Alert more efficient while still having pages like the "Find Buns" page refresh the time and distance information to each bun sighting.

What's next for Bun Alert

Up next we'd like to add the ability to report via image, where when you take or upload a photo, a Machine Learning algorithm extracts the information required to create a Bun Alert like the number and rank of buns. We'd also like to implement user accounts and a way to flag/report content not related to buns.

Built With

• firebase
• react
• typescript