E-Commerce Platform

Connecting artisans with buyers through a beautifully crafted shopping experience.

📸 Screenshots

Home Page

Home Page

Product Details Page

Cart Page

Admin Page

✨ Features

Feature	Details
🛍️ Product Catalog	Browse, search & filter handmade crafts by category
🔐 Authentication	JWT-based login / register with role-based access
🛒 Shopping Cart	Real-time cart with quantity management
📦 Multi-Step Checkout	Cart → Delivery Address → Order Confirmation
📍 Order Tracking	Live status timeline: Confirmed → Shipped → Delivered
⭐ Verified Reviews	Only customers who purchased can leave reviews
👤 User Profile	Edit display name & password, view full order history
🛠️ Admin Dashboard	Manage products & update order statuses with search + filter

---

🛠 Tech Stack

Frontend          Backend           Database
──────────        ───────────       ────────
React 18          Node.js           MongoDB Atlas
React Router v6   Express.js        Mongoose ODM
Context API       JWT + bcrypt
Vanilla CSS       Helmet + CORS
Vite

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• A free MongoDB Atlas account

1. Clone

git clone https://github.com/Tgovardhan2005/ecommerce-website.git
cd ecommerce-website

2. Backend

cd backend
npm install

Create backend/.env:

MONGO_URI=mongodb+srv://<user>:<pass>@cluster0.xxxxx.mongodb.net/craftnest
JWT_SECRET=your-secret-key
CLIENT_URL=http://localhost:5173
PORT=5000

npm start         # starts on http://localhost:5000

3. Frontend

cd frontend
npm install
npm run dev       # starts on http://localhost:5173

4. Create Admin (first time only)

cd backend
node createAdmin.js

---

📁 Project Structure

ecommerce-website/
├── backend/
│   ├── config/        # DB connection, response helper, seed data
│   ├── controllers/   # Business logic (auth, orders, reviews)
│   ├── middleware/    # JWT guard, role check, error handler
│   ├── models/        # Mongoose schemas (User, Product, Order, Review)
│   ├── routes/        # API endpoint definitions
│   └── server.js      # Entry point
│
└── frontend/
    └── src/
        ├── components/ # Navbar, Hero, ProductCard, ProtectedRoute
        ├── context/    # AuthContext (JWT), CartContext (cart state)
        ├── hooks/      # useProducts (data fetching)
        ├── pages/      # One component per route
        └── index.css   # Full design system

---

🔌 API Overview

POST  /api/auth/register          → Create account
POST  /api/auth/login             → Login, receive JWT
GET   /api/products               → All products (public)
POST  /api/products               → Add product (admin)
POST  /api/orders                 → Place order (user)
GET   /api/orders                 → My orders (user)
GET   /api/orders/admin/all       → All orders (admin)
PUT   /api/orders/admin/:id/status→ Update tracking (admin)
POST  /api/reviews/:productId     → Review (verified buyers)

---

📸 Pages

Page	Path	Access
Home	/	Public
Products	/products	Public
Product Detail	/products/:id	Public
Cart & Checkout	/cart	Public
Profile & Orders	/profile	🔒 Logged in
Admin Dashboard	/admin	🔒 Admin only

---

📦 Order Status Flow

🟢 Confirmed  →  📦 Shipped  →  🛵 Out for Delivery  →  🎉 Delivered

Status is updated by the admin via the dashboard. Customers see the live timeline in their profile.

---

Built with ❤️ by Govardhan T  |  CraftNest © 2025