Recipe Website

A recipe generator website that takes in people's dietary restrictions or preferences. The site allows the user to choose whether they are looking for seafood and nut-free options, for example, and then proceeds to let them search for a particular recipe like pasta. It finally presents the user with a few seafood and nut-free pasta recipes.

Screen Shot 2024-01-06 at 1.16.38 PM.png

Dietary preference selection

Users can choose among many dietary options

Users are given the option to search

for a recipe/food of their choosing

Screen Shot 2024-01-06 at 1.18.01 PM.png

Screen Shot 2024-01-06 at 1.18.19 PM.png

Results

Recipes are filtered and presented to the user based on their choice of food matched with their dietary restriction/preference

Screen Shot 2024-01-06 at 1.18.55 PM.png

Recipe

Api used to fetch recipes is the spoonacular api

Upon selecting a recipe, users are redirected to a new window

with a detailed list of ingredients,

cost and steps to prepare their dish.

The website was created using JavaScript, HTML, and CSS.

Motivation

The motivation behind this project was that most
people who have food allergies or have dietary restrictions tend to find recipe
websites difficult to navigate as most of them do not take multiple
restrictions into consideration.
The main benefit of using this website is that users will be able to find a multitude of recipes after applying filters that are applicable to their restrictions without having to scour a multitude of different websites to cater to their needs and having to manually filter and parse through various recipes to fit their criteria.

Testing

UI/UX, integration, systems, and validation tests were carried out.
The unit tests aimed to expose any bugs related to specific functionalities of the website, such as the API connection with the JavaScript code.
UI/UX tests were executed to make sure that the website was accessible and visually appealing.
The integration, systems, and validation tests were each carefully constructed to test features (or filters), potential user flows (how easily a user can navigate the pages), and accessibility of links (that lead to 3rd party websites).