MERN E-Commerce Platform

MERN E-Commerce Platform

A comprehensive full-stack e-commerce solution featuring a modern React customer frontend, a separate admin dashboard, and a robust Node.js backend. This project demonstrates advanced patterns for building scalable, secure, and user-friendly web applications with a containerized deployment architecture.

🔗 Live Demo: mernappshopper.xyz
🔐 Admin Dashboard: admin.mernappshopper.xyz
🎥 Video Presentation: Watch on YouTube
💻 Code Repository: GitHub Repository

System Architecture

The application follows a modern microservices-inspired architecture with Docker containerization, featuring separate containers for the customer frontend, admin dashboard, and backend API server, all orchestrated through an Nginx reverse proxy.

Key Features

  • Dual Frontend Architecture (Customer + Admin)
  • JWT Authentication with email verification and refresh tokens
  • Stripe Payment Integration with webhook support
  • Advanced SEO using React 19's Document Metadata API
  • Docker Deployment with production and development environments
  • Nginx Reverse Proxy with HTTPS via Let's Encrypt
  • Responsive design optimized for all devices
  • Complete E-Commerce Functionality:
    • Product catalog with filtering and search
    • Shopping cart system
    • Secure checkout process
    • Order management and history
    • Admin inventory control

Tech Stack

Frontend (Customer)

  • React 19 with Redux for state management
  • React Router for navigation
  • Stripe Elements for payment integration
  • React 19 Document Metadata for SEO
  • CSS modules for styled components

Admin Dashboard (Subdomain)

  • React with Context API
  • Vite for faster development

Backend

  • Node.js & Express
  • MongoDB with Mongoose ODM
  • JWT authentication with refresh tokens
  • Stripe API for payment processing

DevOps

  • Docker & Docker Compose
  • Nginx as reverse proxy
  • SSL certificates
  • Digital Ocean for cloud deployment

Architecture Highlights

The application is fully containerized using Docker with a microservices-inspired setup:

  • Frontend Container: React customer storefront with Nginx for static file serving
  • Admin Container: React admin dashboard with its own Nginx configuration
  • Backend Container: Node.js API server with MongoDB connection
  • Nginx Proxy Container: Handles routing, SSL termination, and caching
  • Secret Management: Sensitive configuration via Docker volumes
  • Development Environment: Docker setup with hot-reloading for efficient development

Source Code

Back to Projects