A fully featured, production-deployed e-commerce platform built with React + Django REST Framework, featuring an AI shopping assistant, real-time chat, OTP-secured product deletion, Razorpay payments, and a Seller Dashboard.
🌐 Live: ecommerce.chatram.in
🔗 API: api.chatram.in
🤖 MCP Server: mcp.chatram.in
| Feature | Description |
|---|---|
| 🛍️ Product Browsing | Category filters, search, sorting, pagination |
| 🛒 Cart & Checkout | Add/remove items, quantity management |
| 💳 Payments | Razorpay (online) + Cash on Delivery |
| 📦 Orders | Order tracking, status updates |
| ❤️ Wishlist | Save products for later |
| 🏪 Seller Dashboard | Create products, manage variants, media, Q&A |
| 🔐 OTP Product Deletion | Email OTP verification before deleting products |
| 🤖 AI Shopping Assistant | Claude-powered floating chat widget on all pages |
| ⭐ Reviews & Media | Image/video reviews with seller Q&A |
| 📱 Responsive Design | Mobile-first, Amazon-style layout |
| 🎠 Banner Carousel | Auto-sliding promotional banners with overlays |
┌─────────────────────────────────────────┐
│ Nginx Reverse Proxy │
│ ecommerce.chatram.in (port 80/443) │
└────────┬────────────────────┬───────────┘
│ │
┌────────▼──────┐ ┌─────────▼────────┐
│ React SPA │ │ Django (Daphne) │
│ Vite Build │ │ api.chatram.in │
│ /var/www/ │ │ port 8000 │
└───────────────┘ └────────┬─────────┘
│
┌───────────────────────┼─────────────────┐
│ │ │
┌────────▼──────┐ ┌───────────▼──────┐ ┌──────▼──────┐
│ PostgreSQL │ │ Redis (db=1,2) │ │ AWS S3 │
│ (AWS RDS) │ │ Celery + Cache │ │ (Images) │
└───────────────┘ └──────────────────┘ └─────────────┘
Tech Stack: React 19 · Vite 8 · React Router DOM · Axios · TailwindCSS
| Route | Page | Auth |
|---|---|---|
/ |
Home — product grid + banner carousel | Public |
/product/:id |
Product detail, media gallery, reviews | Public |
/cart |
Cart management | Buyer |
/checkout |
Address + payment selection | Buyer |
/orders |
Order history & tracking | Buyer |
/order-confirmation |
Post-payment confirmation | Buyer |
/wishlist |
Saved products | Buyer |
/seller |
Seller dashboard | Seller |
/login |
JWT authentication | Guest |
/register |
User registration | Guest |
AIChatWidget— Floating Claude AI assistant available on every page with SSE streaming, product cards in responses, and order actionsBannerCarousel— Auto-sliding hero banner with text overlays, responsive aspect ratiosHeader— Sticky navbar with responsive 2-row mobile layout, slide-out categories sidebar, cart count badgeSellerDashboard— Full seller control panel: create products with variants, manage S3 media, answer Q&A, OTP-secured deletion
cd eccommerc-react
npm install
npm run dev # http://localhost:5173npm run build # Production build → dist/Create .env in the frontend root:
VITE_API_BASE=https://api.chatram.inTech Stack: Django 5 · Django REST Framework · Daphne (ASGI) · Celery · PostgreSQL · Redis · AWS S3 · Razorpay
| App | Responsibility |
|---|---|
api |
Custom user model, JWT cookie auth |
user |
Products, cart, orders, wishlist, reviews, payments |
inventory |
Stock management |
marketing |
Banners, promotions |
chat |
Django Channels WebSocket (real-time) |
POST /api/login/
POST /api/register/
POST /api/logout/
GET /api/csrf-token/
GET /user/products/ # list with filters
POST /user/product/create/ # seller: create product
GET /user/product/detail/<id> # product detail
GET /user/product/search/ # search
GET /user/product/categories/ # all categories
GET /user/product/image/ # product images
POST /user/product/request-delete-otp/<product_id>/<variant_id>/
POST /user/product/confirm-delete/<product_id>/<variant_id>/
body: { "otp": "123456" }
GET/POST/DELETE /user/cart/
GET/POST /user/order/
PATCH /user/order-item/<id>/status/
GET /user/whishlist/
POST /user/payments/create/ # Razorpay order
POST /user/payments/verify/ # Razorpay signature verify
POST /user/payments/cod/ # Cash on Delivery
POST /user/payments/cod/<order_id>/confirm/
GET/POST/DELETE /user/product/detail/review/
POST/DELETE /user/review/media/
GET/POST /user/product/customer-qxn/
PATCH /user/product/seller-ans/<id>
GET /user/seller/orders/
GET /user/brand/
POST /user/brand/
POST /user/ai/ # proxies to Anthropic Claude via MCP
All background tasks are in user/tasks.py:
| Task | Trigger | Action |
|---|---|---|
send_otp_email |
Product delete request | Emails OTP to seller |
delete_product |
Product confirmed deleted | Cleans up S3 folder |
delete_s3_file |
Single media removed | Deletes S3 object |
delete_s3_files |
Bulk media removal | Batch deletes S3 objects |
notify_product_creator |
Product created | Sends AWS SNS notification |
cd ecommerce
# Create virtual environment
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
# Run migrations
python manage.py migrate
# Start ASGI server
daphne -b 0.0.0.0 -p 8000 ecommerce.asgi:application
# In another terminal — start Celery worker
celery -A ecommerce worker --loglevel=infoThe backend reads all secrets from AWS SSM Parameter Store:
/Ecommerce/db_name
/Ecommerce/db_passowrd
/Ecommerce/db_DNS
/Ecommerce/aws_access_key
/Ecommerce/aws_secret_access_key
/Ecommerce/aws_s3_region_name
/Ecommerce/s3_bucket_name
/Ecommerce/sns_arn
/Ecommerce/email_address
/Ecommerce/email_password # Must be a Gmail App Password
/Ecommerce/aws_anthropic_ai_api_key
/Ecommerce/aws_razorpay_id
/Ecommerce/aws_razorpay_key_secret
services:
nginx: # Reverse proxy, SSL termination (Let's Encrypt)
redis: # Broker for Celery + Cache for OTPs (db=1,2)
drf_app: # Django ASGI server (Daphne)
celery_worker: # Background task runner (REQUIRED for email + S3 cleanup)
mcp: # MCP server for AI tool calls# Build and push new image
docker build -t jagadeesh20134/drf-gunicorn:latest .
docker push jagadeesh20134/drf-gunicorn:latest
# On EC2 — pull latest and restart
docker compose pull drf_app
docker compose up -dnpm run build
# Copy dist/ to EC2
scp -r dist/* ubuntu@<ec2-ip>:/var/www/ecommerce/- JWT (HttpOnly cookies) — access token (45 min) + refresh token (15 days)
- Custom
CookieJWTAuthenticationclass reads tokens from cookies instead of headers - CSRF protection enabled for all state-changing endpoints
- Role-based access:
BuyerandSellerwith separate route guards in React
| Decision | Reason |
|---|---|
| ASGI / Daphne instead of WSGI | Required for Django Channels WebSocket support |
| Celery + Redis (not threading) | Safe async S3 cleanup and email without blocking HTTP requests |
| SSM Parameter Store | No secrets in Docker images or environment files |
LocMemCache → django-redis |
OTPs are shared across all Gunicorn workers correctly |
| Lazy-loaded React pages | Splits 500KB JS bundle into per-page chunks for faster initial load |
Banner images in public/ |
Prevents Vite from bundling 5MB+ of images into the JS bundle |
eccommerc-react/ # Frontend
├── src/
│ ├── api/client.js # Axios instance with CSRF + cookie config
│ ├── context/ # AuthContext, CartContext
│ ├── components/ # Header, Footer, BannerCarousel, AIChatWidget
│ ├── pages/ # All route-level pages
│ └── utils/ # CSRF helper
├── public/banners/ # Carousel images (served directly, not bundled)
└── dist/ # Production build
ecommerce/ # Backend (Django)
├── ecommerce/ # Settings, URLs, Celery config, ASGI
├── user/ # Main app: views, models, serializers, tasks
├── api/ # Custom user model & auth
├── inventory/ # Stock management
├── marketing/ # Promotions
├── chat/ # WebSocket (Django Channels)
└── Dockerfile
Built by Jagadeesh Sagar
🌐 ecommerce.chatram.in