VibeDev

Gift Idea Vault

revealed

rookie brawlid fpe04zld

match complete

You're building a single-page app that helps users keep track of gift ideas for the people in their lives.

A user can add **people** (e.g. "Mom", "Best Friend Jake") and attach one or more **gift ideas** to each person. Each gift idea has a title, an optional price estimate, an optional URL or store name, and a status: **idea**, **purchased**, or **given**.

The full list of people and their gift ideas must persist in `localStorage` so nothing is lost on page refresh.

The UI should let users:
- Add and remove people from their gift list
- Add, edit, and delete gift ideas under each person
- Mark a gift idea's status (cycle or toggle between idea → purchased → given)
- See a quick summary per person showing how many gifts are in each status

The app should feel warm and organized — think festive but clean. A single scrollable page with collapsible or expandable sections per person works perfectly within the build window.

results

4 ranked

standings · 4 ranked

@mohinoai

final score

81/100

Problem Solving & Design67/100

Completeness96/100

Technical Craft69/100

judge notes

Problem Solving & Design 67

The app is cleanly structured around a pure domain layer, with all mutations flowing through immutable helpers and a clear separation between storage, domain logic, and UI.

All mutation helpers are pure functions that return new arrays without mutating their inputs, making state changes predictable and easy to test.
Storage hydration reuses the same normalization pipeline as new-data creation, so corrupt or partial localStorage data is handled consistently.
The confirm dialog traps focus on open and handles Escape key dismissal, providing a complete keyboard-accessible deletion flow.

Completeness 96

All brief-required features are fully implemented: people CRUD, gift CRUD with all optional fields, status cycling, per-person summaries, localStorage persistence, and collapsible sections.

The status cycle covers all three required states and loops cleanly, making a mis-tap recoverable without a separate undo action.
Per-person summaries display counts for all three statuses inline in the person header, always visible even when the section is collapsed.
The delete-person flow requires explicit confirmation and names the exact number of gift ideas that will be removed.

Technical Craft 69

The codebase is well-crafted with thorough automated tests, consistent design tokens, motion-safe animations, and rich accessibility attributes, with JSDoc typedefs as the only notable gap.

All design values — colours, radii, shadows, and status palette — are defined as CSS custom properties and reused throughout the stylesheet.
Collapse animations are suppressed under the user's reduced-motion preference via a blanket media query override.
The status badge renders as a button with a descriptive aria-label that names both the current status and the action, giving assistive technology users full context.
The keyboard focus indicator relies solely on the global :focus-visible rule using a box-shadow ring, but this rule is defined without a fallback outline, so environments that strip box-shadow (e.g.