MERN E-Commerce 🛍️✨

📌 Table of Contents

• MERN E-Commerce 🛍️✨
  • 📌 Table of Contents
  • 🌐 Overview
  • ⚙️ Features
  • 💻 Technologies Used
    • 🔙 Backend
    • 🌐 Frontend
    • 🔐 Auth & Security
    • 🧰 Dev Tools
  • 🗝️ Key Takeaways
  • 🚀 How to Run the Project
    • Prerequisites
    • Install & run (development)
    • Build & Start (production)
  • 📄 Environment Variables
  • 🛠️ API Endpoints
  • 🤝 Contributing
  • 💬 Contact

🌐 Overview

MERN E-Commerce is a full-stack TypeScript application implementing a modern online shop: user auth (access + refresh tokens with Redis), cart management, Stripe Checkout, coupon generation/validation, Cloudinary image uploads, Redis caching for featured products, admin product management and analytics.
Backend is an Express + TypeScript app (/backend) and frontend is React + Vite + TypeScript (/frontend).

⚙️ Features

• Auth & Sessions: Signup/login, httpOnly access & refresh tokens, refresh tokens stored in Redis.
• Product management: Admin CRUD for products, Cloudinary image upload, toggle featured.
• Cart: add/remove items, update quantity, fetch cart items populated with product info.
• Stripe Checkout: create checkout sessions, success handling creates orders and deactivates coupons.
• Coupons: per-user coupon, validation, expiration handling and Stripe coupon sync.
• Caching & Performance: Redis cache for featured products and token store.
• Analytics: totals (users, products, sales, revenue) and daily sales aggregation.
• Security: Helmet CSP configured for Stripe & Cloudinary, CORS, cookie flags, JSON limits.
• Frontend UX: Zustand stores, axios with refresh interceptor, protected routes, responsive UI.

💻 Technologies Used

🔙 Backend

• Node.js – JavaScript runtime for building fast and scalable server-side applications.
• Express – Minimal and flexible Node.js web application framework.
• TypeScript – Strongly typed superset of JavaScript that enhances code quality and developer experience.
• Mongoose – Elegant MongoDB object modeling for Node.js.
• MongoDB – NoSQL database used for storing products, users, orders, and more.
• ioredis – Redis client for Node.js, used for caching and session/token storage.
• Stripe – Payment platform used to handle checkout sessions and transactions.
• Cloudinary – Cloud-based image hosting and transformation service, used for storing and optimizing product images.

🌐 Frontend

• React – Component-based library for building interactive UIs.
• Vite – Fast development build tool for modern web apps.
• TypeScript – Strong typing for better developer tooling and fewer bugs.
• Tailwind CSS – Utility-first CSS framework for rapidly building custom designs.
• Zustand – Lightweight, minimal state-management solution for React.
• Axios – Promise-based HTTP client for making API requests from the browser.
• React Router – Declarative routing for React applications.
• React Hot Toast – Lightweight, customizable toast notifications for user feedback.
• Recharts – Charting library for building customizable data visualizations.

🔐 Auth & Security

• JWT – JSON Web Tokens used for access and refresh token-based authentication.
• httpOnly Cookies – Used for securely storing refresh tokens in the browser, inaccessible to JavaScript.
• Helmet – Secures Express apps by setting various HTTP headers.
• CORS – Mechanism to allow controlled access to resources from different domains.
• bcrypt – Library for hashing passwords and comparing password hashes securely.

🧰 Dev Tools

• tsx – Instant TypeScript execution for Node.js using esbuild.
• Vite – Lightning-fast dev server and build tool (also listed in frontend).
• ESLint – Pluggable linting utility for identifying and fixing problems in code.
• TypeScript – Repeated for emphasis; used both client and server side for type safety.

🗝️ Key Takeaways

1. Secure session flow: short-lived access tokens + refresh tokens stored in Redis.
2. Server-authoritative payments: Stripe sessions → server verifies and persists orders.
3. Cache-first reads: Redis improves performance for featured products.
4. Clean separation: controllers for logic, routes for endpoints, models for schema.
5. Robust frontend flow: global token refresh + optimistic UX with Zustand.

🚀 How to Run the Project

Prerequisites

• Node.js (v18+ recommended) & npm
• MongoDB (Atlas or local)
• Redis (Upstash or local)
• Cloudinary account (optional for images)
• Stripe account (test keys ok)

Install & run (development)

1. Clone repository:

   git clone https://github.com/surjeetkumar8006/MERN_Ecommerce
   cd MERN_Ecommerce

2. Install dependencies:

   npm install
   npm install --prefix frontend

3. Create .env (see next section).

4. Start backend (with tsx watch):

   npm run dev

5. Start frontend (in another terminal):

   cd frontend
   npm run dev

   Frontend default: http://localhost:5173

   Backend default: http://localhost:5000 (or the PORT from .env)

Build & Start (production)

From project root:

npm run build
npm run start

• npm run build installs frontend deps, builds frontend, compiles backend TS into backend/dist.
• npm run start runs node backend/dist/server.js and — when NODE_ENV !== "development" — serves the frontend build from frontend/dist.

📄 Environment Variables

Create a .env in the project root:

PORT=5000
NODE_ENV=development

MONGO_URI=mongodb+srv://<user>:<pass>@cluster0.mongodb.net/dbname

UPSTASH_REDIS_URL=redis://<...>

ACCESS_TOKEN_SECRET=your_access_token_secret
REFRESH_TOKEN_SECRET=your_refresh_token_secret

CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

STRIPE_SECRET_KEY=sk_test_...
CLIENT_URL=http://localhost:5173

Frontend (client-only) .env:

# frontend/.env
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...

🛠️ API Endpoints

All routes are mounted under /api/.... Protected routes require the protectedRoute middleware (valid access token cookie). Admin-only routes also require adminRoute.

• Auth

  • POST /signup — Register new user and set auth cookies.
  • POST /login — Log in user and return user data with cookies.
  • POST /logout — Logout user and clear cookies. (Protected)
  • POST /refresh-token — Refresh access token using cookie.
  • GET /profile — Get current user profile. (Protected)

• Products

  • GET /products — Get all products. (Protected, Admin only)
  • GET /products/featured — Get featured products (cached).
  • GET /products/category/:category — Get products by category.
  • GET /products/recommendations — Get recommended products.
  • POST /products — Create a new product. (Protected, Admin only)
  • PATCH /products/:id — Toggle featured status. (Protected, Admin only)
  • DELETE /products/:id — Delete product and image. (Protected, Admin only)

• Cart

  • GET /cart — Get current user's cart. (Protected)
  • POST /cart — Add or increment product in cart. (Protected)
  • DELETE /cart — Remove product or clear cart. (Protected)
  • PUT /cart/:id — Update item quantity. (Protected)

• Coupons

  • GET /coupons — Get active coupon. (Protected)
  • POST /coupons/validate — Validate coupon code. (Protected)

• Payments

  • POST /payments/create-checkout-session — Start Stripe checkout. (Protected)
  • POST /payments/checkout-success — Confirm payment and create order. (Protected)

🤝 Contributing

Contributions are welcome!

1. Fork the repo
2. Create branch: git checkout -b feat/your-feature
3. Commit: git commit -m "feat: your feature"
4. Push & open a PR

Please test major flows (signup/login, checkout, admin product actions) before submitting PRs.