This project aims to create a Recipe App using ReactJS. It's a part of the EYPES course.
The team is tasked with adding a new project to their portfolios, so they have started working on the Recipe App.
Recipe App (folder)
|
|----readme.md # Given to the students (Definition of the project)
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── card
│ │ │ ├── Card.jsx
│ │ │ └── Card.style.jsx
│ │ ├── globalStyles
│ │ │ ├── Flex.style.jsx
│ │ │ ├── theme.js
│ │ │ └── GlobalStyles.jsx
│ │ ├── header
│ │ │ ├── Header.jsx
│ │ │ └── Header.style.jsx
│ │ └── nav
│ │ ├── Navbar.jsx
│ │ └── Navbar.style.jsx
│ ├── pages
│ │ ├── about
│ │ │ ├── About.jsx
│ │ │ └── About.style.jsx
│ │ ├── details
│ │ │ ├── Details.jsx
│ │ │ └── Details.style.jsx
│ │ ├── login
│ │ │ ├── Login.jsx
│ │ │ └── Login.style.jsx
│ │ └── home
│ │ ├── Home.jsx
│ │ └── Home.style.jsx
│ ├── router
│ │ ├── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ ├── assets
│ │ └── [images]
│ ├── App.js
│ ├── index.js
│ └── index.css
├── .env
├── package.json
└── yarn.lock
- Build a Recipe App using ReactJS.
- Improve coding skills within HTML, CSS, JS, and ReactJS.
- Use git commands (push, pull, commit, add, etc.) and Github as Version Control System.
-
Step 1: Create React App using
yarn create react-app recipe-app
ornpx create-react-app recipe-app
. -
Step 2: Signup at Edamam and get an API key.
-
Step 3: Use the API key and Axios for fetching data from
https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&mealType=${meal}
. -
Step 4: Code the project with styled components.
-
Step 5: Get a random login background image from picsum.photos.
-
Step 6: Add project GIF to your project and README.md file.
- You can add additional functionalities to your app.
☺ Happy Coding ✍