React Training — E-Commerce App

A React-based e-commerce training application featuring user authentication, product browsing, and a shopping cart with Redux state management.

Features

• User Authentication — Register and log in with form validation
• Product Catalog — Browse products with category/name filtering via a left panel
• Shopping Cart — Add products, adjust quantities, remove items, and empty the cart
• Responsive Navigation — Collapsible navbar with mobile support
• Redux State Management — Global state for products and cart via Redux Toolkit
• Pagination — Paginated product listing

Tech Stack

Layer	Technology
UI Framework	React 18
State Management	Redux Toolkit
Routing	React Router DOM v6
UI Components	Semantic UI React, Bootstrap 5
HTTP Client	Fetch API / Axios
Auth	JWT (jwt-decode)

Prerequisites

• Node.js >= 14
• A running backend API at http://localhost:3000 with the following endpoints:
  • POST /login
  • POST /signup
  • GET /products
  • GET /carts/me
  • PUT /carts/add-product-to-cart
  • PUT /carts/update-cart-item/:id
  • DELETE /carts/delete-cart-item/:id
  • DELETE /carts/delete-cart-items

Installation

# Clone the repository
git clone <repo-url>
cd react-training

# Install dependencies
npm install

Available Scripts

npm start

Runs the app in development mode at http://localhost:3000. The page reloads automatically when you save changes.

npm test

Launches the test runner in interactive watch mode.

npm run build

Builds the app for production into the build folder. The build is minified and filenames include content hashes.

npm run eject

Irreversible. Ejects the Create React App configuration for full control over webpack, Babel, and ESLint.

Project Structure

src/
├── App.js                        # Root component with route definitions
├── Pages/
│   ├── Auth.js                   # Auth page (wraps Login/Signup)
│   ├── HomePage.js               # Landing page
│   └── PageNotFound.js           # 404 page
├── component/
│   ├── Cart/                     # Cart view and cart item components
│   ├── Home/                     # Home page UI
│   ├── LeftPanel/                # Category/filter sidebar
│   ├── Login/                    # Login form
│   ├── LoginSignupContainer/     # Auth layout container
│   ├── NavResponsive/            # Responsive navbar
│   ├── NavigationBar/            # Desktop navigation bar
│   ├── Paginaion/                # Pagination component
│   ├── Products/                 # Product list, card, and container
│   └── Signup/                   # Signup form
├── redux/
│   ├── cartSlice.js              # Cart state (fetch, add, update, delete, empty)
│   └── productSlice.js           # Products state (fetch, filter)
└── store/
    └── store.js                  # Redux store configuration

Routes

Path	Component	Description
/	HomePage	Landing / home page
/products	ProductContainer	Product listing with filters
/cart	Cart	Shopping cart
/login	AuthPage	Login form
/signup	AuthPage	Registration form
*	PageNotFound	404 fallback