NOIR'EL - Luxury E-Commerce Platform

NOIRÉL: Production-Grade Headless Full-Stack E-Commerce Platform

NOIRÉL is a production-grade headless e-commerce system engineered with React 19 and Django REST Framework, designed to replicate real-world cloud commerce architecture.

The platform separates the presentation layer, application logic, and infrastructure to enable scalable deployment, secure payment processing, and high-performance product browsing.

Unlike typical portfolio CRUD applications, this system focuses on transactional integrity, system design, and production deployment practices.

1. Project Goals

The primary objective of NOIRÉL was to design a realistic commerce platform architecture that reflects production systems used in modern web infrastructure.

Key engineering goals:

• Decouple frontend and backend services • Ensure transactional safety for order processing • Build scalable API architecture • Implement secure authentication and payment flows • Deploy a cloud-ready infrastructure • Optimize frontend rendering performance

2. System Architecture

NOIRÉL follows a headless architecture, where the frontend and backend operate as independent services communicating through REST APIs.

Client (React - Vercel CDN) │ ▼ HTTPS Request │ ▼ Nginx Reverse Proxy (AWS EC2) │ ▼ Gunicorn WSGI Server │ ▼ Django REST API │ ▼ PostgreSQL Database │ └── AWS S3 (Media Storage) Architectural Principles

Separation of concerns Frontend handles UI/UX while backend manages business logic.

Stateless API design JWT authentication allows horizontal scaling.

Infrastructure layering Nginx handles HTTPS termination and request routing.

Externalized storage Media files are stored in AWS S3 to prevent application server overload.

3. Technology Stack Frontend

Framework: React 19 Build Tool: Vite 6 Styling: Tailwind CSS 4 Routing: React Router 7 State Management: Context API + useReducer HTTP Client: Axios Animations: Framer Motion Charts: Recharts Icons: Lucide React PWA Support: vite-plugin-pwa

Frontend Engineering Decisions

Component Isolation

Prevent unnecessary re-renders by isolating expensive components.

Route-Based Code Splitting

Pages are lazy loaded using React.lazy to reduce initial bundle size.

const ProductPage = React.lazy(() => import("./ProductPage"))

Memoized Context Values

Avoids cascading re-renders across the component tree.

WebP Image Optimization

Product images are converted to WebP to reduce network payload size.

Backend

Framework: Django 5 API Framework: Django REST Framework Authentication: Simple JWT Database: PostgreSQL Image Processing: Pillow Payment Gateway: Razorpay API Documentation: drf-spectacular

Backend Responsibilities

• API request validation • Order lifecycle management • Payment verification • Authentication & authorization • Database transaction safety

4. Core System Modules Authentication Module

Implements JWT-based stateless authentication.

Flow:

User Login ↓ Access + Refresh Tokens Generated ↓ Access Token Sent With API Requests ↓ Axios Interceptor Handles Token Injection

Security measures:

• Password hashing using Django PBKDF2 • Rate limiting on authentication endpoints • Strict CORS policy • Token validation middleware

Product Catalog

Provides product discovery and filtering features.

Features:

• Category-based filtering • Search functionality • Best Sellers / New Arrivals logic • Stock tracking • Image storage in S3

Database optimization:

• Indexed columns for high-frequency queries • Foreign key indexing • Efficient query filtering

Cart System

Cart data is persisted server-side.

Flow:

User adds item ↓ API validates stock ↓ Item saved in cart table ↓ UI state updated

Features:

• Quantity updates • Persistent cart across sessions • Stock validation

Order & Checkout System

The order pipeline enforces transactional consistency.

with transaction.atomic(): validate_stock() create_order() reduce_inventory()

This prevents:

• race conditions • inconsistent inventory • partial order creation

Payment Integration

Gateway: Razorpay

Payment Flow:

Order created on server ↓ Razorpay payment order generated ↓ Client completes payment ↓ Server verifies signature ↓ Order marked as paid

Security measures:

• server-side signature verification • payment amount validation

5. Database Design Core Entities

Users Products Cart Orders OrderItems

Key Design Decisions

Snapshot Pricing

OrderItems store the product price at purchase time.

Prevents historical price changes from affecting past orders.

Relational Integrity

Foreign keys enforce relationships between:

• users • orders • products

6. Performance Engineering

Performance optimization was treated as a core design constraint.

Frontend Optimizations Code Splitting

Vite manual chunking:

• vendor • UI libraries • charts

Improves browser caching efficiency.

Memoization Strategy

• Memoized context values • Isolated modal components • Optimized sorting operations

Image Optimization

Converted product images to WebP.

Result:

Significant reduction in page payload size.

Backend Optimizations Database Indexing

Indexed fields:

• created_at • foreign keys • is_active flags

Reduces query scan time for common queries.

Atomic Transactions

Ensures safe order creation during concurrent checkout attempts.

Rate Limiting

Applied throttling to sensitive endpoints.

7. DevOps & Deployment Infrastructure Stack

Frontend: Vercel Edge CDN Backend: AWS EC2 (Ubuntu) Reverse Proxy: Nginx Application Server: Gunicorn Database: PostgreSQL Media Storage: AWS S3 CI/CD: GitHub Actions

Backend Deployment Flow Push to GitHub ↓ GitHub Actions triggered ↓ SSH into EC2 instance ↓ Pull latest code ↓ Install dependencies ↓ Apply migrations ↓ Restart Gunicorn 8. Security Implementation

Security considerations include:

• JWT authentication • Server-side payment verification • Strict CORS configuration • Environment-based secrets • Secure password hashing • HTTPS via Nginx • Database not publicly exposed

9. Scalability Strategy

The current architecture supports horizontal scaling.

Existing design features:

• Stateless authentication • Media offloading to S3 • Indexed database queries • Reverse proxy architecture

Future scaling options:

• Redis caching layer • Celery background workers • Load balancing across multiple EC2 instances • Containerization via Docker

10. CI/CD Pipeline

Automated deployment pipeline using GitHub Actions.

Steps:

• Code pull • Dependency installation • Database migration • Gunicorn restart

This reduces manual deployment errors and ensures consistent releases.

11. Engineering Principles Applied

NOIRÉL was designed using the following engineering principles:

• Separation of concerns • API-first design • Transactional safety • Query optimization • Component isolation • Cloud-native deployment

12. Key Engineering Takeaways

Building NOIRÉL reinforced several system design insights:

Transactional integrity is critical in commerce systems

Headless architecture enables flexible scaling

Infrastructure decisions affect application performance

Database design heavily influences system efficiency

Security must be integrated throughout the architecture

13. Live Deployment

Frontend https://noirel-perfume.vercel.app

Backend API https://noirel.duckdns.org/api/

API Documentation https://noirel.duckdns.org/api/schema/swagger-ui/

14. Summary

NOIRÉL demonstrates practical experience with:

• full-stack system architecture • cloud deployment • payment processing workflows • performance optimization • secure API design

The project represents a transition from feature-based development to system-level engineering.