Sun Tailors Web

A production-ready web application and administrative command center for Sun Tailors, a luxury men's bespoke tailoring atelier based in Lahore, Pakistan.

Table of Contents

• Overview
• Tech Stack
• Features
  • Public Atelier Experience
  • Bio-Metric AI Scanner (v12)
  • SunAdmin Administrative Command Center
• Project Structure
• API Architecture & Endpoints
• Getting Started
  • Prerequisites
  • Installation & Database Setup
  • Local SSL & Camera Testing
• AI Measurement Engine Details
• Deployment
• Security & Privacy

Overview

Sun Tailors combines decades of traditional Lahore master craftsmanship with cutting-edge 3D AI body scanning technology. Clients can browse luxury garment collections, schedule AI fittings, derive precision 3D anatomical measurements, track bespoke order progress, and export high-fidelity PDF measurement reports.

Tech Stack

• Core Framework: Next.js 16 (App Router, Turbopack, React 19)
• Database & ORM: SQLite (dev.db) with Prisma v6 ORM & Seeding Hooks
• Styling: Vanilla CSS Design Tokens, Tailwind CSS, Motion.dev (Animations)
• AI / Computer Vision: MediaPipe Pose WASM for 3D body landmark detection & silhouette contour reconstruction
• Image Processing: Sharp (for server-side image compression & format optimization)
• PDF Generation: HTML2Canvas & jsPDF (SSR hydration-safe client rendering)
• Authentication: JWT authentication with Jose, HTTP-only cookie distribution, and Edge Middleware route guards
• Iconography: Lucide React Icons

Features

1. Public Atelier Experience

• Bespoke Aesthetics: Dark luxury palette (#0A0A0A, #111111, #D4AF37 gold accents) with Playfair Display serif typography and fluid motion animations.
• Product Catalog & Filtering: Interactive showcase for Shalwar Kameez, Sherwanis, Suits, Waistcoats, and Tuxedos with category, occasion, and keyword search filters.
• Clientele Portal: Personal /account dashboard tracking saved biometric scan sessions, transaction history, and domicile details.
• Interactive Google Maps Integration: Embedded studio location maps targeting Lahore place ID with direct navigation buttons.

2. Bio-Metric AI Scanner (v12)

• Dual-Axis Capture: Front and 90° side profile optical scanning with stability locks.
• 2 cm Silhouette Slice Integration: Slices body contours every 2 cm to derive perimeters via Ramanujan ellipse equations.
• Clothing-Fit Compensation: Post-scan fit selection (Skin-tight → Baggy) adjusting raw silhouette measurements for garment bulk.
• 3D Wireframe Mesh: Live interactive 3D body twin morphed from real-time scan metrics.
• Print-Ready PDF Reports: Instant client export of A4 biometric geometry reports (with or without raw scan images).

3. SunAdmin Administrative Command Center

• Product Catalog CRUD: Complete management to create, edit (PATCH), and delete (DELETE) inventory items with local file uploads (/public/uploads/) or image URLs.
• Biometric Archive: Interactive action menu per scan record (View Details, Order Fabrication, Download PDF Report, and Delete Record).
• Order Fulfillment Queue: Real-time status updates (PENDING, CONFIRMED, COMPLETED, CANCELLED) with notes and client profile links.
• Customer Feedback Moderation: Live stream of customer reviews with 5-star ratings and moderation controls.
• Persistent Platform Settings: Configure and persist AI measurement ratios, anomaly detection, confidence thresholds, and PII masking to prisma/system_config.json.
• Responsive Admin UI: Mobile navigation drawer, active URL path highlighting, high-contrast system metrics, and toast notification feedback.

Project Structure

sun-tailors-web/
├── prisma/
│   ├── schema.prisma             # Database models (User, Product, Order, Measurement, Review, ScanSession)
│   ├── seed.ts                   # Master admin & default sample products
│   └── system_config.json        # Persistent platform settings store
├── public/
│   ├── uploads/                  # Uploaded product images
│   └── mediapipe/pose/           # MediaPipe WASM binaries
├── src/
│   ├── app/
│   │   ├── (auth)/               # Login / Register routes
│   │   ├── account/              # User Biometric Dashboard & History
│   │   ├── admin/                # SunAdmin Command Center
│   │   │   ├── measurements/     # Biometric Archive
│   │   │   ├── orders/           # Order Fulfillment Queue
│   │   │   ├── products/         # Product Inventory CRUD
│   │   │   ├── reviews/          # Customer Feedback Moderation
│   │   │   ├── settings/         # Platform Configuration
│   │   │   └── users/            # Clientele Directory & Details
│   │   ├── api/                  # Backend REST API Routes
│   │   ├── measurement/          # AI Scanning workflow
│   │   ├── measurements/[id]/    # High-fidelity Scan Data Report & PDF Page
│   │   └── products/             # Public Garment Store
│   ├── components/
│   │   ├── admin/                # AdminToast, AdminModal, AdminSidebarNav, DashboardStatCards
│   │   ├── camera/               # SmartScanner, ScanValidationView, BodyMesh3D
│   │   ├── ui/                   # TailoringAccents, MotionComponents, ThemeToggle
│   │   ├── Header.tsx            # Global Navigation Header
│   │   ├── Footer.tsx            # Global Atelier Footer
│   │   └── PDFReportGenerator.tsx # A4 PDF Report Exporter
│   ├── core/                     # V12 AI Silhouette Engine & Pose Processors
│   └── lib/                      # Prisma Client, JWT Auth, Image Processors, Measurement Math
└── middleware.ts                 # Edge Route Guards & Security Checks

API Architecture & Endpoints

| Endpoint | Method | Role | Description | | :--- | :--- | :--- | :--- | | /api/auth/login | POST | Public | User authentication & JWT cookie issuance | | /api/auth/register | POST | Public | Client account creation | | /api/auth/me | GET | Authenticated | Retrieve current user profile | | /api/products | GET / POST | Public / Admin | List products or create a new inventory item | | /api/admin/products/[id] | PATCH / DELETE | Admin | Update product fields or delete from catalog | | /api/upload | POST | Admin | Upload product image to /public/uploads/ | | /api/orders | GET / POST | Authenticated | Fetch active order queue or place a new order | | /api/admin/orders/[id] | PATCH / DELETE | Admin | Update order status or delete order record | | /api/admin/measurements | GET | Admin | Fetch all clientele biometric scan records | | /api/admin/measurements/[id] | DELETE | Admin | Delete a biometric scan record | | /api/reviews | GET / POST | Public / Auth | List customer reviews or submit new feedback | | /api/admin/reviews/[id] | DELETE | Admin | Moderate / remove a customer review | | /api/admin/settings | GET / POST | Admin | Retrieve or persist system config settings |

Getting Started

Prerequisites

• Node.js: v18.0.0 or higher
• Package Manager: npm (v9+)

Installation & Database Setup

1. Clone & Install Dependencies:

   git clone https://github.com/RasikhAli/Sun-Tailors-Web.git
   cd Sun-Tailors-Web
   npm install
   

2. Environment Configuration: Create a .env file in the root directory:

   DATABASE_URL="file:./dev.db"
   JWT_SECRET="sun_tailors_bespoke_atelier_jwt_secret_key_2026"
   

3. Initialize SQLite Database & Seed Default Master Accounts:

   npx prisma db push
   npx prisma db seed
   

   Default Admin Credentials:

   • Email: admin@suntailors.com
   • Password: 123456

Local SSL & Camera Testing

Webcam access (navigator.mediaDevices.getUserMedia) requires a secure context (HTTPS or localhost). To test the 3D AI Bio-Sensor with a laptop camera:

1. Launch HTTPS Dev Server (PowerShell):

   $env:DATABASE_URL="file:./dev.db"; npx next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem
   

   (For Bash/macOS: DATABASE_URL="file:./dev.db" npx next dev ...)

2. Access App: Navigate to https://localhost:3000. Accept the self-signed certificate warning in your browser.

3. Run AI Fitting: Sign in as admin@suntailors.com, click Book Measurement, allow camera access, and perform a dual-pose scan.

AI Measurement Engine Details

The production-grade V12 AI Silhouette-Reconstruction Engine processes orthogonal optical captures:

1. Camera Calibration: Maps raw keypoints to resolution-independent canonical unit coordinates ($Y=0$ at crown, $Y=1$ at ankle).
2. Temporal Kalman Filtering: Gathers landmarks over 120 frames using 1D Kalman filters and Median Absolute Deviation (MAD) outlier rejection.
3. 2 cm Contour Slicing: Extracts body cross-sections every 2 cm with subpixel edge interpolation.
4. Perimeter Derive: Classifies shape geometry per slice (ellipse, superellipse, pear) and computes perimeters via Ramanujan equations.
5. Clothing Bulk Offset: Adjusts measurements based on user-selected fit (Skin-tight, Fitted, Regular, Loose, Baggy) during post-scan review.

Deployment

Production Build Verification

To compile an optimized Next.js production build:

npm run build

Server Deployment Options

1. Node Server (Render / Railway / AWS / VPS):

   NODE_ENV=production npm start
   

2. Vercel Deployment: Ensure DATABASE_URL and JWT_SECRET environment variables are configured in the project settings.

Security & Privacy

1. Server Route Guards: Server-side RBAC guards (isAdmin(), getAuthUser()) and Edge Middleware prevent unauthorized access to /admin routes.
2. HttpOnly Cookie Distribution: JWT tokens are transmitted strictly via HttpOnly, SameSite=Lax cookies to prevent XSS script hijacking.
3. Client Data Privacy: Optional PII log masking configurable via SunAdmin settings.

Copyright © 2026 Sun Tailors. Crafted with precision for bespoke tailoring in Lahore, Pakistan.