Inspiration
We are team Spoil-Er Alert and we’re a group of 3 beginner hackers working from our shared apartment in Toronto! Starting off this challenge we wanted to tackle a problem we experience in our day to day lives: food waste. One of the benefits of the pandemic is we had more time to cook with fresh foods more frequently. However, as we get busier we often forget about fresh vegetables we planned on using resulting in us throwing them out. And this isn't a problem only we suffer from; 50% of food waste in Toronto is avoidable and on average a Canadian household will lose $1,800 (18 hundred dollars) annually due to food loss. As broke students, we were concerned with how this translated into money loss. .
Upon doing some market research we found some existing apps. However, they had features which made them difficult to use and we didn't have time to input each item manually. All we wanted was a simple reminder that we had forgotten about the food we bought last week.
What it does
We wanted to solve these problems by sending mobile app notifications focused on the food we have in the fridge and how long its been there. Additionally, we wanted to scan receipts quickly and automatically organize items. Finally, we wanted to add a personal goal tracker which records how much food is being wasted and how much money is saved.
How we built it
Our project code consists of some: Python which leverages Google Cloud’s Vision API for text detection HTML which connects with Firebase storage CSS/Javascript for user interface
Challenges we ran into
We envisioned a mobile app, but we had to be realistic about our experience and time constraints. Many of the skills we were using we had just learned moments prior to the event.
Accomplishments that we're proud of
As proof of concept, we put together a simple html page that prompts you to upload your receipt. There are also sections for tracking personal goals, and pantry items. Once uploaded, the receipt will appear on your screen as well as in our Firebase storage, and is retrieved by the html file. We didn’t quite get to automating this process, but we were able to manually retrieve it, and hope to better connect our front and back ends soon.
Once the text is detected, we process it for the user. After filtering the output for the relevant portions of the receipts, we cross reference with items we commonly forget about, and combine repeated items. Finally, the user receives an output with unique grocery items, their costs, and how many days a particular item has been in storage - so that you can figure out which vegetable you need to eat next.
With all these parts functioning separately, we wanted to better visualize our final design using Figma to create an app prototype. Opening up the app brings you to your pantry where you can view what perishable food items you currently have in stock and how long you’ve had them. Clicking on the image capture button on the bottom will allow you to easily scan a grocery store receipt. The app will then isolate your commonly thrown away groceries and add them to your pantry with their prices. By accessing the general settings or by clicking each item, you can customize when you would like to be sent reminders, depending on how fresh you want your food.
For example, when the app sends you a reminder, the user is given options to eat the item, throw it out, or to be reminded in another 3 days.
The final feature we have to explore is the My wallet feature. When you submit a response to the notification, those food items are categorized into an easy to read chart. Here you can see the amount of money which was wasted that month due to throwing out food, and the percentage of food thrown out compared to eaten. Additionally, last month's statistics and goals are listed so you can compare your progress.
What we learned
We learned a lot about front end and back end web development. It was interesting actually building what's behind the scenes in the things we use all the time. We also learned a few new languages and to use tools such as Javascript, HTML, CSS, and Firebase.
What's next for Spoil-er Alert!
We hope to continue working on connecting front and back end components. As well, as transitioning from a web to a mobile application.
Thank you so much for exploring the Spoil-er Alert App with us, and we hope you enjoyed our project!
Built With
- css
- firebase
- google-cloud-vision
- html
- javascript
- python
Log in or sign up for Devpost to join the conversation.