https://github.com/skycooper/recipeappreactstyledcomponent
Project aims to create a Recipe app using React and styled components.
https://github.com/skycooper/recipeappreactstyledcomponent
axios axios-react html-css-javascript react react-hooks react-router styled-components
Last synced: about 2 months ago
JSON representation
Project aims to create a Recipe app using React and styled components.
- Host: GitHub
- URL: https://github.com/skycooper/recipeappreactstyledcomponent
- Owner: SkyCooper
- Created: 2022-11-01T20:55:27.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-04T08:02:40.000Z (over 3 years ago)
- Last Synced: 2025-02-23T10:15:08.050Z (over 1 year ago)
- Topics: axios, axios-react, html-css-javascript, react, react-hooks, react-router, styled-components
- Language: JavaScript
- Homepage: https://cooper-recipe-app.netlify.app/
- Size: 7.39 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project : Recipe App (Styled Components)
## Check The Live Website ➡️ https://cooper-recipe-app.netlify.app/
## Visualization of the Website
## Description
Project aims to create a Recipe app using React and styled components.
## Learning Outcomes
At the end of the project, you will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Project(folder)
|
|----README.md
├── public
│ └── index.html
├── env (id / key)
├── src
│ ├── assests
│ ├── components
│ │ ├── cards
│ │ | ├── Cards.jsx
│ │ | ├── Cards.style.jsx
│ │ ├── globalStyles
│ │ | ├── theme.js
│ │ | ├── Flex.jsx
│ │ | ├── globalStyle.jsx
│ │ ├── header
│ │ | ├── Header.jsx
│ │ | ├── Header.style.jsx
│ │ ├── nav
│ │ | ├── Navbar.jsx
│ │ | ├── Navbar.style.jsx
│ ├── pages
│ │ ├── about
│ │ | ├── About.jsx
│ │ | ├── About.style.jsx
│ │ ├── detail
│ │ | ├── Detail.jsx
│ │ | ├── Detail.style.jsx
│ │ ├── home
│ │ | ├── Home.jsx
│ │ | ├── Home.style.jsx
│ │ ├── login
│ │ | ├── Login.jsx
│ │ | ├── Login.style.jsx
│ │ ├── logout
│ │ | ├── Logout.jsx
│ │ | ├── Logout.style.jsx
│ │ ├── register
│ │ | ├── Register.jsx
│ │ | ├── Register.style.jsx
│ ├── router
│ │ └── AppRouter.jsx
│ │ └── PrivateRouter.jsx
│ ├── App.js
│ ├── index.js
│ ├── recipe.gif
│ ├── edemam-APIkey-instructions.pdf
└── package.json
```
### Dependencies
- react-router-dom@6.3
- styled-components
- react-icons
- axios
- https://api.edamam.com/search?q=${food}&app_id=${appID}&app_key=${appKey}&mealType=${mealType}
### Overview
I mastered HTML & CSS & JS & ReactJS features in this project.
You can see the visual representation of the website above.
## Notes
- Step 1: Create React App using `npx create-react-app recipe-app`
- Step 2: For images you can use [Images](./src/assets).
- Step 3: Push your application into your own public repo on Github
- Step 4: Add project gif to your project and README.md file.
## Resources
- 🔥 You can use [`edemam API`](https://www.edamam.com/) for your own work.
- 🔥 For instructions you can use [`instructions PDF](./edemam-APIkey-instructions.pdf) for your own work.
## Support
- Open an Issue, I will check it a soon as possible 👀
- Don't forget to show your support by ⭐ the project!!
## Quick start
- Clone this repo using git clone https://github.com/SkyCooper/RecipeAppReactStyledComponent.git
- Move to the appropriate directory: cd recipe-app.
- Run npm run install in order to install dependencies and clean the git repo.
- Change configurations in /src/config/config.js according to your cosmicjs bucket.
- Run npm run dev to start the project in dev mode.
- Run npm run build to build the project in /dist folder.
- Now you're ready to rumble!
## Contributing
- Fork it (https://github.com/SkyCooper/RecipeAppReactStyledComponent)
- Create your feature branch (git checkout -b feature/fooBar)
- Commit your changes (git commit -am 'Add some fooBar')
- Push to the branch (git push origin feature/fooBar)
- Create a new Pull Request
# ⌛ Happy Coding ✍