Recipes Reimagined

Inspiration

Ingredients are the substance of life, with waste, being the detriment of Earth. The thin tightrope between the two that food walks on is balanced by the uncontrollable: time. In RECIPES REIMAGINED, we dove into the prospect of managing these situations, with the main goal of giving us some grasp of the uncontrollable and making the best of what we have.

What it does

Recipes Reimagined is a website made up of four pages, built to help lessen the amount of food waste by allowing users to keep track of the ingredients in their own fridge while also providing recipes catered to their available ingredients. On the first page, the user will log in. On the second, they can input a list of their groceries and our site will provide an estimate of when each food will expire (assuming that the day the food bought is the date it was inputted into the site). Then, it takes the user to the third page, where they see a schedule of all their food, split into categories depending on their expiration dates. To help users figure out how they can use their food so they don’t have to throw it out, the fourth page provides recipes custom-designed using the available ingredients.

How we built it

From the start, we realized our team of three was a diverse group of students with different skill sets and backgrounds. However, we all had matching levels of ambition. We started by splitting the tasks at hand into the database, backend, and frontend. A little of the way through, we switched to separating work by page. For the database, we used MongoDB to keep track of each user and their food. For the frontend, we used JavaScript, React.js, and TailwindCSS to design our four pages. To connect these two components, our backend was built with Python and FastAPI, as well as Google Gemini to get the expiration estimations of each food item and the custom recipes.

Challenges we ran into

When building our application, we ran into several issues. They mainly came up with our recipe page, like formatting the recipe page into three columns after receiving various AI responses of different sizes and handling inconsistent AI-generated responses. The AI had several different ways of formatting its answers, even with the same, specific prompt. Our columns did not adjust to the different lengths of answers in a clean way, often splitting in two and wrapping into the space of their neighbor. A big part of these obstacles was the fact that we were imagining and expecting one thing, but reality proved to be something else. However, we quickly adapted. Through testing and playing around with Gemini AI, we covered most of its response cases and reformatted our recipe page to better adjust to its variance. If we had remained stubborn and insistent on our project being one specific way, we would have lost a lot of time and effort into a result we wouldn’t have been as happy with.

Accomplishments that we're proud of

We take great pride in the aesthetics of our project. None of us had a lot of experience with frontend development, but we came into this project eager to take on that challenge and learn as much as we could. We explored many new languages and frameworks we had worked very little with in the past, like TailwindCSS and React.js. Pushing through all the frustrating and confusing documentation, we ended up with a user interface that we found pleasing to both our eyes, and our ambitions.

What we learned

Coming into this hackathon, several team members had little to no experience with the frameworks we were planning to build, like MongoDB, TailwindCSS, and FastAPI. For most of us, this was our first or second hackathon, so we hadn’t worked on too many projects outside of our personal ones and school-related ones. We especially haven’t worked a lot in a stressful environment with a time constraint. As a result, the first day was rather difficult. We divided up the work into three: frontend, backend, and the database. We found trouble in building the frontend and database, and we often found ourselves going through the documentation to get a better understanding of the keywords. However, on the second day, these technologies became easier to understand and apply. As we gained more confidence, we all decided to explore all parts of our project, combining skills and ideas. In the end, we were able to connect all our work together to create a project we are proud of. Gaining fluency in different technologies, both ones we have worked with before and completely new ones, was one of the big goals we had coming into this hackathon. However, we certainly gained more than just technical skills. Synchronization and communication were two aspects that we learned a lot from. Even though we worked on quite different parts of the project, we quickly realized how much coordination we needed to be able to combine all our work together while also not creating redundancies.

What's next for Recipes Reimagined

In the future, we hope to implement an image processing page that allows users to upload pictures they take of their food. An AI model will then judge if the depicted food is still good and fresh to eat.

Built With

• davinciresolve
• fastapi
• googlegemini
• html
• javascript
• mongodb
• python
• react.js
• tailwindcss