Kavalkade's New Digital Home — How I Built a Modern Music & Merch Experience with Next.js
A deep dive into rebuilding Kavalkade's band website as a fully integrated music platform, merch store, and fan hub using Next.js, featuring a persistent audio player, media grid, and complete ecommerce system.
From "Band Website" to a Fully Connected Experience
When I rebuilt the site for my band, Kavalkade, I didn't want another cookie-cutter band page with a player slapped on top. I wanted something that actually felt alive — a fast, modern, dark, cinematic experience that merges music, media, and merch into one cohesive system instead of scattered features duct-taped together.
Under the hood it's all powered by Next.js and a custom component system I've built up over time. There's a persistent audio player, a video-friendly media grid, and a real ecommerce flow layered together in a way that still feels lightweight and intuitive.
Think of it like a stripped-down music platform, merch store, and fan hub — all built from scratch, all in one place.
Why Next.js Was the Move
I'm a big believer that the stack should disappear into the background. Next.js gives me everything I need for that: speed, clean routing, SEO, and a ridiculous amount of flexibility.
I used Server Components for performance and data handling, and kept interactive pieces — the music player, media viewers, cart, filters — as client components powered by shared global state. This setup keeps the UI feeling snappy while still letting the dynamic pieces behave like a real application.
No hacky AJAX, no janky "refresh to reset the audio," none of the old WordPress bullshit I used to fight years ago.
Custom Minimal UI, Built for the Band's Aesthetic
I wanted the site to feel like Kavalkade — dark, moody, minimal, sharp — not like a template that could belong to literally any band.
Everything you see is built from a custom component library: cards, panels, buttons, overlays, modals, responsive layouts. It keeps the visual language tight across every page while still allowing each section to have its own vibe.
Just as important: it's highly responsive. Desktop, tablet, mobile — it all adapts cleanly so fans can listen, browse media, or shop without running into friction.
The Persistent Music Player
My favorite part of the whole build: the persistent audio player. When someone hits play, the music keeps going — whether they're scrolling photos, watching videos, or checking out merch.
The player uses a singleton global audio engine that lives outside of the routing layer, so it never unmounts. Pages don't control audio; they talk to the engine. That's how everything stays in sync and feels app-like instead of "just a website with a player."
I also built a full player panel that expands to show artwork, track details, scrubbing, and additional controls. Anything you do there instantly updates the main player, and vice versa.
Smooth, elegant, and continuous — the way band sites should have worked a decade ago.
A Media Grid That Handles Photos & Videos Seamlessly
The Media page is where Kavalkade's visual identity lives. I built a dynamic media grid that handles both photos and videos with zero awkwardness or layout glitches.
It supports:
- Images with proper optimization and lazy loading
- Video previews that auto-play when visible
- Filters to switch between photos, videos, or mixed content
- A cinematic modal viewer for full-screen playback
It's the kind of experience you'd expect from a polished music platform, not a "band website," and that was the goal.
Ecommerce, Fulfillment, and Accounts — Fully Integrated
Kavalkade's site includes a legit, full-stack merch system — not a Shopify theme, not a redirect, not a cheap embed.
It supports:
- Product browsing & individual detail pages
- A persistent shopping cart
- Secure checkout via Stripe
- Automatic order handoff to Printful for production & fulfillment
- User accounts powered by Supabase Auth
- Order history and dashboards inside the app
When someone buys something, the system handles every step — payment, order creation, fulfillment, and status updates — without any manual work on our end.
It turns a band website into a fully functioning merch operation tied directly into the fan experience.
Account Dashboards & Fan Experience
Fans who create an account get a personalized dashboard where they can:
- See past orders
- Check order statuses
- Update their info
All of this runs on Supabase, which keeps things smooth on the backend while giving users a clean, modern UI.
A Build That Matches the Vision
Before writing a single line of code I mapped out how all the pieces should connect — music, media, merch, accounts, and the overall vibe. The final product feels exactly like what I imagined: cohesive, fast, modern, and expressive.
It's everything I love about building with Next.js: a real product, not a patchwork.
Want Something Like This Built for You?
If you're a musician, brand, startup, or creator and want a custom-built app or site with real engineering behind it — not generic templates — I'd love to chat.
I build high-performance, modern, minimal apps that blend design and engineering: persistent experiences, ecommerce systems, media-heavy layouts, and custom dashboards.
You bring the vision — I'll build the thing. Reach out anytime.