ShopNest — Production-Level E-Commerce Website

Full-stack e-commerce web application built with React.js, TypeScript, Node.js, Express.js, and MongoDB.

Tech Stack

Frontend: React 18 + TypeScript + Vite + Tailwind CSS + React Router + Axios + Context API Backend: Node.js + Express.js + TypeScript + MongoDB + Mongoose Auth: JWT + bcrypt (password hashing, protected routes, role-based authorization) Security: Helmet, CORS, rate limiting on auth routes, server-side price recalculation on checkout

Features

Customer

• Signup / Login (JWT auth)
• Product listing with search, category filter, price sort, pagination
• Product detail page with image gallery and customer reviews/ratings
• Shopping cart (persisted in browser)
• Checkout with shipping address + payment method (COD / UPI / Card — simulated)
• Order history and order tracking with status timeline
• Profile management (name, default address)

Admin (role: admin)

• Dashboard: revenue, orders, products, users, low-stock alerts, recent orders
• Product management: create, edit, delete, feature products
• Order management: view all orders, update order status
• User management: view users, promote/demote admin, remove users

Project Structure

ecommerce/
├── server/          # Express + TypeScript API
│   ├── src/
│   │   ├── config/       # DB connection
│   │   ├── models/       # User, Product, Order (Mongoose schemas)
│   │   ├── controllers/  # Route handlers / business logic
│   │   ├── middleware/   # JWT auth, admin guard, error handling
│   │   ├── routes/       # Express routers
│   │   ├── utils/        # Token generator, DB seed script
│   │   ├── app.ts        # Express app setup
│   │   └── server.ts     # Entry point
│   ├── .env.example
│   └── package.json
└── client/          # React + TypeScript frontend
    ├── src/
    │   ├── api/          # Axios instance with JWT interceptor
    │   ├── components/   # Navbar, ProductCard, route guards, etc.
    │   ├── context/       # Auth & Cart global state
    │   ├── pages/         # Route-level pages (+ pages/admin)
    │   ├── types/         # Shared TypeScript interfaces
    │   └── App.tsx
    ├── .env.example
    └── package.json

Setup Instructions

1. Prerequisites

• Node.js 18+
• A MongoDB database — free tier on MongoDB Atlas works great

2. Backend Setup

cd server
npm install
cp .env.example .env
# edit .env: set MONGO_URI (Atlas connection string) and JWT_SECRET (any long random string)
npm run seed     # optional: adds sample products + an admin user (admin@shopnest.com / admin123)
npm run dev      # starts server on http://localhost:5000

3. Frontend Setup

cd client
npm install
cp .env.example .env    # VITE_API_URL=http://localhost:5000/api
npm run dev              # starts app on http://localhost:5173

Open http://localhost:5173 in your browser. Log in with the seeded admin account to access /admin.

Deployment (matches your resume stack)

• Frontend: Deploy client/ to Vercel — set VITE_API_URL to your deployed backend URL in Vercel's environment variables.
• Backend: Deploy server/ to Render — set MONGO_URI, JWT_SECRET, CLIENT_URL (your Vercel URL) as environment variables. Build command: npm install && npm run build, start command: npm start.
• Database: MongoDB Atlas free cluster (M0).

Notes on Production Readiness

• Passwords are hashed with bcrypt; JWTs expire after 7 days by default.
• Product prices are recalculated server-side at checkout — the frontend never dictates the final price, preventing tampering.
• Stock is decremented atomically per order item, with a stock check before order creation.
• Rate limiting is applied to /api/auth routes to slow brute-force attempts.
• Helmet sets secure HTTP headers; CORS is restricted to your configured CLIENT_URL.
• Payment gateway (Razorpay/Stripe) is not wired up yet — COD/UPI/Card are captured as the chosen method but not actually charged. This is the one piece to add before going fully live; ask if you'd like Razorpay test-mode integration added next.

Next Steps You Could Add

• Real payment gateway integration (Razorpay test mode is the natural next step for an Indian audience)
• Image upload (Cloudinary/S3) instead of pasting image URLs in the admin form
• Wishlist feature
• Email notifications (order confirmation) via Nodemailer
• Docker Compose for one-command local setup