Ingredients and recipes are fundamental components of the culinary world, working together to create a wide array of dishes and flavors.
Ingredients are the raw materials used in cooking and food preparation while Recipes are sets of instructions that outline how to prepare a specific dish.
They detail the ingredients, their quantities, and a step-by-step process to create the desired culinary outcome.
-
User can see a landing page containing at least the following components:
- Header component displaying a welcome message.
- Search field that enables users to input ingredient(s).
- A component to explain the use of the application.
- A scrollable list of recipes displaying the results based on the search criteria. Keep in mind that the Recipe API has over 1500 Recipes, however, it's paginated with 20 recipes per page of result.
- A summary main recipe component: it should display recipe image, name and link to details.
- A summary detail recipe component: it should display recipe name, category, and instructions.
- Ensure mobile responsiveness for the application.
-
Search Component
- Users can input one or multiple ingredient(s).
- Initiate the search by either pressing the Enter key or clicking the 'Search' button/icon.
- Display an error message when an unlisted item is entered.
-
Main Data Display Component
- Display result for each recipe in the main component.
- Remain on the landing page if no search ingredient has been entered.
-
Summary Detail Component
- Display the following information of the selected recipe:
- Name
- Category
- List of instruction
- List of nutrition
- Add a Link to the instruction video
- Display the following information of the selected recipe:
- Search Component
- Enable the preservation of search criteria between sessions, allowing users to select them from a dropdown menu when needed.
- Detail Data Display Component
- List of ingredient
- Summary Metrics Component
- Incorporate pagination for organizing the collection of recipe search results.
- General
- Support dark/light mode
- Allow the user options for customizing the font and font size
This project was defined by Chingu.
Data is been pulled from Tasty of Rapid API.
If you aren’t yet a member of Chingu we invite you to join us. We help our members transform what they’ve learned in courses & tutorials into the practical experience employers need and want.