Inspiration
We might have ingredients lying around, and it may get overwhelming to see such ingredients and not know what to do with them. We wanted to create a solution that helps with this, finding recipes easily with any ingredient on hand.
What it does
The Reverse Recipe Finder allows users to input an ingredient they have on hand, and it fetches recipes that can be made with that ingredient. Users can explore a variety of recipes, complete with images, instructions, and links for more details.
How we built it
We used HTML, CSS and JavaScript for the front end to create user-friendly interface. We then used TheMealDB API to fetch the necessary recipes and images using the inputted ingredient. The application was done through JavaScript, where we handled user input, API requests and displaying results dynamically.
Challenges we ran into
Not knowing how to implement the API. We overcame this challenge by watching youtube to learn how to implement the API.
Accomplishments that we're proud of
We came in here with little to no knowledge of coding. However, this session forced us to learn more things in order to implement the idea we had in mind even if it was a relatively simple project.
What we learned
We learnt how to work with API, asynchronous operations in JavaScript and how to work together on a project as a team.
What's next for Reverse recipe finder
In the future, we plan to add filters for dietary preferences (e.g., vegan, gluten-free), as well as include a feature for saving favourite recipes.
Built With
- bootstrap
- css
- html
- javascript
- themealdb(api)
Log in or sign up for Devpost to join the conversation.