https://github.com/mehmet-github06/react-shopping-cart-app
This project I created with React includes a mock API used for simulating a shopping cart. This API simulates basic shopping operations such as listing products, adding items to the cart, and removing items from the cart.
https://github.com/mehmet-github06/react-shopping-cart-app
axios axios-react bootstrap5 font-awesome html-css-javascript mockapi react router-dom
Last synced: about 2 months ago
JSON representation
This project I created with React includes a mock API used for simulating a shopping cart. This API simulates basic shopping operations such as listing products, adding items to the cart, and removing items from the cart.
- Host: GitHub
- URL: https://github.com/mehmet-github06/react-shopping-cart-app
- Owner: Mehmet-github06
- Created: 2024-02-19T21:31:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T21:39:19.000Z (over 2 years ago)
- Last Synced: 2025-03-05T17:27:13.480Z (about 1 year ago)
- Topics: axios, axios-react, bootstrap5, font-awesome, html-css-javascript, mockapi, react, router-dom
- Language: JavaScript
- Homepage: https://react-shopping-cart-app-inky.vercel.app
- Size: 7.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping Cart
## About the Project
This project I created with React includes a mock API used for simulating a shopping cart. This API simulates basic shopping operations such as listing products, adding items to the cart, and removing items from the cart.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Project Skeleton](#project-skeleton)
- [Screenshots](#screenshots)
## Live Demo
[Shopping Cart](https://react-shopping-cart-app-inky.vercel.app/)
## Features
- Add any product you want to the shopping cart.
- Delete any product from the cart.
- Update any product in the cart.
## Technologies Used
- React
- React Router Dom
- [React Bootstrap](https://react-bootstrap.netlify.app/)
- [Bootstrap](https://getbootstrap.com/)
- Axios for API requests
- [Mockapi](https://mockapi.io/) for data
- Icons from [Font Awesome](https://fontawesome.com/icons)
- Styling with CSS
## Project Skeleton
```
Shopping Cart (folder)
|
|----readme.md
SOLUTION
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── assets
│ │ └── [image]
│ ├── components
│ │ ├── CardTotal.jsx
│ │ ├── Navbar.jsx
│ │ ├── ProductCard.jsx
│ │ └── ProductForm.jsx
│ ├── index.css
│ ├── index.js
│ ├── router
│ │ └── router.js
│ └── pages
│ ├── About.jsx
│ ├── Main.jsx
│ ├── NewProduct.jsx
│ ├── ProductList.jsx
│ └── UpdateProduct.jsx
├── package.json
└── yarn.lock
```
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.