Learning about the impact of sustainable businesses and causes was definitely a driving factor behind our project. We wanted to create a tool that made eating sustainably an activity tied to exploration and fun for the whole family. We also found that we didn't see any recipe websites or cookbooks that focused on sustainability while also allowing users to sort recipes by their personal preferences and dietary restrictions. All of this bought us to the idea of Food Savor.

What it does

Food Savor caters to your leftover ingredients, dietary restrictions, food allergies, and cuisine preferences, recommending you recipes for delicious meals that will prevent you from having to throw away food again. Food Savor's recipes are searched via ingredient(s), helping you discover new recipes to try out with your old ingredients.

How we built it

Our website uses an ingredient tagging system that allows users to search for ingredients and automatically updates a list of suggested recipes based on selected ingredients. It also required outsourcing React component libraries (since we were new to using React) and understanding how to carry data from our databases and through a hierarchical structure of components. Some components on the website are actually p5 'Sketches' that act like simple JavaScript interactive images/animations and can be easily integrated with React. We relied a lot on internet tutorials and open source code to create our website.

Challenges we ran into

The search and filter feature actually was also the most difficult challenge we faced while making the project. We also ran into issues trying to implement a login feature and a database that would store the diet restrictions of each user. There were a lot of times when we didn't understand why our project was not building, and it took a lot of debugging and trying roundabout ways to get the finished product we have.

Accomplishments that we're proud of

Our amazing design! Our designers made wonderful mockups, presentation slides, and UI components, and they are the reason our project looks as good as it does.

What we learned

We learned a lot about React.js components, libraries, UI/UX Design, and Web Development in general. We also learned a lot about using GitHub to share code and using Figma to brainstorm and design prototypes. We learned a lot about accessing data from JSON files, creating forms, and integrating React with p5.

What's next for Food Savor

Expanding to use APIs for a wider food and recipe database.

Built With

Share this project: