E-Commerce Website Using MERN Stack

Overview

Architecture

Core Features

Customer-Facing

• User Authentication — JWT-based login/signup with role-based access (Customer/Admin)
• Product Catalog — Category filtering, search with debouncing, pagination, sorting (price/rating/popularity)
• Product Details — Image gallery, size/color variants, stock availability, related products
• Shopping Cart — Add/remove items, quantity adjustment, persistent cart (localStorage + DB sync)
• Wishlist — Save favorites for later purchase
• Checkout Flow — Multi-step checkout with address management, shipping options, and order summary
• Payment Integration — Secure card/UPI payments with Stripe/Razorpay webhooks
• Order Tracking — Real-time order status updates (Pending → Processing → Shipped → Delivered)
• Reviews & Ratings — Star ratings with photo uploads, verified purchase badges
• User Dashboard — Order history, profile management, saved addresses

Admin Dashboard

• Product Management — CRUD operations with bulk upload, inventory tracking
• Order Management — View, update status, generate invoices, handle returns
• User Management — View customers, manage roles, ban/suspend accounts
• Analytics — Sales charts (Revenue, top products, category performance) using Chart.js/Recharts
• Coupon & Discounts — Create promo codes, percentage/fixed discounts, expiry dates

Database Schema (MongoDB)

Users
├── name, email, password (hashed), avatar, role
├── addresses: [{ street, city, state, zip, country, phone }]
└── wishlist: [productIds]

Products
├── name, description, price, comparePrice, images[]
├── category, subCategory, tags[]
├── stock, sku, weight, dimensions
├── ratings: { average, count }
├── reviews: [{ userId, rating, comment, images[], createdAt }]
└── isActive, createdAt, updatedAt

Orders
├── userId, orderItems: [{ productId, name, image, price, qty }]
├── shippingAddress, paymentMethod, paymentResult
├── itemsPrice, taxPrice, shippingPrice, totalPrice
├── status: pending/processing/shipped/delivered/cancelled
└── paidAt, deliveredAt, createdAt

Cart (optional collection or embedded)
├── userId, items: [{ productId, qty, price }]
└── updatedAt

API Endpoints (REST)

Key Implementation Details

Security

• Password Hashing: bcrypt with salt rounds (12+)
• JWT Strategy: Access tokens (15m expiry) + Refresh tokens (7d)
• Input Validation: express-validator / Joi for sanitization
• CORS: Whitelist frontend origin
• Helmet.js: Security headers
• Rate Limiting: Prevent brute-force on auth endpoints

Performance

• Pagination: Skip/limit on product listings (20 items/page)
• Indexing: MongoDB text indexes for search, compound indexes for filters
• Image Optimization: WebP format, lazy loading, responsive images
• Caching: Redis for session storage and frequent queries (optional)
• Debouncing: 300ms delay on search input to reduce API calls

State Management (Frontend)

• Redux Store Slices:
  • authSlice: user data, login state
  • cartSlice: items, totals, loading states
  • productSlice: listings, filters, single product
  • orderSlice: checkout flow, order history

Folder Structure

ecommerce-mern/
├── backend/
│   ├── config/          # DB connection, env vars
│   ├── controllers/     # Route handlers
│   ├── models/          # Mongoose schemas
│   ├── routes/          # API route definitions
│   ├── middleware/      # Auth, error handling, upload
│   ├── utils/           # Helpers, email service
│   └── server.js        # Entry point
├── frontend/
│   ├── src/
│   │   ├── components/  # Reusable UI (Navbar, ProductCard, Footer)
│   │   ├── pages/       # Route pages (Home, Product, Cart, Profile)
│   │   ├── redux/       # Store, slices, async thunks
│   │   ├── hooks/       # Custom hooks (useAuth, useCart)
│   │   └── utils/       # API client (Axios interceptors)
│   └── index.html
└── package.json

Why MERN for E-Commerce?

1. Single Language (JS) — Full-stack JavaScript reduces context switching
2. JSON Everywhere — MongoDB stores JSON-like documents; seamless data flow from DB → API → React
3. Scalability — MongoDB handles high write throughput (orders, reviews); Node.js event loop manages concurrent requests efficiently
4. Rich Ecosystem — npm packages for everything: authentication, payment, image handling, validation
5. React’s Component Model — Reusable product cards, modals, and forms speed up UI development
6. Real-time Ready — Easy to add Socket.io later for live order tracking or chat support