A modern demo E-Commerce Web App built using React, Redux Toolkit, and Bootstrap.
This project showcases product listing, cart management, state handling, UI design, and essential e-commerce workflows — all without a backend.
- Fetches products from Free Public API
- Add to cart / Remove from cart
- Increase / Decrease quantity
- Cart total, tax, and price calculation
- Global state management via Redux Toolkit
- Modern UI with React + Bootstrap
- Data persists using LocalStorage
- Fully responsive design
- Clean folder structure for scalability
| Technology | Version | Usage |
|---|---|---|
| React | Latest | UI Components & rendering |
| Redux Toolkit | Latest | Global State Management |
| React Redux | Latest | Redux bindings for React |
| Bootstrap | 5.x | UI & responsive layout |
| Vite | Latest | Fast development server |
| LocalStorage | — | Cart persistence |
| Free Fake Store API | — | Product listing |
Clone repo:
git clone https://github.com/nirajj87/e-commerce-with-react.git
cd e-commerce-with-react
Install dependencies:
npm install
Run project:
npm run dev
📤 Deployment (GitHub Pages)
Install:
npm install gh-pages --save-dev
Add in package.json:
"homepage": "https://nirajj87.github.io/e-commerce-with-react",
Add scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
Deploy:
npm run deploy
📁 Folder Structure
src/
├── components/
├── pages/
├── redux/
│ ├── store.js
│ └── slices/
├── hooks/
├── style/
├── assets/
└── App.jsx
🎯 Purpose
This project is made only for demo & learning purposes:
Understanding React workflow
Using Redux Toolkit in real project
Implementing cart logic
Using LocalStorage effectively
Practicing responsive UI & component structure
No backend is used.
👨💻 Author
Niraj Kumar Singh
Full-Stack Developer
🔗 Portfolio: devsupport.co.in
🔗 GitHub: nirajj87
🔗 LinkedIn: Niraj Kumar Singh
📧 Email: nirajkumar11288@gmail.com
⭐ Like this project?
If you found it useful, consider giving it a ⭐ on GitHub!