Project Title: Rapid Recipes
Technology: HTML, CSS, JavaScript, VSCode, Figma, Edamame API, Adobe Illustrator, Adobe Photoshop
Goals: To create a minimalistic web application where users can search ingredient terms, and get recipes results without the SEO bloat found on today’s food recipe websites. To fetch API data using JavaScript, and create a mobile responsive web page using HTML and CSS.
How To Use:
Random Recipes:
Users can get a randomly generated list of 3 recipes returned to them by clicking the random recipes button. The results will return three randomly generated recipes with an image, recipe title, and time it takes to prepare the dish. If a user wants more information, they can click the recipe and a list of ingredients and step by step instructions will return.
Search Query:
Users simply type in their ingredient query into the searchbar and click enter to have a list of 3 recipes returned to them. The results will return an image, recipe title, and time it takes to prepare the dish. If a user wants more information, they can click the recipe and a list of ingredients and step by step instructions will return.
Process:
Preparation:
The first step I took was finding the appropriate food API to use. My criteria for this web application was to return a list of ingredients, step by step instructions on how to prepare the dish, and photos of the food. These were the bare minimum that would make this web application function as a valuable resource for finding recipes. I found Edamame API that checked out criteria.
Ideation:
Wanted to solve a problem that I persistently ran into when looking for recipes to cook. There was a frustration every time I found a recipe, and had to scroll infinitely down until I got to the actual recipe and instructions I was looking for. There is too much bloated SEO that just ruins the experience of getting food recipes.
Code:
I chose to use vanilla JavaScript, HTML, and CSS to brush up on my foundation, and to not rely on libraries or frameworks. I used HTML and custom CSS to set the page’s general structure using semantic HTML and BEM CSS. JavaScript was used to fetch the Edamame API, and to dynamically generate HTML with the resulting recipes.
Design:
I had an idea of what the web application should look like. Clean, minimal, modern, and friendly. I went with a green color palette because it represents harmony, nature, creativity, healthy, and fresh. I started off with the Logo. A simple monogram of the letter R to represent Rapid Recipes has a bold R with a lightning symbol to signify fast, speedy results. Low fidelity wireframes were created in Figma to get an idea of how the application would flow. Since it is a relatively minimalistic web application, I went for a single page layout, to reduce
clicking around and time spent away from the main task, which is to find recipes.