Case study · Music sharing web app
Dear Mixtape
A for-fun web app that revives the lost art of the mixtape — curate a two-sided cassette of songs, then send it as a private link that opens into an animated boombox.
- Role
- Design, front end & backend — solo
- Timeline
- 2026
- Status
- Live · For fun
- Next.js 16
- TypeScript
- Tailwind v4
- Framer Motion
- Drizzle
- Postgres
- Vercel
01 The idea
Streaming made every song instantly available and, somehow, music a little less personal. The mixtape — something you curated by hand and gave to one person — got lost.
I wanted to rebuild that feeling on the web: not another playlist in a sea of playlists, but something you make for someone and hand over — no accounts, no sign-ups, just a link.
02 The approach
I built it to feel like handling a physical cassette rather than using a web app — a CRT boot sequence, scanline and grain overlays, a custom cursor, and a tape-deck metaphor throughout.
Underneath it’s a full-stack Next.js 16 app. You fill Side A and Side B, write a “Dear ___” note and pick a shell, then seal it — which mints one unguessable link. Opening that link loads a sealed case into a boombox with spinning reels, a dancing VU meter and an LCD readout.
No accounts, no sign-ups — just one unguessable link that unwraps into a boombox built for a single person.
03 What it does
Build a tape
Search any song, fill Side A and Side B, name it, write a “Dear ___” note, and pick a cassette shell.
Share with one link
Sealing a tape mints a private, unguessable URL. The link is the share — no accounts, no sign-ups.
A staged unboxing
A sealed case loads into a boombox: spinning reels, a colour VU meter, an LCD now-playing scroll, a ticking counter.
Hear the songs
30-second previews from Apple’s catalogue play as the deck runs, reel-to-reel.
Play the full tape
An optional, region-aware match builds a single “play all” YouTube link for the full-length songs.
Personal share cards
Per-tape Open Graph images are generated on the fly, so a link unfurls as a personal card in iMessage and WhatsApp.
04 How it's built
- Next.js 16
- App Router, server actions & OG image generation
- TypeScript
- End to end
- Tailwind CSS v4
- The retro design system
- Framer Motion
- The staged receiving experience
- Drizzle + Postgres
- Persistence, on Supabase
- iTunes Search API
- Song search, artwork & previews
- YouTube Data API
- Full-song “play all” export
- Vercel
- Hosting & deployment
05 Outcome
Dear Mixtape is live at dearmixtape.com — a complete, deployed full-stack app you can actually use to make and send a tape. More than any single feature, it's a record of working through the messy, real-world constraints — a vendor wall, a build-time crash, mobile-only bugs — that separate a demo from something you'd send a friend.