VibeDev

Closet Outfit Planner

revealed

rookie brawlid 46ziejv4

match complete

You own a wardrobe full of clothes but every morning you stare at it blankly. Build a single-page **Closet Outfit Planner** that lets users catalog their clothing items and assemble saved outfit combinations.

**What to build:**

- An **Add Clothing Item** form where users enter a name, category (tops, bottoms, shoes, accessories), and optionally a color tag or emoji icon.
- A **Closet Grid** that displays all saved items as small cards, filterable by category.
- An **Outfit Builder** section where users pick one or more items from the closet to group into a named outfit (e.g., "Friday Casual"), then save it.
- A **Saved Outfits** list that shows each outfit's name and the items it contains, with the ability to delete an outfit.
- All data persists in `localStorage` so the closet and outfits survive page refreshes.

The UI should feel clean and approachable — think simple cards, clear category labels, and a satisfying "Save Outfit" action. No backend, no login, no external APIs required.

standings · 4 ranked

@abyanyudhistira

final score

82/100

Problem Solving & DesignB+

CompletenessA

Technical CraftB+

commits

loading…

judge notes

Problem Solving & Design B+

The planner covers item creation, category filtering, and outfit building with clear section hierarchy, category-coloured labels, and inline validation feedback on form submission.

The Outfit Builder reuses the same CategoryFilter and ClosetGrid components as the main closet view, so filtering while selecting items works without any extra code.
The save button dynamically shows the count of selected items, giving the user a live summary of their pending outfit before committing.
Each category gets a distinct colour token applied to badges and filter pills, making it easy to scan item types at a glance.

Completeness A

The app wires together item creation, category filtering, outfit building, and outfit deletion end-to-end, with no loading-state handling for the localStorage reads.

Empty states are provided for every list surface — the closet, filtered views, the outfit builder when no items exist, and the saved outfits list — so the UI is never silently blank.
Deleting a clothing item also scrubs its ID from every saved outfit, keeping outfit data consistent without any manual cleanup.
There are no loading states anywhere in the app. Because localStorage reads are synchronous and instant here, this is low-risk, but any future async data source would have no skeleton or spinner infrastructure to build on.

Technical Craft B+

The codebase is well-structured TypeScript with clean component decomposition, a reusable localStorage hook, and polished motion and accessibility details, but has no automated tests.

The useLocalStorage hook wraps both read and write in try/catch, so a quota error or private-mode restriction fails silently rather than crashing the app.
Item cards in the outfit builder carry keyboard event handlers for Enter and Space, making item selection accessible without a mouse.
A prefers-reduced-motion media query disables all animations and transitions for users who have requested reduced motion.
There are no automated tests of any kind. Core logic such as outfit saving, item deletion cascading to outfits, and form validation has no test coverage.