Cheap Chomps

The Problem

Grocery Shopping is expensive, especially as college students. Students don't have time to optimize their savings, and actively miss out on deals every time they pick a single store. But what if that didn't have to be the case? Cheap Chomps is an app that sorts ingredients based on where to find the cheapest product, tracking every step of the way. Stop searching, and start saving.

Features

Cheap Chomps has a unique set of features no single grocery app has. The goal is for users to be able to use the app while in a store, and quickly grab the items they need while using a well organized list. Thinking of a specific meal? Add the entire recipe into your shopping list. Don't know which store to go to? See which one has the cheapest ingredients. Worried about overspending? Set your monthly budget and get real time balance updates based on what ingredients are bought.

Inspiration

The inspiration for this project was one of our team members, who struggled to manage going to three different stores for optimal pricing. After using a spreadsheet to manually track each item, we realized an app could be the solution. One of the main colors we chose for the design was green, which equally represented freshness and nature as well as savings. This eventually evolved into our final designs, with a goal of creating an app design that is easy to use, and easy on the eyes.

Challenges

Throughout this project, we faced many unique challenges. One of our major problems was how to convert our high-fi designs in Figma into a working React app, which none of us had ever done before. After working tirelessly on our designs, we used Figma plugins and Cursor to materialize our designs. And this was only the start of our problems.

The backend of our app had incredible complications. Publix, one of the main stores around campus students go to, didn't have a public API, so our team scraped over eight thousand different products from the Publix website. On the other hand, Trader Joe's and Aldi's had public, live APIs with each store organizing ingredients differently. Once the items were found by lowest price, many of them showed irrelevant ingredients, so Part of Speech tagging was used to find the perfect balance between relevance and price. We implemented a full-stack application with a client-server architecture, with React, calling JavaScript, which calls a local hosted server that calls python functions, using Flask. After random bugs for multiple hours straight, we finally got it done.

What We Learned

Overall, this project was a learning experience that pushed our team to work hard in ways we didn't know possible. From transferring Figma to a usable frontend to the basics of react and how to use API's, each one of us learned different aspects of the development program, and we are excited to learn where the future takes us.

Figma File

Built With

• canva
• cursor
• expogo
• figma
• flask
• gemini
• imovie
• javascript
• node.js
• python
• react.js