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 triggerSimilarDrawer— frosted glass slide-in panel with similar garments + Compare overlaySidebar— filter accordion + Create Collection modalFeatureBanner— collapsible info strip on each pageTopNav— 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.