As college students, we know how difficult it can be to find recipes and create meal plans that can fit into our busy schedule. We wanted to build a website that could take in dietary preferences, dietary restrictions, as well as time restrictions, and generates either a variety of recipes or a meal plan that fits the criteria.

What it does

Both the meal planner and recipe generator have a form where the user can input their preferences and information. The website then displays recipe tiles that can be clicked on to display more in-depth information (such as ingredients) and a link to the external source of the recipe.

How we built it

Our website relies on the Spoonacular API. It takes in the form data as inputs and deploys requests to the API with the form data as parameters to filter out the correct recipes.

Challenges we ran into

Two out of three of our group members had no experience with front-end development. We had to utilize online resources and previous programming knowledge to implement a website in languages that were completely unfamiliar to us. Additionally, we had difficulties navigating Github with the different branches, as well as merging branches without conflict. The API we used also had a request limit, so we had to limit the number of recipes that could be displayed for a single search.

Accomplishments that we're proud of

  • Clean user interface
  • Integrating an API into our website to filter through recipe information
  • Overcoming lack of previous experience

What we learned

  • Strengthened our skills in front-end development
  • Learned how to make API requests in a React application

What's next for Recipe Finder

In the future, we hope to integrate buildable meal plans, so the user can hand-select recipes to be added to their meal plan. We would also like to implement a grocery list generator, which parses the recipes to build a grocery list with all the necessary ingredients for the specified meal plan.

Share this project: