BASSMENT
clubbassment.com is a high-fidelity, design-driven website for a fictional world-class Drum & Bass venue located four stories beneath 70 Pine Street, Manhattan — a full digital storefront with a fully integrated Stripe ticket checkout.
Music / Nightlife / Live Events
- Next.js 16
- TypeScript
- Tailwind CSS v4
- shadcn/ui
- Sanity CMS
- Framer Motion
- Stripe
- Netlify
- Vitest
- Google Maps API
The making of the new BASSMENT website
The brief was ambitious: build the digital home for a venue that doesn't exist, but needs to feel like it does. BASSMENT isn't just a club — it's a 96,000-watt analog sound system buried under Wall Street, a haven for junglists and bass purists. The website had to capture that industrial, underground identity while staying fast, content-editable, and laser-focused on its primary goal: selling tickets. The constraints were real. Content needed to be fully manageable by non-technical venue staff through Sanity CMS. Any content change — a new event, an updated FAQ — had to appear on the live site instantly, not after a developer deploy. The design had to feel brutalist and authentic to the Drum & Bass scene while remaining accessible and responsive. And the entire codebase needed to stay lean enough for a single developer to own end-to-end.
The visual language is unapologetically industrial: JetBrains Mono across every heading and body, a near-black background (#090102), and a single primary red (#D31F28) as the accent. There are no gradients, no soft shadows, no rounded corners (save for a deliberate 8px radius on cards and images — the one concession to modern UI softness). The design draws from brutalist architecture, club flyer typography, and the physicality of the Valve Sound System itself: graticule hairlines, red waveform motifs, and a monospace editorial rhythm that runs from the hero down to the footer. The brand's red accent is used sparingly — a thin border here, a hover state there, a sliding red bar on the resident DJ slider. Every element earns its place. The result is a site that feels as much like a physical space as the venue it represents: dark, loud, and intentional.
Development
The site is built on Next.js 16 with the App Router — data-fetching pages in server components, interactivity (DJ slider, tabs, contact form) in client components, all under TypeScript strict mode. Every piece of content lives in Sanity CMS: 17 events, 6 resident artists, FAQs, venue details, and a gallery, each modeled with validation rules. Publishing a change triggers a Netlify webhook → revalidation pipeline that purges the CDN and serves fresh pages within seconds — hardened with a content-signature guard and an automated purge token. Each event carries AI-generated poster artwork hosted directly in Sanity, uploaded through the embedded Studio and served on event cards, detail pages, and the home page featured panel. The signature details were built from scratch: a framer-motion DJ slider with preloaded image stacks and directional crossfades (plus full keyboard/ARIA/reduced-motion support), and a greyscale Google Maps API upgrade where a custom red SVG pin is the only color on the map. At the center of it all is the ticket flow. Stripe Payment Element handles the full purchase journey — payment intent, email attachment, webhook, and ticket persistence in Sanity with capacity tracking and auto-sold-out — with branded emails via Resend and a self-serve resend action for ticket recovery. Reliability is verified rather than assumed: a 90-test Vitest suite covers every pure-logic path, an integration script exercises the full purchase loop, and CI runs everything on every PR. Two production bugs made the site better: stale CDN pages fixed with a site-scoped purge token, and a black-band flash in the DJ slider rebuilt as a preloaded crossfade stack.
"A Website as Good as the Sound System Itself"
BASSMENT is a portfolio piece that functions as a production website. The live-updates pipeline keeps content fresh without developer intervention. The brutalist design language is unique and brand-appropriate. The animation system is tasteful and performant — scroll-safe, reduced-motion-aware, and entirely GPU-accelerated. The test suite, CI, and integration script ensure every deploy is verified. The site now serves as both a showcase of the fictional venue and a demonstration of what a single developer can build with the modern Jamstack: headless CMS content, serverless functions, edge-cached pages, and a polished, design-driven frontend — all without sacrificing speed or maintainability.