Recipe Generator
Overview
With 3 other developers, I built a web application that generates a collection of recipes based on the user’s inputted ingredient(s).
Type
Tools
Web Development, UI/UX
Tools
JavaScript (React.js), HTML/CSS, Figma, Visual Studio, Git
Background
This entire web application was ideated and implemented in < 30 hours for HackBeanpot 2023.
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.
Process
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
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.
Reflection
We are proud of having a clean, finished product with code that runs and a well-designed UI. Our team learned a number of things working on this project including how to use React, Git, and general code collaboration and merging.
Demo & Code
︎ Click here for the Vimeo link!
︎ Click here for the GitHub repository!
Future Features
- 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