Highlights
- Designed and developed a full-stack wardrobe catalog and outfit generator web application.
- Catalog with item upload, search, sorting, and filtering by category and color.
- Rule-based outfit generator driven by occasion, weather condition, and temperature (°F/°C, manual or location-based), with planning modes for today, the week, or a trip.
- Explainable recommendations: every outfit includes the reasons it was chosen.
- Taste personalization from Pinterest inspiration pins, outfit photos, and wear history; liked outfits and a wear journal.
- Supabase integration for user authentication and cloud data storage with cross-device sync.
Overview
Closet is a web application I designed and developed for cataloging a wardrobe and generating outfits. Users add their clothing to a browsable catalog, then generate outfits for a specific occasion and weather. The front end is built in HTML, CSS, and JavaScript and hosted on GitHub Pages; user accounts and data are stored in Supabase.
Features
| Catalog | Add, search, and sort clothing; filter by category (outerwear, tops, sweaters, dresses, jeans) and color |
|---|---|
| Outfit generator | Rule-based outfits by occasion (university, work, networking, date night, events) and weather |
| Weather input | Condition (sunny, cloudy, rainy, windy, snowy) and temperature in °F or °C, set manually or from location |
| Planning modes | Today, My week, and A trip |
| Explanations | Each outfit lists the reasons it was selected (warmth, formality, palette) |
| Personalization | Optional "style from my taste" weighting from Pinterest pins, outfit photos, and most-worn pieces |
| Tracking | "Wore this today" journal and liked outfits |
| Accounts & sync | Supabase authentication and cloud storage, synced across devices |
Outfit generation
The generator uses deterministic, rule-based matching rather than a machine-learning model. Given the occasion, weather condition, and temperature, it selects pieces that satisfy warmth, formality, and color rules, then names the outfit and lists why each choice fits. For example, a 59°F sunny day at university produced a "street neutrals" look, with the leather jacket selected for warmth and a neutral palette for the setting. Because the logic is explicit, every recommendation is traceable and the rules are straightforward to tune.
Backend and data
The first version stored data locally in the browser. To make the closet available on any device without manual export and import, I migrated persistence to Supabase, which provides user authentication and a hosted cloud database. Each user's catalog, outfits, journal, and likes now sync automatically across devices.
Interface design
The interface uses an olive-and-neutral palette, an editorial serif for headings, and arched item cards, with a persistent sidebar for Closet, Outfits, Journal, Inspiration, and Liked.
Skills applied
- Integrating authentication and a cloud database (Supabase) into a static web application.
- Data modeling and cross-device synchronization.
- Designing rule-based recommendation logic with human-readable explanations.
- Search, sort, and multi-filter UI in plain JavaScript.
- UI/UX design for a consumer-facing product.