The Challenge
A traditional fashion wholesale business needed to transition from manual order processing to a modern e-commerce platform. Key challenges included serving both B2B and B2C customers with different pricing, handling high-resolution fashion images (10-15MB each), real-time inventory sync, and mobile-first design for 70%+ mobile traffic.
The Solution
Developed a comprehensive platform with role-based pricing engine (automatic B2B/B2C switching based on user verification), async image pipeline (Celery workers process uploads in background, optimizing from 12MB → 2MB), WebSocket real-time updates (instant UI updates when images finish processing), and infinite scroll with server-side sorting for smooth browsing.
System Design
Key Results
Key Features
Dual Pricing Engine (B2B/B2C)
Role-based pricing with automatic switching. User model stores role (admin/b2b/b2c) and verification status. Products have price_b2b, price_b2c, and mrp fields.
Async Image Processing Pipeline
Fire-and-forget upload with Celery background processing. Forms close instantly while workers optimize images to 1.8-2.5MB and notify via WebSocket when complete.
Infinite Scroll with Server-Side Sorting
useInfiniteQuery with IntersectionObserver. Backend handles sorting (new, price_asc, price_desc, popular) to prevent item jumping during pagination.
Product Variant Management
UPSERT pattern with unique constraint on (product_id, color_id, size_id). SKU format: DRS-{product_id}-{random}-{COLOR}-{SIZE}.
Real-Time WebSocket Updates
Redis PubSub + WebSocket for real-time notifications. After background image processing, UI updates instantly without page refresh.
Admin Dashboard
Product CRUD with variant management, order management with status workflow, upload failures monitoring (DLQ), virtualized tables with react-window.
Tech Stack
System Flowcharts
Before vs After: Order Processing
Transformation from manual WhatsApp-based order processing to automated e-commerce platform
Dual Pricing Engine Flow
Role-based pricing with automatic B2B/B2C switching based on user verification
Async Image Processing Pipeline
Fire-and-forget upload with Celery background processing and WebSocket notifications
Infinite Scroll with Server-Side Sorting
useInfiniteQuery with IntersectionObserver for smooth pagination
Product Variant Data Model
UPSERT pattern with unique constraint on (product_id, color_id, size_id)
Real-Time WebSocket Updates
Redis PubSub + WebSocket for instant UI updates after background processing
Deployment Architecture
Screenshots Gallery
Key Learnings
ImageKit SDK doesn't support upload-time transformations → Use REST API directly
Celery concurrency=2 means 2 workers (not 2 tasks/worker). Memory is per-worker.
Redis PubSub subscriptions made during app startup are lost when listener starts. Subscribe inside the listener task.
FastAPI Form Data always receives strings, even for boolean parameters. Manual type conversion required.
Create WebSocket connection manager outside React tree to prevent multiple connections.