🛒 Shopping Cart Application

BUILT WITH REACT.JS, REDUX & REDUX-SAGA FOR STATE MANAGEMENT AND ASYNCHRONOUS DATA HANDLING

   

DEPLOYED ON VERCEL VIA GITHUB

---

☁️ Live Demo: https://redux-saga-reactjs-app.vercel.app

A React-based product listing and shopping cart application built using Redux and Redux-Saga for state management and asynchronous data handling, along with React Router for navigation. The app features a clean, responsive UI, dynamic product fetching from the Fake Store API, and seamless cart management. The application is deployed on Vercel.

🚀 Features

• Fetch products from Fake Store API using Redux-Saga
• Add, remove, or clear products from the cart
• Shows total, discount, and tax dynamically
• Spinner displayed while fetching products
• Responsive product grid with uniform card sizes
• The header displays live cart count
• Simple and clean footer with developer info
• Fully front-end project, deployable as static site

---

🛠️ Tech Stack

The following technologies are used in this project:

Layer	Technology / Tools	Description
Front-end	React, Redux, Redux-Saga, React Router	Used for building the UI, managing state, handling async operations, and navigation between pages.
Styling	CSS (Flexbox & Grid)	Provides responsive and clean layout design across all components.
API	Fake Store API	Source of product data for fetching and displaying dynamic product listings.
Deployment	Vercel (Free)	Used to deploy the application with continuous integration from GitHub.

---

📁 Project Structure

The following project structure is used in this project:

redux-saga-reactjs-app/
├── node_modules/                 # Installed dependencies
├── public/                       # Static assets (index.html, images, favicon, etc.)
├── src/                          
│   ├── components/               # UI components
│   │   ├── header.js
│   │   ├── footer.js
│   │   ├── main.js
│   │   └── cart.js
│   ├── redux/                    # Redux logic (actions, reducers, sagas, store)
│   │   ├── cart/                 
│   │   │   ├── cartAction.js
│   │   │   └── cartReducer.js
│   │   ├── product/
│   │   │   ├── productAction.js
│   │   │   ├── productReducer.js
│   │   │   └── productSaga.js
│   │   ├── constants.js          # Shared action types/constants
│   │   ├── rootReducer.js        # Combines all reducers
│   │   └── store.js              # Creates Redux store & applies saga middleware
│   ├── App.css                   # Global styles
│   ├── App.js                    # Root component
│   └── index.js                  # Entry point (ReactDOM.render + Provider setup)
├── .gitignore                    # Files and folders to ignore in Git
├── LICENSE                       # License information (if added)
├── package.json                  # Project metadata & dependencies
└── README.md                     # Documentation

---

📦 Getting Started

Follow the steps below to set up and run the project successfully:

1. ✅ Clone the Repository:

git clone https://github.com/PAIshanMadusha/redux-saga-reactjs-app.git

2. ✅ Navigate to the Project Directory:

cd redux-saga-reactjs-app

3. ✅ Install Dependencies:

npm install

4. ✅ Run the App Locally:

npm start

5. ⚡ Successful Startup Output:

If everything is configured properly, your terminal should display something like this:

webpack compiled successfully

The app runs on: http://localhost:3000

6. ✅ Build for Production:

npm run build

📸 System Screenshots

These screenshots illustrate how the system appears on desktop:

---

---

❤️ Created by:

Ishan Madhusha
GitHub: PAIshanMadusha

Feel free to explore my work and get in touch if you'd like to collaborate! 🚀

---

📝 License

This project is licensed under the MIT License : See the LICENSE file for details.