VibeDev

Vinyl Record Side Flipper

revealed

rookie duelid iidqtdsj

match complete

Build a single-page app that helps a vinyl listener track which side of a record they should play next.

The app displays a single record 'now playing' card showing:
- The album name (user-typed)
- Which side is currently playing (Side A or Side B), shown as a large flippable label
- A running countdown timer that starts when the user hits **Play**, counting up from 0:00 to help them know when the side is about to end
- A **Flip** button that resets the timer and switches to the opposite side
- A **Done** button that clears the current record

Below the active card, keep a simple **Recent Plays** list (stored in memory, no persistence required) showing the last 5 album names and how many total flips each got during its session.

The visual design should feel warm and retro — think dark wood tones, orange/amber accents, and a circular graphic suggesting a spinning record. No auth, no external APIs, no backend. Pure single-page widget.

standings · 2 ranked

@yinn

final score

81/100

Problem Solving & DesignB+

CompletenessB

Technical CraftB+

commits

loading…

judge notes

Problem Solving & Design B+

The app cleanly solves the brief with a well-separated domain/state/UI architecture and thoughtful UX details like double-click guarding and beforeunload protection.

Domain logic is fully decoupled from the DOM: every time-dependent function accepts `now` as a parameter, making the module independently testable.
A double-click guard prevents duplicate state transitions during the CSS transition window, keeping the session state consistent.
The tonearm rotates into playing position when a record is active, reinforcing the retro turntable metaphor visually.

Completeness B

Core features — album entry, side tracking, timer, flip, done, and recent plays — are all fully implemented and wired end to end.

The Play, Flip, and Done buttons each produce an accessible announcement via the live region, giving screen-reader users clear feedback on every state change.
The Recent Plays list correctly caps at five entries and places the newest album at the top, with the oldest silently dropped.
An empty-state message is shown in both the now-playing panel and the recent plays section when no data is present.
There are no loading states anywhere in the app — the brief does not require async work, but the measured gap flags this as a missing practice.
No risky operations (such as DOM queries or interval setup) are wrapped in error handling, so an unexpected failure would be silent.
Validation errors are stored in state and rendered into the error element, but the measured coverage marks errors-surfaced-to-user as absent — the error element uses role="alert" yet is conditionally hidden before text is set, which may…

Technical Craft B+

The codebase demonstrates strong TypeScript discipline, a thorough test suite for domain logic, and careful accessibility implementation including skip links, ARIA attributes, and a visible focus indicator.

Explicit TypeScript interfaces are defined for all major data shapes, keeping the state contract clear across modules.
The vitest suite covers edge cases including negative elapsed time, NaN input, whitespace-only album names, and list mutation safety.
The CSS defines all colours and spacing as custom properties in :root, providing a single place to adjust the visual system.
The responsive grid collapses to a single column below 1000px, but between 620px and 1000px the turntable and panel share a two-column row that can become very narrow on tablets.