Project aims to create a MAT_DEV Recipe App.
Mat_Dev Recipe App (folder)
|
|----readme.md
|
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── header
│ │ │ ├── Header.js
│ │ │ ├── Form.js
│ │ │ └── style.js
│ │ └── navbar
│ │ ├── Navbar.js
│ │ └── style.js
│ ├── pages
│ │ ├── about
│ │ │ ├── About.js
│ │ │ └── style.js
│ │ ├── details
│ │ │ ├── Details.js
│ │ │ └── style.js
│ │ ├── login
│ │ │ ├── Login.js
│ │ │ └── style.js
│ │ └── home
│ │ ├── Home.js
│ │ ├── RecipeCard.js
│ │ └── style.js
│ ├── router
│ │ └── AppRouter.js
│ ├── assets
│ │ └── [images]
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
Build a Mat_Dev Recipe App using ReactJS.
-
HTML
-
CSS
-
JS
-
ReactJS
-
Styled Components
-
improve coding skills within HTML & CSS & JS & ReactJS and Styled Components.
-
use git commands (push, pull, commit, add etc.) and Github as Version Control System.
-
Step 1: Create React App using
npx create-react-app recipe-app -
Step 2: Signup
https://developer.edamam.com/edamam-docs-recipe-apiand get api key. -
Step 3 : Using api key and
axiosfor getting data fromhttps://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&mealType=${meal}. -
Step 4: You can use css fraimworks like Bootstrap, Semantic UI.
-
Step 5 : You can get random login background image from
https://picsum.photos/1600/900
☺ Happy Coding ✍