Recipe Generator

This project is a recipe generator, designed to assist people who want to make meals with the food they have on hand. Users can search for recipes that contain the ingredients they input.

Comment

Inspiration

As college students, we often find ourselves with leftover groceries not knowing what meal we could make that would not only be nutritious and filling but also easy to make. This website was designed to make the process of finding recipes with the ingredients we have more efficient and brings more variety to our tastebuds.

What it does

It is a web application that stores a collection of recipes that can be searched for by ingredient(s).

How we built it

To start, we designed the interface using Figma and built the frontend with React and styled it with CSS. The search feature was made using Edamam's API for the recipe data and JavaScript for the backend portion (to organize the information). The whole web application was connected using React.

Challenges we ran into

Finding a source of data for the recipes and figuring out which method of loading it in was challenging at first. We were between using a csv file and reading it in d3 and using an API, and we ultimately decided using an API would be easier. Coming up with an MVP and deciding which features were most significant as to not overwhelm ourselves was also a hurdle. Lastly, learning to use Git and GitHub was definitely a challenge.

Accomplishments that we're proud of

We are proud of having a clean, finished product with code that runs and a well-designed UI.

What we learned

Our team learned a number of things working on this project including how to use React, Git, and general code collaboration and merging.

What's next for Recipe Generator

  • Incorporating a filter feature in the search for allergies, by cuisine, or other features.
  • Sorting option (especially by popularity)
  • A feature to save or share favorite recipes

Built With

Share this project:

Updates