E-Commerce Website

A full-stack E-Commerce platform built with React, Node.js, and MongoDB. This project includes a complete online shopping experience with user authentication, product management, shopping cart, order processing, and admin dashboard.

🚀 Features

Core Features

• User Authentication & Authorization

  • JWT-based authentication
  • Email verification
  • Password reset functionality
  • Role-based access control (User/Admin)
  • Social login integration ready

• Product Management

  • Product catalog with categories
  • Advanced search and filtering
  • Product variants and options
  • Image management
  • Inventory tracking
  • SEO-friendly URLs

• Shopping Experience

  • Shopping cart with persistence
  • Guest cart support
  • Wishlist functionality
  • Product reviews and ratings
  • Related products
  • Discount codes

• Order Management

  • Secure checkout process
  • Multiple payment methods (Stripe integration)
  • Order tracking
  • Email notifications
  • Order history
  • Invoice generation

• Admin Dashboard

  • Product CRUD operations
  • Order management
  • User management
  • Sales analytics
  • Review moderation
  • Inventory management

Technical Features

• Frontend

  • React 18 with Vite
  • Redux Toolkit for state management
  • Tailwind CSS for styling
  • Responsive design
  • Progressive Web App ready

• Backend

  • Node.js with Express
  • MongoDB with Mongoose
  • JWT authentication
  • File upload support
  • Email integration
  • Payment processing

• Security

  • JWT token authentication
  • Password hashing with bcrypt
  • Rate limiting
  • CORS protection
  • Input validation
  • XSS protection

🛠️ Tech Stack

Frontend

• Framework: React 18
• Build Tool: Vite
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Routing: React Router DOM
• HTTP Client: Axios
• UI Components: Headless UI, Heroicons
• Notifications: React Hot Toast

Backend

• Runtime: Node.js (v22.14.0)
• Framework: Express.js
• Database: MongoDB
• ODM: Mongoose
• Authentication: JWT
• Email: Nodemailer
• File Upload: Multer
• Payment: Stripe
• Security: Helmet, CORS, Rate Limiting

📁 Project Structure

E-Commerce/
├── frontend/                 # React frontend application
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Redux store and slices
│   │   ├── contexts/       # React contexts
│   │   ├── utils/          # Utility functions
│   │   └── assets/         # Static assets
│   ├── public/             # Public assets
│   └── package.json
├── backend/                 # Node.js backend API
│   ├── models/             # Database models
│   ├── routes/             # API routes
│   ├── middleware/         # Custom middleware
│   ├── controllers/        # Route controllers
│   ├── utils/              # Utility functions
│   ├── config/             # Configuration files
│   └── server.js           # Main server file
└── README.md

🚀 Quick Start

Prerequisites

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

Installation

1. Clone the repository

   git clone <repository-url>
   cd E-Commerce

2. Install dependencies

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

3. Environment Setup

   Backend (.env)

   PORT=5000
   NODE_ENV=development
   MONGODB_URI=mongodb://localhost:27017/ecommerce
   JWT_SECRET=your-super-secret-jwt-key-here
   JWT_EXPIRE=7d
   FRONTEND_URL=http://localhost:5173
   EMAIL_HOST=smtp.gmail.com
   EMAIL_PORT=587
   EMAIL_USER=your-email@gmail.com
   EMAIL_PASS=your-app-password
   STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key

   Frontend (.env)

   VITE_API_URL=http://localhost:5000/api

4. Start the development servers

   Backend

   cd backend
   npm run dev

   Frontend

   cd frontend
   npm run dev

5. Access the application

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:5000

📚 API Documentation

Authentication Endpoints

• POST /api/auth/register - Register new user
• POST /api/auth/login - User login
• POST /api/auth/verify-email - Verify email
• POST /api/auth/forgot-password - Request password reset
• GET /api/auth/me - Get current user

Product Endpoints

• GET /api/products - Get all products
• GET /api/products/:id - Get single product
• GET /api/products/featured - Get featured products
• GET /api/products/search - Search products

Cart Endpoints

• GET /api/cart - Get user cart
• POST /api/cart/add - Add item to cart
• PUT /api/cart/update/:productId - Update cart item
• DELETE /api/cart/remove/:productId - Remove item from cart

Order Endpoints

• POST /api/orders - Create new order
• GET /api/orders - Get user orders
• GET /api/orders/:id - Get single order

For complete API documentation, see the Backend README.

🎨 UI Components

The frontend includes a comprehensive set of reusable components:

• Layout: Navbar, Footer, Sidebar
• Forms: Input, Button, Select, Checkbox
• Cards: ProductCard, OrderCard, ReviewCard
• Modals: ConfirmDialog, ImageModal
• Navigation: Breadcrumbs, Pagination
• Feedback: LoadingSpinner, ErrorBoundary

🔐 Authentication Flow

1. Registration: User registers with email/password
2. Email Verification: Verification email sent automatically
3. Login: JWT token issued upon successful login
4. Protected Routes: Token required for authenticated endpoints
5. Token Refresh: Automatic token validation on app load

🛒 Shopping Flow

1. Browse Products: Users can browse and search products
2. Add to Cart: Products can be added to cart (guest or authenticated)
3. Cart Management: Update quantities, apply discounts
4. Checkout: Secure checkout with address and payment info
5. Order Confirmation: Email confirmation and order tracking

👨‍💼 Admin Features

• Dashboard: Sales analytics and overview
• Product Management: CRUD operations for products
• Order Management: View and update order status
• User Management: Manage user accounts and roles
• Review Moderation: Approve/reject product reviews

🚀 Deployment

Backend Deployment

1. Set up MongoDB (Atlas recommended)
2. Configure environment variables
3. Deploy to Heroku, Vercel, or any Node.js platform

Frontend Deployment

1. Build the application: npm run build
2. Deploy to Vercel, Netlify, or any static hosting platform

Environment Variables

Ensure all required environment variables are set in production:

• Database connection string
• JWT secret
• Email configuration
• Payment API keys
• Frontend URL

🧪 Testing

Backend Testing

cd backend
npm test

Frontend Testing

cd frontend
npm test

📝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

🤝 Support

For support and questions:

• Create an issue in the repository
• Check the documentation
• Review the API endpoints

🔮 Future Enhancements

• Mobile App: React Native version
• Advanced Analytics: Detailed sales and user analytics
• Multi-language Support: Internationalization
• Advanced Search: Elasticsearch integration
• Real-time Features: WebSocket integration
• PWA Features: Offline support, push notifications
• Social Login: Google, Facebook, Apple integration
• Advanced Payment: Multiple payment gateways
• Inventory Management: Advanced stock tracking
• Marketing Tools: Email campaigns, coupons

---

Built with ❤️ using modern web technologies