VibeDev

Wax Tracks: Vinyl Record Wishlist

revealed

rookie brawlid 5kaeqom9

match complete

You're a vinyl enthusiast with a growing list of records you want to hunt down at garage sales, record fairs, and local shops — but you keep forgetting what you're looking for, buying duplicates, or losing scraps of paper with album names on them.

Build **Wax Tracks**, a single-page app that lets you maintain a personal vinyl wishlist saved to localStorage. Each record entry should capture the **artist name**, **album title**, **release year** (optional), **genre** (optional), and a **priority level** (low / medium / high — displayed as a visual indicator like colored dots or stars).

The app should let you:
- **Add** a new record to the wishlist via a simple form
- **Mark a record as found** (striking it through or moving it to a "Collected" section), without deleting it so you keep the memory
- **Delete** a record entirely if you change your mind
- **Filter or sort** the wishlist by priority or genre so you can quickly pull it up at a record fair and know what to look for first

The UI should feel warm and tactile — think kraft paper tones, round labels, or a turntable-inspired color palette. All data must persist across page refreshes via localStorage so the list is always there when you need it at the crate.

standings · 4 ranked

some placements were decided by tiebreak · see rubric

@damosfxa

final score

84/100

Problem Solving & DesignB+

CompletenessA

Technical CraftA

commits

loading…

judge notes

Problem Solving & Design B+

The app maps cleanly onto the vinyl-wishlist domain with warm kraft-paper aesthetics, clear section separation, and contextual empty states.

Three distinct empty states — empty wishlist, no collected records, and no filter matches — each offer a relevant call to action.
The turntable-inspired color palette uses CSS custom properties for kraft, rust, and teal tones that carry through cards, tabs, and priority dots.
Priority is rendered as a colored dot with a text label, giving both a visual and accessible indicator on every card.

Completeness A

All brief features are implemented end-to-end, but storage write failures are not surfaced to the user as visible feedback.

Records marked as found move to a Collected tab with a strikethrough title, preserving the entry exactly as the brief requires.
Delete uses a two-step confirmation with a 4-second auto-disarm and Escape/click-outside dismissal, preventing accidental loss.
Filter and sort controls cover priority, genre, and two sort keys, and the genre dropdown rebuilds dynamically from live record data.
When a localStorage write fails, the store surfaces a SaveResult with a message, but the UI only shows a banner — there is no toast or inline message visible to the user in the normal flow, so the 'errors surfaced to the user' practice is…

Technical Craft A

The codebase is well-structured across six focused modules with TypeScript interfaces, pure array transforms, save-first persistence, and a comprehensive test suite.

Store operations use a save-first commit pattern — localStorage is written before in-memory state updates, so the UI never shows unsaved data.
Stored rows pass through the same validation gate as fresh input, so corrupt or schema-mismatched entries are skipped and counted rather than crashing the load.
The test suite covers validation, storage round-trips, corrupt-data recovery, pure store mutations, and filter/sort logic with immutability assertions.
Reduced-motion is respected both by skipping the boot delay and by disabling all animations and transitions via a single media query rule.