🛍️ E-Commerce Full-Stack Application

A complete E-Commerce platform built with modern web technologies featuring a customer-facing frontend, admin dashboard, and robust backend API.

📋 Table of Contents

• Project Overview
• Architecture
• Tech Stack
• Project Structure
• Features
• Workflow
• Installation & Setup
• API Documentation
• Database Schema
• Payment Integration
• File Upload
• Authentication & Authorization
• State Management
• Deployment
• Contributing

🎯 Project Overview

This is a full-stack E-Commerce application with three main components:

1. Frontend (Customer Portal) - React-based customer interface for browsing products, cart management, and checkout
2. Admin Dashboard - React-based admin panel for product management and order processing
3. Backend API - Node.js/Express server with MongoDB database and payment integrations

Key Features:

• 🔐 User authentication and authorization
• 🛒 Shopping cart functionality
• 💳 Multiple payment gateways (Stripe, Razorpay, COD)
• 📱 Responsive design with Tailwind CSS
• 🖼️ Image upload with Cloudinary
• 📊 Admin dashboard for inventory management
• 🔍 Product search and filtering
• 📦 Order management system

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Admin Panel   │    │    Backend      │
│   (Customer)    │    │                 │    │    (API)        │
│                 │    │                 │    │                 │
│ • Product Browse│    │ • Add Products  │    │ • REST API      │
│ • Shopping Cart │    │ • Manage Orders │    │ • Authentication│
│ • Checkout      │    │ • View Analytics│    │ • File Upload   │
│ • User Profile  │    │ • User Mgmt     │    │ • Payment Proc  │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                    ┌─────────────────┐
                    │   Database      │
                    │   (MongoDB)     │
                    │                 │
                    │ • Users         │
                    │ • Products      │
                    │ • Orders        │
                    │ • Cart Data     │
                    └─────────────────┘

🛠️ Tech Stack

Frontend & Admin Panel

• React 19 - Modern React with hooks and functional components
• React Router DOM - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Vite - Fast build tool and development server
• Axios - HTTP client for API calls
• React Toastify - Toast notifications
• Context API - State management

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT - JSON Web Tokens for authentication
• bcrypt - Password hashing
• Multer - File upload middleware
• CORS - Cross-origin resource sharing

External Services

• Cloudinary - Cloud image storage and management
• Stripe - Payment processing
• Razorpay - Payment gateway
• MongoDB Atlas - Cloud database hosting

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing
• Autoprefixer - CSS vendor prefixing
• Nodemon - Development server with auto-restart

📁 Project Structure

E-Commerce/
├── frontend/                 # Customer-facing React app
│   ├── src/
│   │   ├── components/       # Reusable UI components
│   │   ├── pages/           # Page components
│   │   ├── context/         # React Context for state
│   │   ├── assets/          # Images and static files
│   │   └── App.jsx          # Main app component
│   ├── package.json
│   └── vite.config.js
│
├── admin/                   # Admin dashboard React app
│   ├── src/
│   │   ├── components/      # Admin UI components
│   │   ├── pages/          # Admin pages
│   │   └── assets/         # Admin assets
│   ├── package.json
│   └── vite.config.js
│
└── backend/                 # Node.js API server
    ├── config/             # Configuration files
    ├── controllers/        # Business logic
    ├── middleware/         # Custom middleware
    ├── models/            # Database schemas
    ├── routes/            # API routes
    ├── server.js          # Main server file
    └── package.json

✨ Features

Customer Features

• User Registration & Login - Secure authentication with JWT
• Product Browsing - View products with images, descriptions, and pricing
• Product Search - Search functionality with filters
• Shopping Cart - Add/remove items with size selection
• Checkout Process - Multiple payment options (Stripe, Razorpay, COD)
• Order History - View past orders and status
• Responsive Design - Mobile-friendly interface

Admin Features

• Product Management - Add, edit, and delete products
• Image Upload - Multiple image upload with Cloudinary
• Order Management - View and update order status
• Inventory Control - Manage product stock and categories
• User Management - View customer data and orders

Technical Features

• RESTful API - Well-structured API endpoints
• File Upload - Secure image upload with validation
• Payment Integration - Multiple payment gateways
• Real-time Updates - Live cart and order updates
• Error Handling - Comprehensive error management
• Security - JWT authentication, password hashing, CORS

🔄 Workflow

Customer Journey

1. Browse Products → View product catalog with search/filter
2. Product Details → Select size and add to cart
3. Cart Management → Review items, update quantities
4. Checkout → Enter shipping details and payment method
5. Payment → Complete payment via Stripe/Razorpay/COD
6. Order Confirmation → Receive order confirmation and tracking

Admin Workflow

1. Login → Admin authentication
2. Add Products → Upload images, set details, categories
3. Manage Inventory → Update stock, prices, descriptions
4. Process Orders → View orders, update status
5. Analytics → Monitor sales and customer data

Backend Process Flow

1. Request → Client sends HTTP request
2. Authentication → Verify JWT token (if required)
3. Validation → Validate request data
4. Business Logic → Process request in controller
5. Database → Perform CRUD operations
6. Response → Send JSON response to client

🚀 Installation & Setup

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or Atlas)
• npm or yarn package manager

Environment Variables

Create .env files in the backend directory:

# Database
MONGO_URI=mongodb://localhost:27017
# or MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net

# JWT
JWT_SECRET=your_jwt_secret_key

# Cloudinary
CLOUDINARY_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_secret_key

# Payment Gateways
STRIPE_SECRET_KEY=your_stripe_secret_key
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_secret_key

# Admin Credentials
ADMIN_EMAIL=admin@example.com
ADMIN_PASSWORD=admin_password

# Server
PORT=4000

Create .env files in frontend and admin directories:

VITE_BACKEND_URL=http://localhost:4000

Installation Steps

1. Clone the repository

   git clone <repository-url>
   cd E-Commerce

2. Install backend dependencies

   cd backend
   npm install

3. Install frontend dependencies

   cd ../frontend
   npm install

4. Install admin dependencies

   cd ../admin
   npm install

5. Start the development servers

   Backend:

   cd backend
   npm run server

   Frontend:

   cd frontend
   npm run dev

   Admin:

   cd admin
   npm run dev

6. Access the applications

   • Frontend: http://localhost:5173
   • Admin: http://localhost:5174
   • Backend API: http://localhost:4000

📚 API Documentation

Authentication Endpoints

User Registration

POST /api/user/register
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "password123"
}

User Login

POST /api/user/login
Content-Type: application/json

{
  "email": "john@example.com",
  "password": "password123"
}

Admin Login

POST /api/user/admin-login
Content-Type: application/json

{
  "email": "admin@example.com",
  "password": "admin_password"
}

Product Endpoints

Get All Products

GET /api/product/list

Get Single Product

POST /api/product/single
Content-Type: application/json

{
  "productId": "product_id_here"
}

Add Product (Admin)

POST /api/product/add
Content-Type: multipart/form-data
Authorization: Bearer <admin_token>

{
  "name": "Product Name",
  "description": "Product description",
  "price": 99.99,
  "category": "Men",
  "subCategory": "Topwear",
  "sizes": ["S", "M", "L", "XL"],
  "bestseller": true,
  "image1": <file>,
  "image2": <file>,
  "image3": <file>,
  "image4": <file>
}

Remove Product (Admin)

POST /api/product/remove
Content-Type: application/json
Authorization: Bearer <admin_token>

{
  "id": "product_id_here"
}

Cart Endpoints

Add to Cart

POST /api/cart/add
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "itemId": "product_id",
  "size": "M"
}

Get Cart

POST /api/cart/get
Authorization: Bearer <user_token>

Update Cart

POST /api/cart/update
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "itemId": "product_id",
  "size": "M",
  "quantity": 2
}

Order Endpoints

Place Order (COD)

POST /api/order/place
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "userId": "user_id",
  "items": [
    {
      "id": "product_id",
      "name": "Product Name",
      "price": 99.99,
      "size": "M",
      "quantity": 1
    }
  ],
  "amount": 109.99,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "state": "NY",
    "zipCode": "10001"
  }
}

Place Order (Stripe)

POST /api/order/stripe
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "userId": "user_id",
  "items": [...],
  "amount": 109.99,
  "address": {...}
}

Place Order (Razorpay)

POST /api/order/razorpay
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "userId": "user_id",
  "items": [...],
  "amount": 109.99,
  "address": {...}
}

Get User Orders

POST /api/order/user-orders
Content-Type: application/json
Authorization: Bearer <user_token>

{
  "userId": "user_id"
}

Get All Orders (Admin)

POST /api/order/all-orders
Authorization: Bearer <admin_token>

Update Order Status (Admin)

POST /api/order/update-status
Content-Type: application/json
Authorization: Bearer <admin_token>

{
  "orderId": "order_id",
  "status": "Shipped"
}

🗄️ Database Schema

User Model

{
  name: String (required),
  email: String (required, unique),
  password: String (required, hashed),
  cartData: Object (default: {})
}

Product Model

{
  name: String (required),
  description: String (required),
  price: Number (required),
  image: Array (required), // Cloudinary URLs
  category: String (required), // e.g., "Men", "Women"
  subCategory: String (required), // e.g., "Topwear", "Bottomwear"
  sizes: Array (required), // e.g., ["S", "M", "L", "XL"]
  bestseller: Boolean,
  date: Number (required) // Timestamp
}

Order Model

{
  userId: String (required),
  items: Array (required), // Product details with quantities
  amount: Number (required),
  address: Object (required), // Shipping address
  status: String (required, default: "Order Placed"),
  paymentMethod: String (required), // "COD", "Stripe", "Razorpay"
  payment: Boolean (required, default: false),
  date: Number (required) // Timestamp
}

💳 Payment Integration

Supported Payment Methods

1. Cash on Delivery (COD)

   • No payment processing required
   • Order placed immediately
   • Payment collected on delivery

2. Stripe

   • Secure online payment processing
   • Supports major credit cards
   • Automatic payment verification
   • Redirect to Stripe checkout

3. Razorpay

   • Indian payment gateway
   • Supports UPI, cards, net banking
   • Order creation and verification
   • Payment status tracking

Payment Flow

1. Order Creation → Create order in database
2. Payment Gateway → Redirect to payment provider
3. Payment Processing → Customer completes payment
4. Verification → Verify payment with gateway
5. Order Update → Update order status and clear cart
6. Confirmation → Send confirmation to customer

📤 File Upload

Cloudinary Integration

• Multiple Images → Up to 4 images per product
• Automatic Optimization → Cloudinary handles image optimization
• Secure URLs → HTTPS image URLs
• CDN Delivery → Fast global image delivery

Upload Process

1. File Selection → Admin selects images
2. Form Data → Images sent as multipart/form-data
3. Multer Processing → Server processes uploaded files
4. Cloudinary Upload → Images uploaded to Cloudinary
5. URL Storage → Image URLs stored in database
6. Product Creation → Product saved with image URLs

🔐 Authentication & Authorization

JWT Implementation

• Token Generation → JWT created on login/register
• Token Storage → Stored in localStorage
• Token Validation → Middleware validates tokens
• Token Refresh → New token on successful requests

User Types

1. Customers

   • Register/login with email/password
   • Access to shopping features
   • Personal cart and order history

2. Admins

   • Special admin credentials
   • Access to admin dashboard
   • Product and order management

Security Features

• Password Hashing → bcrypt for secure password storage
• Input Validation → Server-side validation
• CORS Protection → Cross-origin request handling
• Error Handling → Secure error responses

🎯 State Management

React Context API

The application uses React Context for global state management:

// ShopContext provides:
- products: Array of all products
- cartItems: Current cart state
- token: Authentication token
- search: Search functionality
- currency: Price formatting
- delivery_fee: Shipping cost

State Operations

• Add to Cart → Update cart state and sync with backend
• Update Quantity → Modify cart items
• Remove Items → Remove from cart
• Search Products → Filter products based on search
• Authentication → Manage login state

Data Flow

1. Context Provider → Wraps entire app
2. State Updates → Functions update context state
3. API Calls → Sync state with backend
4. Component Updates → Components re-render on state changes

🚀 Deployment

Backend Deployment (Vercel)

1. Build Configuration

   {
     "version": 2,
     "builds": [
       {
         "src": "server.js",
         "use": "@vercel/node"
       }
     ],
     "routes": [
       {
         "src": "/(.*)",
         "dest": "server.js"
       }
     ]
   }

2. Environment Variables → Set in Vercel dashboard

3. Database → Use MongoDB Atlas

4. Deploy → Connect GitHub repository

Frontend Deployment (Vercel)

1. Build Command → npm run build
2. Output Directory → dist
3. Environment Variables → Set backend URL
4. Deploy → Automatic deployment on push

Admin Deployment (Vercel)

1. Same as Frontend → Separate deployment
2. Environment Variables → Set backend URL
3. Custom Domain → Optional custom domain

🤝 Contributing

Development Guidelines

1. Code Style → Follow ESLint configuration
2. Commit Messages → Use conventional commits
3. Testing → Test all features before pushing
4. Documentation → Update docs for new features

Pull Request Process

1. Fork Repository → Create your fork
2. Create Branch → Feature branch from main
3. Make Changes → Implement your feature
4. Test Thoroughly → Ensure everything works
5. Submit PR → Create pull request with description

Code Structure

• Components → Reusable UI components
• Pages → Route-specific components
• Controllers → Business logic
• Models → Database schemas
• Routes → API endpoints
• Middleware → Request processing

📝 License

This project is licensed under the ISC License.

🙏 Acknowledgments

• React Team → For the amazing React framework
• Tailwind CSS → For the utility-first CSS framework
• MongoDB → For the flexible NoSQL database
• Cloudinary → For image management services
• Stripe & Razorpay → For payment processing

---

🆘 Support

If you encounter any issues or have questions:

1. Check Documentation → Review this README thoroughly
2. Environment Variables → Ensure all required variables are set
3. Database Connection → Verify MongoDB connection
4. Payment Keys → Check payment gateway credentials
5. File Upload → Verify Cloudinary configuration

For additional help, please create an issue in the repository with:

• Detailed error description
• Steps to reproduce
• Environment information
• Screenshots (if applicable)

---

Happy Coding! 🚀