Spiral Sounds
A full-stack vinyl store pairing editorial discovery with reliable checkout.
Overview
Spiral Sounds turns a 60-record catalog into a listening ritual. A playable turntable, genre-led discovery, search, detailed tracklists, and related records give the storefront its editorial character, while session authentication, a stock-aware bag, Stripe Payment Element checkout, and server-side order safeguards support the full purchase flow.
Built with
01
A listening ritual, not a hero decoration
The silver dial starts a real audio preview as the tonearm moves into place, the label begins to spin, and the control reports its new playback state. The interaction establishes the physical rhythm of vinyl before the visitor sees a product grid.
02
Discovery stays curated at catalog scale
Five tactile genre covers lead into a searchable catalog of 60 records across 12 genres. The browse sheet keeps the editorial typography and curatorial voice while supporting title, artist, genre, and mapped subgenre searches.
03
The record page supports a decision
Each detail page brings the cover, price, live stock, format, runtime, full tracklist, and related records into one composition. Cross-document View Transitions carry the selected cover from the catalog into its product page without losing context.
04
The brand continues beyond the shelf
A showroom narrative and clearly labelled illustrative listener profiles give the store a sense of place without pretending they are real customer testimonials. These editorial chapters turn the storefront into a coherent world rather than a sequence of commerce screens.
Engineering trade-off
Challenge
Checkout has to remain correct through retries, duplicate completion requests, and two people attempting to buy the final copy. A client-provided total or a single optimistic stock check is not enough.
Decision
The server recomputes the bag total before creating a Stripe PaymentIntent. Order completion runs in a database transaction, uses a unique payment-intent ID for idempotency, and decrements inventory with a conditional update so the same stock cannot be sold twice.
Production path
A production storefront would move fulfilment to Stripe webhooks, isolate automated tests from the live database, add inventory monitoring, and give failed or refunded orders a dedicated recovery flow.