ClickMart is a production-ready, full-stack e-commerce web application built with a modern decoupled architecture. It pairs a Django REST Framework backend with a React 19 single-page frontend, designed to demonstrate end-to-end development—from local coding to a live, SSL-secured production deployment on a Linux VPS.
ClickMart is a complete online shopping platform that enables users to browse products, manage a shopping cart, place orders, and track their purchase history through a responsive dashboard. The backend exposes a secure REST API consumed by a fast, reactive frontend, while an integrated admin interface allows store management. The entire stack is containerized with Docker, orchestrated via Docker Compose, and deployed automatically through a GitHub Actions CI/CD pipeline.
| Layer | Technology | Purpose |
|---|---|---|
| Backend | Django 5.2+ | Core web framework and ORM |
| API | Django REST Framework 3.16+ | RESTful API serialization & viewsets |
| Authentication | djangorestframework-simplejwt | Stateless JWT token authentication |
| Database | PostgreSQL (via psycopg2-binary) |
Production relational data store |
| Media | Pillow | Product image upload & processing |
| CORS | django-cors-headers | Secure cross-origin frontend communication |
| Frontend | React 19 | Component-based UI library |
| Build Tool | Vite 7+ | Fast development bundler & production builds |
| Styling | Bootstrap 5 + Bootstrap Icons | Responsive grid & UI components |
| Routing | React Router 7+ | Client-side SPA navigation |
| HTTP Client | Axios | API communication with JWT interceptors |
| Notifications | React Toastify | User feedback toasts |
| Icons | Lucide React | Modern iconography |
| WSGI Server | Gunicorn | Production-grade Python app server |
| Reverse Proxy | Nginx | Static/media serving, SSL termination, routing |
| Containerization | Docker + Docker Compose | Environment parity & easy deployment |
| CI/CD | GitHub Actions | Automated pull & rebuild on every push |
| Hosting | Linode VPS | Cloud Linux server infrastructure |
| SSL | Let’s Encrypt / Certbot | Free HTTPS certificate provisioning |
The project follows a decoupled client-server architecture:
-
Backend (
backend-drf/): A modular Django monolith split into focused apps:users— Custom user model, registration, JWT login/logout, profile management.products— Product catalog with categories, pricing, tax calculations, and image uploads.carts— Session-persistent or user-linked cart and cart-item logic.orders— Checkout flow, order creation, status tracking, and address capture.api— Central API router versioning all endpoints under/api/v1/.clickmart_main— Project-level settings, WSGI/ASGI entry points, and URL configuration.
-
Frontend (
frontend/src/): A React SPA organized by responsibility:pages/— Route-level views (Home, Products, Product Details, Cart, Checkout, Login, Register, Dashboard, Orders, Profile).components/— Reusable UI elements (Navbar, Footer, Sidebar, Quantity Selector, Order Detail).hooks/— Custom logic encapsulation (useAuth,useAxios).context/&Provider/— Global state management for authentication and shopping cart.api/— Centralized Axios instance with base URL and interceptor configuration.
- Product Catalog — Browse products with images, descriptions, pricing, and tax calculations.
- User Authentication — Secure registration and login using JWT access/refresh tokens.
- Shopping Cart — Add, update quantities, and remove items before checkout.
- Order Management — Full checkout flow with address collection and order status tracking.
- User Dashboard — Private routes for profile settings, order history, and order detail views.
- Admin Panel — Django’s built-in admin for managing products, users, orders, and media.
- Responsive UI — Mobile-first Bootstrap 5 design with React Toastify notifications.
- Media Handling — Product images uploaded via Django, served through Nginx in production.
ClickMart is designed to be deployed using a modern DevOps workflow:
- Dockerized Environments — Both backend and frontend run in isolated containers with a shared PostgreSQL database volume.
- Nginx Reverse Proxy — Routes
/api/and/admin/to Gunicorn/Django and all other traffic to the React frontend; serves static and media files directly. - Production Hardening — Gunicorn worker processes, environment-based
ALLOWED_HOSTS, and server-managed Nginx configs. - CI/CD Automation — GitHub Actions connects to the Linode VPS via SSH; on every push to
main, the server pulls the latest code, rebuilds containers, and restarts services. - SSL/TLS — Let’s Encrypt certificates are provisioned via Certbot, with Nginx configured to redirect HTTP to HTTPS automatically.
- Custom Domain Ready — DNS A records point to the VPS, and the stack supports custom domain names with full SSL coverage.
django_clickmart/
├── backend-drf/ # Django REST API
│ ├── clickmart_main/ # Project settings & config
│ ├── api/ # Root API routes
│ ├── users/ # Auth & profiles
│ ├── products/ # Catalog & images
│ ├── carts/ # Shopping cart logic
│ ├── orders/ # Checkout & order history
│ ├── static/ # Collected admin & DRF assets
│ └── requirements.txt # Python dependencies
├── frontend/ # React SPA
│ ├── src/
│ │ ├── api/ # Axios client
│ │ ├── components/ # Reusable UI
│ │ ├── context/ # React contexts
│ │ ├── hooks/ # Custom hooks
│ │ ├── pages/ # Route views
│ │ ├── Provider/ # Context providers
│ │ └── data/ # Static seed data
│ ├── index.html
│ ├── vite.config.js
│ └── package.json
├── nginx/ # Nginx reverse proxy config
├── docker-compose.yml # Multi-service orchestration
└── README.md # Deployment guide
ClickMart serves as both a functional e-commerce prototype and a learning reference for developers looking to implement a complete Django + React stack with real-world deployment practices. It covers authentication, CRUD operations, relational data modeling, image handling, containerization, CI/CD, and production server configuration on a budget-friendly cloud VPS.