- Build a Recipe App using ReactJS.
- Project aims to create a Recipe App.
- In this project i tried to make a recipe app. After submitting username and password info's user can search food's recipe by their name and type.
- When user click the "view more" buttton in the cards div, can see the recipe and other informations about selected food.
You can reach my project from here 👈
Recipe App (folder)
|
|----readme.md
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── footer
│ │ │ ├── Footer.jsx
│ │ | ├── Footer.styled.jsx
│ │ ├── header
│ │ │ ├── Header.jsx
│ │ │ ├── Card.jsx
│ │ │ └── Header.styled.jsx
│ │ │ └── Card.styled.jsx
│ │ └── navbar
│ │ ├── Navbar.js
│ │ └── Navbar.styled.jsx
│ ├── pages
│ │ ├── about
│ │ │ ├── About.js
│ │ │ ├── About.styled.jsx
│ │ ├── details
│ │ │ ├── Details.js
│ │ │ ├── Details.styled.jsx
│ │ ├── login
│ │ │ ├── Login.js
│ │ │ ├── Login.styled.jsx
│ │ ├── home
│ │ │ ├── home.js
│ │ │ ├── home.styled.jsx
│ │ └── notfound
│ │ ├── notfound.js
│ │ └── notfound.styled.jsx
│ ├── router
│ │ └── AppRouter.js
│ │ └── PrivateRouter.js
│ ├── assets
│ │ └── [images]
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
- HTML
- CSS
- JS
- ReactJS
- Styled Components
- Material-UI
To run this project;
- Signup
https://developer.edamam.com/edamam-docs-recipe-apiand get api key and id. - Create a .env file and set your REACT_APP_API_KEY and REACT_APP_API_ID:
- After these you can run the project as usual =>
$ git clone https://github.com/esadakman/reactjs-recipe-app.git
$ cd ./recipe-app
$ npm install / yarn
$ npm start / yarn start
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent