CleanEats

Healthy food made accessible.

Comment

Inspiration

We were shocked by the lack of nutrition transparency in America. Over 70 million Americans are obese. We believe this problem stems from missing information regarding the health impact of some consumable products.

What it does

The app scans the barcode of any food/grocery item to display the nutritional information in a digestible (no pun intended), user-friendly format. This allows the consumer to make informed choices in improving their health.

How we built it

Our progressive web app is built on top of Vue 3. It connects to our express back-end to retrieve nutritional information from our massive 52 GB MongoDB database containing over 3.1 million documents. This information was provided by a non-profit which has open source nutritional data (https://openfoodfacts.org/). We also used Google's Gemini for AI summary generation on the back-end. Finally, our API returns a response that is displayed to the user through a beautiful interface designed with Tailwind CSS.

Challenges we ran into

The biggest challenge was the camera and barcode scanning abilities. Camera dimensions vary widely across devices which made it difficult to implement. Additionally, some devices support hardware-accelerated barcode scanning and some don't. For example, our mobile devices didn't support the native javascript BarcodeDetector interface so we had to use a polyfill to fill in the compatibility gap.

Managing 52 GB of information also turned out to be difficult on our storage-deprived laptops!

Accomplishments that we're proud of

  • Functionality
    • Our app used a massive database, which meant it worked with almost any product. Details were thorough and complete.
  • UX & UI
    • The interface for CleanEats felt intuitive and responsive which made for a top-notch user experience. We didn't miss out on the little details like using a carrot as a loader animation and graphics for displaying nutriscore and NOVA, etc. Using tailwind for design was a great choice and we are proud of the UI we were able to achieve.

What we learned

We learned how to use WebRTC's getUserMedia() and MongoDB. We also discovered the shocking expanse of unhealthy eating in the US and globally.

What's next for CleanEats

Initially, we wanted some customization abilities for the users. For example, someone with a peanut allergy could be alerted if they scanned an unsafe product. While allergies were not the main point of our app, it's certainly an idea we'd like to explore further. In addition, a points system could serve to "gamify" the app. Making an online community around our app would promote healthy eating.

Built With

Share this project:

Updates