Architecture

Technical architecture of WardrobeAI — current and planned.

Current MVP Architecture

┌─────────────┐     HTTP      ┌─────────────┐     SQL      ┌──────────────┐
│  Frontend   │ ────────────→ │   Backend   │ ──────────→ │   SQLite DB  │
│  Next.js    │ ←──────────── │  Express    │ ←────────── │  wardrobe-ai │
│  Port 3003  │               │  Port 3002  │             │     .db      │
└─────────────┘               └─────────────┘             └──────────────┘

Components

Frontend (frontend/)

Next.js (React) with 3 pages
CSS Modules for styling
Direct API calls to backend (http://localhost:3002)
No authentication (MVP)

Backend (backend/src/)

Express.js server on port 3002
SQLite via sqlite3 npm package
CORS enabled for local development
JSON body parsing middleware

Data Flow

1. User fills Style Interview form → saved to DB
2. User requests curated box for a profile → 
   Backend loads profile + all inventory items →
   MatchingEngine scores each item → 
   Greedy selection picks top N within budget →
   Returns items with scores and reasons
3. User provides feedback → stored in feedback table →
   Available for analysis via /feedback/analysis

Future Architecture (Phase 2+)

┌─────────────────────────────────────────────────────┐
│                    Static Site                       │
│              (Astro SSG → Storj CDN)                 │
│                                                      │
│  ┌──────────────┐  ┌──────────┐  ┌──────────────┐   │
│  │ Landing Page │  │ Brand    │  │ Style        │   │
│  │ /waitlist    │  │ /about   │  │ /interview   │   │
│  └──────────────┘  └──────────┘  └──────────────┘   │
└──────────────────────┬──────────────────────────────┘
                       │ API calls
                       ▼
┌─────────────────────────────────────────────────────┐
│                  Chat / API Service                   │
│              (Node.js → Railway/Fly.io)              │
│                                                      │
│  ┌──────────────┐  ┌──────────┐  ┌──────────────┐   │
│  │ Curation API │  │ User     │  │ Stripe       │   │
│  │ /curate      │  │ /profile │  │ /billing     │   │
│  └──────┬───────┘  └──────────┘  └──────────────┘   │
│         │                                            │
│         ▼                                            │
│  ┌──────────────┐  ┌──────────┐                     │
│  │ PostgreSQL   │  │ Redis    │                     │
│  │ (persistent) │  │ (cache)  │                     │
│  └──────────────┘  └──────────┘                     │
└─────────────────────────────────────────────────────┘
                       │ Internal API
                       ▼
┌─────────────────────────────────────────────────────┐
│                 AI / ML Service                       │
│               (Python → Railway/Fly.io)              │
│                                                      │
│  ┌──────────────┐  ┌──────────┐                     │
│  │ ML Matching  │  │ LLM      │                     │
│  │ Engine       │  │ Interview│                     │
│  └──────────────┘  └──────────┘                     │
└─────────────────────────────────────────────────────┘

Technology Decisions

Component	Current (MVP)	Future (Production)
Frontend	Next.js + CSS Modules	Astro SSG (static) + React (app)
Backend	Node.js + Express	Node.js + Express (API service)
Database	SQLite	PostgreSQL + Redis
AI/ML	Rule-based scoring	Python ML service + LLM
Payments	None (manual)	Stripe
Hosting	Localhost	Vercel + Railway/Fly.io
Static assets	Local filesystem	Storj CDN
Analytics	None	Umami (self-hosted)

Matching Engine Architecture

┌──────────────────────────────────────────┐
│            MatchingEngine                │
│                                          │
│  Input: profile_id                       │
│  1. Load profile from DB                 │
│  2. Load all inventory items from DB     │
│  3. For each item:                       │
│     ├── Calculate style match (35%)     │
│     ├── Calculate color match (35%)     │
│     ├── Calculate budget fit (20%)      │
│     └── Calculate category match (10%)  │
│  4. Filter scores > 0                   │
│  5. Sort descending by score            │
│  6. Return top N (default 20)           │
│                                          │
│  Output: [{ item, score, reasons }]     │
└──────────────────────────────────────────┘

The Matching Engine is at backend/src/matching/matchingEngine.js.

Deployment

Current

cd backend && npm start     # Port 3002
cd frontend && npm run dev  # Port 3003

Production Plan

Frontend: vercel deploy or Astro build → Storj
Backend: Railway/Fly.io with PORT env
Database: Railway managed PostgreSQL

Full details in DEPLOYMENT.md