A web application that provides recipe ideas for vegetarian and gluten-free options, quick and easy to find options related to the user's dietary requirements. The user can include or exclude ingredients and select a cuisine of their choice.
The Javascript code uses functions and event listeners to handle user interactions and update the content on the screen. Two APIs are used to retrieve the recipes and videos ideas.
The two APIs used in this website are: Spoonacular and Youtube.
This app has been created as a group project by Bex Ford and Clelia Mangione for the edEX Front-End Development Bootcamp.
- Find recipe ideas for vegetarian and gluten free options.
- Search for recipes by including or excluding ingredients.
- Select a cuisine of your choice.
- Watch extra recipe videos from Youtube.
- The user types the name of a dish, including or excluding ingredients and they choose a specific cuisine.
- This triggers the Spoonacular API to show 6 recipes ideas.
- In the Videos Ideas section, the YouTube API is triggered to show other 6 video recips ideas for general vegetarian gluten free dishes.
When the user visits the page it is displayed with a navigation bar at the top and the logo as you can see in the image below:
The first API we created was from Spoonacular. Our website was created for users that are vegetarian with a gluten intolerance. Therefore the API request we created only displays food that are vegetarian and gluten free. With this API we also wanted the user to have the choice to include or exclude ingredients therefore we built it into the API request. We felt that this give the user more options to narrow down the recipe that they want to find, creating an overall better user experience. As you can see in the image below the options for the user:
The second API we created was Youtube. This enabled users to have a video link of vegeterian and gluten-free recipes. We felt this made the overall user experience great as all of the information was given without the user having to do a second search. As you can see in the image below the user has the option to click on Watch on Youtube button if they choose to do so.
Below is an image of the colour palette in which we used throughout designing the web application.
The font style we used for this project was called Jost from google fonts.
- Ryan Ford (Graphic Designer). Ryan designed the JustVeggie logo for this project which is displayed below.
