Files
..

SAPL Garment Intelligence — Frontend

React 18 + TypeScript + Tailwind CSS + Vite

See the root README.md for full project setup instructions.

Quick Start

npm install
npm run dev       # dev server at http://localhost:5173
npm run build     # production build → dist/
npm run preview   # preview production build locally

Pages

Route Page Purpose
/ Library Browse all garments, filter by DNA / pattern / colour / sleeve
/upload Upload Drag-and-drop image → AI tags + duplicate detection
/search Search Natural language semantic search across the collection
/review Review Approve or correct low-confidence AI tags

Key Components

  • GarmentCard — card with hover overlay, Find Similar trigger
  • SimilarDrawer — frosted glass slide-in panel with similar garments + Compare overlay
  • Sidebar — filter accordion + Create Collection modal
  • FeatureBanner — collapsible info strip on each page
  • TopNav — warm glass nav with Cormorant Garamond logo

Environment

No frontend environment variables required. The API base URL is hardcoded to http://localhost:8000/api in src/api/client.ts. Update this for any non-local deployment.