Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/umutplvn/shopping-app
Shopping App
https://github.com/umutplvn/shopping-app
axios-react material-ui mui react react-router-dom toastify useeffect usestate
Last synced: about 1 month ago
JSON representation
Shopping App
- Host: GitHub
- URL: https://github.com/umutplvn/shopping-app
- Owner: Umutplvn
- Created: 2023-08-06T01:32:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-08T02:00:53.000Z (over 1 year ago)
- Last Synced: 2023-09-08T03:42:20.113Z (over 1 year ago)
- Topics: axios-react, material-ui, mui, react, react-router-dom, toastify, useeffect, usestate
- Language: JavaScript
- Homepage: https://shopping-app-umut.netlify.app/
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping App (RP-09)
## Live at: https://shopping-app-umut.netlify.app/
## Description
Project aims to create a Shopping App.
## 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
```
003 - Shopping App(folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── assets
│ │ └── cw.svg
│ ├── components
│ │ ├── BasketCard.jsx
│ │ ├── CategoryBar.jsx
│ │ ├── EmptyBasketTotal.jsx
│ │ ├── FiiledBasketTotal.jsx
│ │ ├── NavBar.jsx
│ │ └── ProductCard.jsx
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ ├── Basket.jsx
│ │ ├── Home.jsx
│ │ ├── index.jsx
│ │ └── type
│ │ │ └── basketType.js
│ └── router
│ └── AppRouter.jsx
├── package.json
└── yarn.lock
```
## Objective
Build a Shopping App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
- Material UI
### At the end of the project, students 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.
## Steps to Solution
- Step 1: Create React App using pnpm and vite
- Step 2 : Install `axios`, `redux` , `react-redux`, `react-router-dom`, `mui`, `mui-icons` package to your `package.json`.
- Step 3: You can use https://fakestoreapi.com/products for data.
- Step 4: You can use https://fakestoreapi.com/products/categories for categories.
- Step 5: Push your application into your own public repo on Github
- Step 6: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities to your app.
**
☺ Happy Coding ✍
**