Where's my jam?

Let's get that bread! Gamify your groceries.

Comment

CornFusion Recipe Generator Demo

Full App Walkthrough Demo

Full App Walkthrough: less detailed

Inspiration

The project was inspired by a need to buy healthier groceries and gamifying this change to transition to healthy shopping.

What it does

Our app gives users 4 main ways to track their grocery list health -

  1. Freestyle - allows users to scan the barcodes of the products they are buying and get real time update on their health bar linked to the nutritional score of the product. Each 'healthy' product increase the health bar while 'unhealthy' products bring it down. Once they checkout, they get a detailed analysis of their cart and its nutri scores.
  2. Recipe - allows users to scan a product they already have and generate 5 recipes including this item. New lists can be generated if none of the displayed ingredients can be found in the grocery store.
  3. American test - A (satirical) gamemode where you compete to get the highest calorie rating
  4. Indian test - Another (satirical) gamemode where you get checked for your indianness!

How we built it

The frontend was created using TypeScript (Next.Js) and the backend uses Python (FastAPI) to perform OpenFoodFacts API calls and manage objects. We implemented our own api using FastAPI to connect frontend and backend.

Challenges we ran into

  • The fundamental ideology was to scan product barcodes to generate health bar. We implemented this using QuaggaJS which didn't support types in TypeScript (our main language used) so all the types had to configured manually
  • We aimed at using the product nutriscore to update the health bar. A big challenge was to come up with an algorithm that generates the health bar status and maintains its usability for any number of products. This required critical brainstorming to handle edge cases and making a function that runs fast to give seamless user experience
  • Managing multiple APIs (including the one we created using FastAPI) and handling their calls between multiple app pages. Another major issue was to brainstorm different errors our personal and OpenFoodFacts APIs would generate and try to handle those errors elegantly
  • API responses take enough time already, so we wanted our functions to be heavily optimized and run in least amount of time. Achieving this required a combination of smart design choices, runtime analysis and modularization.

Accomplishments that we're proud of

By the end of 36 hours, our project is now finally ...drum roll... 720 MB big equivalent to hourly creation of 20 MB of code. Removing the accidental git push .venv and React module files, we pushed 5 MB of code per hour!!

What we learned

  • One of the main key takeaways from this project was to make intelligent design choices and keep track of what all properties are being computed across different
  • It was a great opportunity to coherently use multiple API calls to extract all the appropriate information
  • Implementing QuaggaJS was an interesting way to scan barcodes in TypeScript

What's next for Where's my jam?

Shark Tank!!!

Built With

Share this project:

Updates