A vegetarian and vegan recipes website/app. Search for green dishes, filter across them accordingly to your diet, follow step by step instruction to prepare your meal and save your favorite ones.
Try the app!
Table of Contents
The goal of the project is to deliver a veg recipes application aimed to bring new cooking ideas. To do so, I used the Spoonacular API data, fetched using the axios library.
At its startup the application displays a selection of random recipes with photos, servings and preparation time, and a searchbar. The recipes carousel UX/UI is rendered using React Swiper. The user can select a recipe to check ingredients and step-by-step cooking instructions, save a favorite recipe in Local Storage using the heart react-icon, or search for a recipe/ingredient using the searchbar.
Clicking a recipe card takes the user to the recipe dedicated page, using react-router, where ingredients, cooking instructions and similar dishes can be found. The user can also use this page to save the recipe to favorites.
Favorites page can be found by clicking on the relevant button in the header, near the searchbar. Saved dishes are fetched using Local Storage and info about saved/unsaved recipes are passed across components using React Context. In this page the user can also delete a recipe from favorites using the trash react-icon.
From any page, the user can search a keyword using the searchBar component inside the Header. Submitting the form takes the user to the SearchResults page, which displays the RecipesCarousel component (with consistent style applying to TodaysPicks and Similar Recipes). The SearchFilters component in this page displays a friendly-UX popup for the user to filter search results.
I created the app using React: every html element is created with the jsx sintax; style is build using the new CSS nesting feature*.
❗❗ * CSS nesting is a relatively new feature, check its browser compatibility to be sure you have a full user experience of the app. ❗❗
Html5
Css3
JavaScript ES6
Axios
Dotenv
Webpack
React
React Router
React Swiper
This project was bootstrapped with Create React App.
I published this code at the link https://vegpoint-egidiosalinaro.netlify.app/ so you can use it, but if you want you can also install it in your device using React:
You need to have Node and npm installed. You can check the version you have installed running:
- npm
npm -v
Once downloaded this repo, in the project directory, you can run:
- installing libraries
npm install- run the app
npm startThis runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes.
See the section about running tests for more information.
npm run buildBuilds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Use this app to try new green cooking ideas.
At its startup the application displays a selection of random recipes with photos, servings and preparation time, and a searchbar. Select a recipe to check ingredients and step-by-step cooking instructions, save a favorite recipe using the heart icon, or search for a recipe/ingredient using the searchbar.
Favorites page can be found by clicking on the relevant button in the header, near the searchbar. In this page you can also delete a recipe from favorites using the trash icon.
From any page, you can search a keyword/recipe using the search bar and then filter search results accordingly to your diet.
- fetching API data
- insert searchbar query into API searching machine
- creating components
- saving favorites to local storage
- creating favorites page using context provider
- creating other pages via router
- styles improvements
- coherent and user-friendly UX/UI
- CSS nesting
- learning React Swiper
- final code cleaning and code consistency
Distributed under the MIT License. See LICENSE for more information.