Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karamanburak/recipe-app
🍪 This project aims to search for meals according to the desired meal time and access the corresponding recipe.
https://github.com/karamanburak/recipe-app
localstorage react react-hooks styled-components
Last synced: 1 day ago
JSON representation
🍪 This project aims to search for meals according to the desired meal time and access the corresponding recipe.
- Host: GitHub
- URL: https://github.com/karamanburak/recipe-app
- Owner: karamanburak
- License: mit
- Created: 2024-03-23T16:08:32.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-28T13:05:14.000Z (7 months ago)
- Last Synced: 2024-04-28T13:45:36.465Z (7 months ago)
- Topics: localstorage, react, react-hooks, styled-components
- Language: JavaScript
- Homepage: https://recipy.vercel.app/
- Size: 5.83 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# recipe-app
[Recipe App Live](https://recipy.vercel.app/)
## Description
This project is a simple recipe project. The project is developed with react. The aim of the project is to access the recipe by searching for the desired dish and the desired meal time. You need to be logged in to access the recipe.
`The user must enter username: "name" password: "1234" to access the login page or details page: "1234".`
## Project Skeleton
```
06 - Recipe App (folder)
|
SOLUTION
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── [images]
│ ├── components
│ │ ├── header
│ │ │ ├── Form.jsx
│ │ │ ├── Header.jsx
│ │ │ └── style.jsx
│ │ └── navbar
│ │ ├── Navbar.jsx
│ │ └── style.jsx
│ ├── context
│ │ ├── RecipeProvider.jsx
│ ├── pages
│ │ ├── about
│ │ │ ├── About.jsx
│ │ │ └── style.jsx
│ │ ├── details
│ │ │ ├── Details.jsx
│ │ │ └── style.jsx
│ │ ├── errorPage
│ │ │ ├── NotFound.jsx
│ │ │ └── NotFoundStyle.jsx
│ │ └── home
│ │ ├── Home.jsx
│ │ ├── RecipeCard.jsx
│ │ └── style.jsx
│ │ ├── login
│ │ │ ├── Login.jsx
│ │ │ └── style.jsx
│ │ ├── register
│ │ │ ├── Register.jsx
│ │ │ └── Style.jsx
│ ├── router
│ │ ├── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ ├── App.js
│ ├── index.css
│ └── index.js
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── yarn.lock
```
## Outcome
## Steps to Solution
- Step 1: Create React App using `yarn create react-app recipe-app`or `npx create-react-app recipe-app`
- Step 2: Signup `https://developer.edamam.com/edamam-docs-recipe-api` and get api key.
- Step 3 : Using api key and `axios` for getting data from `https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&mealType=${meal}`.
- Step 4: You are expected to code your project with **styled component**
- Step 5: You can use Context API for Global State Management
- Step 6: You can get random login background image from `https://picsum.photos/1600/900`
## Notes
- [Assets Folder](./src/assets/)