Complete E-Commerce Application

A modern, responsive, full-stack e-commerce platform built with React.js, Node.js/Express, and MongoDB.

Project Overview

This is a production-ready e-commerce application featuring:

Frontend (React)

• Modern responsive UI with Tailwind CSS
• Redux state management
• User authentication and authorization
• Product browsing with filtering and search
• Shopping cart management
• Checkout with multiple payment options
• Order tracking
• Admin dashboard
• Mobile-first responsive design

Backend (Node.js/Express)

• RESTful API architecture
• JWT authentication
• MongoDB integration with Mongoose
• Role-based access control (User/Admin)
• Product and inventory management
• Cart and order management
• Payment processing (Stripe/Razorpay)
• Input validation and error handling
• Security best practices

Database (MongoDB)

• User management
• Product catalog
• Order tracking
• Cart management
• Payment records
• Wishlist

Directory Structure

Ecommerce/
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json
│   ├── vite.config.js
│   ├── tailwind.config.js
│   └── README.md
├── backend/
│   ├── src/
│   ├── uploads/
│   ├── package.json
│   ├── .env.example
│   └── README.md
└── README.md (this file)

Quick Start

Prerequisites

• Node.js v14+
• MongoDB
• npm or yarn

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Create .env file from .env.example:

cp .env.example .env

4. Update .env with your configuration:

MONGODB_URI=mongodb://localhost:27017/ecommerce
JWT_SECRET=your_secret_key
STRIPE_SECRET_KEY=your_stripe_key
RAZORPAY_KEY_ID=your_razorpay_key

5. Start the server:

npm run dev

Backend will run on http://localhost:5000

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Frontend will run on http://localhost:3000

Features

User Features

• ✅ User Registration & Login
• ✅ JWT Authentication
• ✅ Profile Management
• ✅ Password Change
• ✅ Browse Products
• ✅ Product Search & Filtering
• ✅ Add to Cart
• ✅ Checkout
• ✅ Order Tracking
• ✅ Wishlist
• ✅ Product Reviews & Ratings

Admin Features

• ✅ Dashboard Analytics
• ✅ Product Management (CRUD)
• ✅ Category Management
• ✅ Order Management
• ✅ User Management
• ✅ Sales Analytics
• ✅ Revenue Reports

Payment Options

• ✅ Cash on Delivery
• ✅ Stripe Integration
• ✅ Razorpay Integration

Technical Features

• ✅ Responsive Design (Mobile, Tablet, Desktop)
• ✅ Real-time Notifications
• ✅ Error Handling
• ✅ Input Validation
• ✅ Security (JWT, CORS, Password Hashing)
• ✅ Database Indexing
• ✅ Pagination
• ✅ Sorting & Filtering
• ✅ SEO-friendly URLs

API Documentation

Authentication Endpoints

POST   /api/auth/register          - Register new user
POST   /api/auth/login             - Login user
POST   /api/auth/logout            - Logout user
POST   /api/auth/refresh-token     - Refresh token
GET    /api/auth/profile           - Get user profile
PUT    /api/auth/profile           - Update profile
POST   /api/auth/change-password   - Change password

Product Endpoints

GET    /api/products               - Get all products
GET    /api/products/:id           - Get product details
GET    /api/products/featured      - Get featured products
GET    /api/products/new-arrivals  - Get new arrivals
GET    /api/products/search        - Search products
GET    /api/products/:id/related   - Get related products
POST   /api/products/:id/reviews   - Add review
POST   /api/products               - Create product (Admin)
PUT    /api/products/:id           - Update product (Admin)
DELETE /api/products/:id           - Delete product (Admin)

Cart Endpoints

GET    /api/cart                   - Get cart
POST   /api/cart/add               - Add to cart
PUT    /api/cart/:productId        - Update quantity
DELETE /api/cart/:productId        - Remove item
DELETE /api/cart                   - Clear cart

Order Endpoints

POST   /api/orders                 - Create order
GET    /api/orders/my-orders       - Get user orders
GET    /api/orders/:id             - Get order details
POST   /api/orders/:id/cancel      - Cancel order
GET    /api/orders/all-orders      - Get all orders (Admin)
PUT    /api/orders/:id/status      - Update status (Admin)

Technology Stack

Frontend

• React 18
• Redux Toolkit
• React Router DOM
• Tailwind CSS
• Axios
• React Icons
• React Toastify
• Chart.js
• Vite

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose ODM
• JWT
• bcryptjs
• Multer
• Nodemailer
• Stripe
• Razorpay

Database

• MongoDB

Environment Variables

Backend (.env)

PORT=5000
NODE_ENV=development
MONGODB_URI=mongodb://localhost:27017/ecommerce
JWT_SECRET=your_secret_key
JWT_EXPIRE=7d
FRONTEND_URL=http://localhost:3000
STRIPE_SECRET_KEY=your_key
RAZORPAY_KEY_ID=your_key
EMAIL_USER=your_email
EMAIL_PASSWORD=your_password

Frontend (.env.local)

VITE_API_URL=http://localhost:5000/api

Project Setup Guide

Step 1: Clone the Repository

git clone <repository-url>
cd Ecommerce

Step 2: Setup MongoDB

• Install MongoDB locally OR
• Create account on MongoDB Atlas and get connection string

Step 3: Backend Configuration

• Copy .env.example to .env
• Update MongoDB connection string
• Add Stripe and Razorpay keys
• Run: npm install && npm run dev

Step 4: Frontend Configuration

• Run: npm install && npm run dev
• Application opens at http://localhost:3000

Step 5: Test the Application

• Register a new user
• Browse products
• Add items to cart
• Complete checkout
• Access admin panel (use admin account)

Code Quality

• ESLint configured for code consistency
• Input validation on all endpoints
• Error handling with custom error middleware
• Security headers configured
• CORS properly configured
• Rate limiting recommended

Deployment

Frontend (Vercel)

1. Push code to GitHub
2. Connect GitHub to Vercel
3. Configure environment variables
4. Deploy

Backend (Render/AWS)

1. Push code to GitHub
2. Connect to Render/deploy to AWS
3. Configure environment variables
4. Configure MongoDB connection
5. Deploy

Security Considerations

• ✅ HTTPS in production
• ✅ JWT for authentication
• ✅ Password hashing with bcryptjs
• ✅ CORS configured
• ✅ Input validation
• ✅ Error messages don't leak sensitive info
• ✅ Secure password storage
• ✅ Protected admin routes

Performance Optimization

• Database indexing
• Pagination for large datasets
• Image optimization
• Lazy loading components
• Redux for state management
• Efficient API calls

Testing

Run tests:

npm test

Contributing

1. Fork the repository
2. Create feature branch
3. Commit changes
4. Push to branch
5. Open pull request

Support & Documentation

• See /backend/README.md for backend documentation
• See /frontend/README.md for frontend documentation
• API documentation in route files

License

MIT License - feel free to use this project

Future Enhancements

• Email notifications
• SMS notifications
• Advanced analytics
• Recommendation engine
• Inventory management
• Return management
• Customer support chat
• Multiple languages support
• Dark mode
• PWA support

Support

For questions or issues, please refer to the documentation in backend and frontend README files.