FridgeBuddy

Inspiration

As busy college students, our lives are consumed with various important matters, so while cooking often slips to the back of our minds, our fridges never fail to be stocked with a random assortment of ingredients. We have had countless experiences opening the fridge, having no idea what to make, so giving up and getting Chipotle instead. We wanted to make something to inspire ideas of what to cook.

What it does

In an effort to prevent our food from expiring, and to build some important cooking skills, we have created a web application using React that allows users to input the ingredients in their fridge and get 3 recipes in return.

How we built it

We used React for our frontend. Our web app makes an API call to Gemini with Flask, using the ingredients selected by the users to generate recipes, then processing the recipes it returns and storing them in a MongoDB database. We then display three recipes to the user in an easily understandable manner, and hope that they get cooking!

Challenges we ran into

Managing all the various state in React proved challenging at a certain point, and so did maintaining the connection with the backend, as they were hosted on different ports. As first time hackers and a team of only two, we did struggle with time pressure.

Accomplishments that we're proud of

We found that we were able to create the product we were envisioning, which we consider a great success! All of our icons are hand drawn by us, which adds a significant personal touch.

What we learned

This invaluable experience allowed us to develop our skills in full-stack development, and caused us to gain significantly more familiarity with React and Flask.

What's next for FridgeBuddy

In the future, we envision our hack to store user information, and allow them to save/like recipes, so that it can be a long-term tool for clients. We hope to add other fridge cataloging tools, such as an expiry reminder, in order to focus more on sustainability as well.

Built With

• flask
• mongodb
• next.js
• react
• react-with-typescript
• typescript
• we-used-next.js