live preview: https://winc-recipe-app.netlify.app/
This project is made to complete the module react-basics from WincAcademy.
Details assignement: Requirements
The app is responsive and is accessible on both mobile and desktop.
The app contains two different pages that can be viewed by the user: A screen where the user can see an overview of available recipes. A screen where the user can view the details of a single, specific recipe.
On the recipe overview page, there is a list of all recipes.
Each item on the list contains the following details about the recipe: Recipe name A picture of the recipe/meal Diet label (if present) Cautions (if present) Meal type Dish type
Each item on the list also shows the following health labels (change these if you want), if these are applicable:
Vegetarian Vegan Users can search recipes based on recipe name. Users can click on a recipe and go to a different screen that shows all the details of the recipe.
On the page of each single recipe, the following details are displayed:
Recipe name A picture of the recipe/meal Meal type Dish type Total cooking time Diet label All health labels Cautions Ingredients Servings Total nutrients (Energy in kcal, protein, fat, carbs, cholesterol, sodium)
Users can go back to the recipe overview page from the single recipe pages.
bullet Users can filter on vegan/vegetarian/pescetarian