Cartly [App Development, UI/UX]

Compare grocery prices across stores near you — item by item, or your whole diet plan — and find the cheapest basket every time.

Comment

Inspiration

Many people like to buy groceries at a great price. Many people also like buying groceries according to a certain diet. While searching for grocery products on a search engine like Google for example are simple, Cartly makes user experience easier by searching a whole grocery list for the user with one button or by comparing prices between different stores also with a click of a button.

What it does

Cartly allows users to create a whole diet plan based off of what the user's interests are and then compares the grocery list generated from that with different stores to find the cheapest store. This diet plan can also be modified by the user depending on needs and availability. Also Cartly can be used to just search for singular items if not looking to build a whole diet plan.

How we built it

By utilizing React + Vite for our front end we were able to create a simplistic and pleasing user interface while incorporating our main components. For our backend we used Node.js to communicate with the frontend. Once the frontend requests a search, the backend will call SerpAPI to search Google for that specific item and return it in JSON format. The JSON is then read, sorted, and stored in the cache for frontend output.

For our diet plan generation we referenced Jeff Nippard's article, BMI calculation, TDEE calculation and hardset values for different types of foods. The foods are split into different meals of the day and are customizable specific to user interests.

Challenges we ran into

Limited use of SerpAPI searches resulted in minimal searches that could be done and price comparisons between stores. To work around this we created a cache saved locally that maps identical searches in a 24 hour period together, so if an item is in the cache it is pulled and outputted instead of calling SerpAPI and using another search.

Accomplishments that we're proud of

We're proud of the easy to use and simplistic look of our web application. Everything is intuitive and explained thoroughly to enhance user experience.

What we learned

We learned how to work with React + vite for frontend and how to use SerpAPI for Google searches.

What's next for Cartly [App Development, UI/UX]

Adding a login system for user profiles and history, using a database for larger cache and storing more food options. Integrating this web-app into a mobile app as well for easier access.

Built With

Share this project:

Updates