Effortless Meal Plan

Inspiration

Trying to follow a healthy diet is important to the two of us, but sometimes the planning can get tedious. We thought of this idea to simplify the meal planning process for ourselves and others.

What it does

The web app takes in user input, such as calories, macronutrient splits, and tolerance, using a form and sends a request to the Spoonacular API to retrieve up to 10 satisfactory recipes. Each recipe card can have up to 5 icons denoting whether the recipe is vegetarian, vegan, dairy-free, gluten-free, and/or considered healthy.

How we built it

The web app was bootstrapped with create-react-app and the frontend development was done using MUI components. The data comes from the Spoonacular API and so no database was needed. The website is currently being hosted on GitHub pages.

Challenges we ran into

Neither of us had previously done much front-end work, so naturally centering things had us stumped, but we got through it!

What we learned

We learned a lot about front-end development, React, and a lot about Material UI. Doing this project has us both feeling inspired to dive deeper into the world of front-end development and continue of this project.

What's next for Effortless Meal Plan

Now that we have a way to generate recipes for a meal, we would like to build off of that and extend the functionality to cover a whole day of meals, and then from there, we will tackle a week. We would also like to provide users with a detailed view of each recipe and generate a shopping list for chosen recipes. Eventually, we would like to add authenticated user accounts so that users can save recipes and meal plans that they have enjoyed in the past and save recipes they would like to try.

Overall, Effortless Meal Plan has a long way to got, but we may not have started it if not for this hackathon!