Kavalkade — A Modern Music, Media & Merch Experience Built with Next.js

The goal was clear: create a fast, cinematic, next-gen home for the band — something that combines music streaming, video/photo galleries, and merch into one unified product. I designed and built the entire system using Next.js, leveraging Server Components, shared state management, and a persistent audio engine. Fans can listen to music while browsing media or shopping, without interruption. On top of that, I integrated a complete ecommerce workflow with Stripe, Printful, and Supabase to handle accounts, auth, and order visibility.

The design direction was inspired by Kavalkade's aesthetic: dark, minimal, moody, modern. I built a fully custom component system — buttons, cards, media grids, modals, layout primitives — all with consistent spacing, typography, and motion. Every part of the UI is crafted to feel smooth and intentional: • A sticky global audio player with animated transitions • A full-screen music panel with artwork + track details • A responsive media grid for both photos and videos • Auto-playing video previews (desktop only) • Cinematic modal viewer for photos + videos • A clean, minimal storefront experience • A simple, fan-friendly account dashboard Desktop feels premium. Mobile feels tight and frictionless. The experience is cohesive across every touchpoint.

1. Continuous music playback across routes Traditional sites break audio on navigation. Solution: a singleton global audio engine in a persistent layout + global store that keeps playback alive across all pages. 2. Handling both images and video in the media grid Different formats = different behaviors and load strategies. Solution: a unified media card component with intelligent detection, lazy loading, and dynamic rendering. 3. Integrating ecommerce seamlessly into the fan experience Fans should be able to shop without losing their place in the listening experience. I built a SPA-like cart system using global state + Stripe checkout + Printful fulfillment. 4. Making the site feel like a real app, not a template I built a custom design system from scratch — no templates, no theme boilerplate — ensuring the entire product feels cohesive and intentional.

The finished product feels nothing like a traditional band site — it's closer to a mini streaming platform, merch store, and media hub blended into one. It gives our fans: • A persistent listening experience • Fast, clean access to all media • A frictionless way to support the band with merch • A modern UI that matches the identity of our music For me, it represents the level of polish and execution I bring to the apps I build — thoughtful architecture, a cohesive design system, and an obsessive focus on user experience end to end.