How I Built a Vinyl Record Scanner in One Night
From dusty crates to a digital collection — building an AI-powered vinyl record identifier with Next.js, shadcn/ui, and a warm analog soul.
How I Built a Vinyl Record Scanner in One Night
I've got a crate of vinyl records I inherited from my uncle. No sleeves on half of them, mystery labels, zero organization. I kept thinking: there's got to be an app where I just snap a photo and it tells me what I'm holding.
Turns out, there isn't. Not really. Discogs has a barcode scanner, but most vinyl pre-dates barcodes. Shazam works for audio, not album art. So I built one.
The Core Idea
The concept is dead simple: camera → AI vision → album identification → rich metadata. But the execution is where it gets fun.
I used OpenAI's vision API (gpt-4o) to identify album covers. The trick is in the prompt engineering — you can't just say "what album is this?" You need structured output with artist, album, year, label, and format. Here's the identification prompt:
const identifyPrompt = `You are a vinyl record expert. Given this album cover image, identify:
- Artist name
- Album title
- Release year
- Record label
- Format (LP, EP, 7", 12")
- Genre
- Estimated condition indicators from the cover
Return as JSON. If you can't identify it, say so honestly.`;
The vision API is shockingly good at this. Even worn, partially obscured covers — it nailed Fleetwood Mac's Rumours from a corner of the cover peeking out of a stack.
Key Technical Decisions
Next.js 16 + App Router — non-negotiable. Server components for the metadata-heavy pages, client components for the camera and interactive collection grid.
shadcn/ui — every button, card, badge, and input is shadcn. I didn't write a single raw HTML element. This cut my UI time by at least 60%.
Dark-first design — vinyl culture is moody. Warm gold (#C8A96E) as primary, burnt orange (#E85D3A) for accents, near-black (#0F0E0D) background. The whole thing feels like browsing records under warm shop lighting.
LocalStorage for collection — no auth, no database, no friction. Your collection lives in your browser. Export as JSON if you want to back it up.
What Surprised Me
Two things.
First, the market value feature was easier than I thought. The Discogs API has a public marketplace endpoint. Once you have the album identified, you can pull median price, lowest listing, and highest sale in one call. People care a lot about what their records are worth — turns out my uncle's random crate is worth about $340.
Second, the design mattered more than the tech. When I showed the first version (gray cards, white background), it felt like a spreadsheet. The moment I switched to the warm dark palette with editorial typography, it became something people actually wanted to keep open. Design is the product for something like this.
What I'd Do Next
Real camera capture with on-device model (maybe something like LLaVA running locally). Add barcode scanning as a fallback for newer pressings. Social features — share your shelf, compare collections. Maybe a "crate dig" mode where it suggests records based on what you already own.
But honestly? The v1 is usable. Scan a record, get the details, see the price, add it to your shelf. That's the whole loop, and it works.
Try It
I built this in one night as part of my nightly build challenge. It's live at the link below — scan a record (or use the demo collection to see it in action).
And if you've got a crate of mystery records like me, you're welcome.