Our goal for this collaborative project was to build a real-world front-end application from scratch.
Our group created RECIPE FINDR, an application that gives the user a video tutorial for a recipe that uses ingredients they have at hand.
RECIPE FINDR asks for up to three ingredients of the user's choice. It then searches the Spoonacular API for recipes using these ingredients, before displaying a list of recipe name results. Then, when a user selects the recipe they want to make, RECIPE FINDR searches the YouTube API for video tutorials on how to make this recipe. Users can return to a previously selected recipe at any point via the recipe history or do a new search.
This allows the user to cook a meal using the ingredients they have at hand. This aims to help empower them to cook new meals and reconnect with the creativity of cooking, in addition to reducing time spent shopping and potentially reducing food wastage.
To achieve this our group used HTML, CSS and Javascript. In addition, we used several APIs including:
- Bootstrap for styling
- Spoonacular for getting recipe names
- And, YouTube for getting video recipe tutorials.
- Enter up to three ingredients in the search form.
- Click search.
- Click a recipe from the list of ideas.
- Watch the video tutorial for how to make your recipe of choice.
To access the live application via Github Pages, click here.
To access the repository where the code I refactored is saved, click here.
- Documentation for Spoonacular API.
- Documentation for YouTube API.
- A tutorial we used to help develop our understanding of fetching APIs and rendering data with JavaScript.