SpoilerAlert

Website UI

Inspiration

Our inspiration to build SpoilerAlert was inspired by the fact that we are all first-year university students. After moving out, we are now completely responsible for ourselves and we are now forced to do things that we may not have had to do at home. One of the biggest issues we all face is keeping track of our food and expiry dates. Oftentimes, university students just dump lots of their food at the end of the month because it has expired, which is the cause of poor planning. However, this is also a larger problem on the global scale. According to the UN, nearly 1/3 of edible food produced around the world is wasted - with about 20% of that being from spoilage. That is over 100 billion meals wasted each year from spoilage! With SpoilerAlert, we can keep track of our food and the expiry dates of those foods so that we can limit our food costs and limit our waste.

What it does

SpoilerAlert is a web app in which users immediately encounter two empty fields. These empty fields take in the name of a food and the expiry dates associated with that food. SpoilerAlert will then store this data and keep track of how many days are left until the food goes bad so that the user can plan to use their food accordingly.

How we built it

With two people working on the back-end and communicating between back-end and front-end, we were able to set clear goals. Furthermore, this allowed the third teammate to focus heavily on front-end and making sure that the website was functional and also aesthetic. By using MySQL, react, javascript and other libraries to communicate between the back-end and front-end, we were able to streamline the process, allowing us to complete our project effectively.

Challenges we ran into

Coming into this hackathon, our team was composed of three freshmen students, with two of us having never been to a hackathon before, which made it a challenge to figure everything out and begin. Coming from Waterloo, we had become used to programming in Racket and only using recursion for iterations. Coming Hack Western 10, we felt as though we had to entirely re-learn JavaScript and React. Moreover, the two teammates that were working on back-end had never worked on back-end before so they were learning alongside building.

Accomplishments that we're proud of

With the theme of minimalism in mind, we not only prioritized the visual minimalistic features, but also minimal code to increase efficiency. Communicating and giving updates very frequently, our team was able to communicate and solve problems quickly by giving each other input as to why errors are occurring or what the best path to approaching a problem is. We were all able to become familiar with React and Javascript, while also learning about back-end and full-stack development. Finishing our project and completing all debugging successfully was also crucial and time-consuming, but we were able to push through and, ultimately, reap the rewards.

What we learned

We learned how to work in a team and communicate our ideas such that others would understand, which is an extremely valuable skill employers look for. Moreover, rather than arguing, we worked out our differences and compromised where we had to. Ultimately, being in a team setting taught us a lot of valuable skills, while also increasing our technical knowledge greatly.

What's next for SpoilerAlert

Next up, we look to implement multiple dimensions to the website, such as prompting the user through notifications about their expiry watch, allow the user to scan barcodes with the use of AI so that the user does not even have to manually input all the information, and if the user does not have the expiry info, then we will use an API that will give the average expiration date of the food after it is bought, etc.