This is my first React JS project. This food recipe web application is built with React JS and Spoonacular API which allows the user to search for a recipe by name, or by cuisine category options available in the navbar. On clicking a recipe, the user will be displayed a screen with the title of recipe, its image, summary and step by step instructions of the recipe. On clicking the Ingredients Button, user will be able to see the ingredients of that recipe.
- Node.js - You will need to have node js installed on your device. If you don't have it yet, install it from here.
- Spoonacular API - You will need to make an account on Spoonacular API Website and get the API Key by clicking 'My Console' then 'Profile'.
- .env file - Create a file and name it
.envin the main directory of the project where theREADME.mdandpackage.jsonfile is located. Then add this text in your.envfile:REACT_APP_API_KEY=(Replace-this-with-your-api-key-from-spoonacular). Make sure to remove the brackets when you add your api key.
$ git clone https://github.com/Saimcode/delicious-food-website.git
$ cd delicious-food-website
$ npm install
$ npm install react-icons styled-components framer-motion react-router-dom
$ npm start
It's a web-based program so you would need the following:
- Any OS (depending on your device).
- A browser to run the application.
- Link to the website: Delicious | Food Recipe Website
⚠️ NOTE: I am using free version of Spoonacular which restricts the user requests to 150 per day. So, if the website link above is not showing any recipes then that means the requests have reached their daily limit. Apologies for this.
Contact me on the links below:
- React JS for building the UI
- SCSS / CSS for styling components
- Spoonacular API to fetch recipes and data
- Version 1.1 (Current)
- Bug Fixes
- Mobile and Tablet Responsive
- Version 1.0
- Initial Release
Setup provided by Dev Ed's youtube video.
This project is licensed under the MIT License - see the LICENSE file for details