Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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.