Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karamanburak/shopping-cart
🛍️ Simple ecommerce cart application built with React
https://github.com/karamanburak/shopping-cart
Last synced: 2 days ago
JSON representation
🛍️ Simple ecommerce cart application built with React
- Host: GitHub
- URL: https://github.com/karamanburak/shopping-cart
- Owner: karamanburak
- License: mit
- Created: 2024-03-17T10:23:45.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-28T13:05:19.000Z (7 months ago)
- Last Synced: 2024-04-29T13:45:48.902Z (7 months ago)
- Language: JavaScript
- Homepage: https://shopyfi.vercel.app/
- Size: 13.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# shopping-cart
[Sopping Cart Live](https://shopyfi.vercel.app/)
## Description
The aim of the project is to add a specific product to a shopping cart, purchase the product added to the cart, and delete unwanted products from the cart. The user must add the products they want to buy to the cart themselves.
## Project Skeleton
```
Shopping Cart (folder)
|
SOLUTION
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── [images]
│ ├── components
│ │ ├── CardTotal.jsx
│ │ ├── MyNavbar.jsx
│ │ ├── ProductCard.jsx
│ │ └── Slider.jsx
│ └── pages
│ ├── About.jsx
│ ├── Main.jsx
│ ├── NewProduct.jsx
│ ├── NotFound.jsx
│ ├── ProductList.jsx
│ └── UpdateProduct.jsx
│ ├── router
│ └── AppRouter.jsx
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── .gitignore
│ ├── LICENSE
├── package-lock.json
├── package.json
└── README.md```
## Outcome
![shopping-cart](https://github.com/karamanburak/Shopping-Cart-React/assets/150926922/5bedbc39-7c0a-425a-8c76-ff6cf69fd846)
## Objective
Build a Shopping Cart App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
## Steps to Solution
- Step 1: Create React App using `npx create-react-app shopping-cart`
- Step 2 : Install `"react-icons"` package to your `package.json` for icons or fontawesome cdn link paste to "public/index.html", install `axios` package and `react-router-dom`.
- Step 3: Build Checkout Page App.
- Step 4: You can use CSS frameworks like Bootstrap, Material UI etc.