Merge Konflict
mergekonflict.comis a personal brand website for a electronic music DJ, featuring an upcoming shows calendar, a custom SoundCloud audio player, and a spam-free contact form.
Music & Entertainment
- Next.js
- Sanity CMS
- Tailwind CSS
- Shadcn
- Soundcloud API
The making of the new Merge Konflict website
For a working DJ, a website is the difference between being discoverable and being invisible. Merge Konflict had the music, the shows, and the fanbase — but no digital stage. This project was built using Spec-Driven Agentic Engineering, a methodology where the developer orchestrates a team of specialized AI agents through structured specification documents. Every line of production code was generated by AI, guided by specs, and reviewed before merge. The result: a live, polished site with perfect Lighthouse scores, deployed in under two weeks of part-time work.
The design language draws from the raw energy of underground rave culture — dark, gritty, and uncompromising. A custom shadcn theme preset anchors the visual identity with deep mahogany backgrounds, a striking red accent for CTAs and links, and soft off-white surfaces for light mode. The artist name sits vertically on the hero's left edge, rotated -90 degrees — an unconventional layout that mirrors the genre's break from tradition. Every section below the hero gets generous whitespace, letting the content breathe on both mobile and desktop. A light/dark toggle gives fans control over their viewing experience.
Development
The site was built on Next.js 16 with React Server Components handling all data-fetching sections, reserving Client Components only where browser interactivity is required — the SoundCloud player, contact form, and theme toggle. Sanity CMS powers every piece of content through an embedded Studio at /studio, with three document types covering shows, site settings, and contact submissions; a webhook triggers on-demand ISR so published changes appear on the live site within seconds. The most stubborn challenge came from SoundCloud's 2025 API migration: the embedded player no longer accepted the new URN-based playlist identifiers, requiring a workaround that extracts the legacy numeric ID, stores it as a CMS field, and constructs the embed URL dynamically. A similar debugging effort resolved a production crash caused by a null image reference after adding a new schema field, and a field-name mismatch between the contact form's Server Action and client component was aligned to restore end-to-end submission flow.
"A Website as Good as the Music"
The site launched with nearly perfect Lighthouse scores across all four categories — Performance, Accessibility, Best Practices, and SEO. The contact form is spam-free thanks to a multi-layered invisible defense (honeypots, timing analysis, and Upstash rate limiting). Merge Konflict now updates his own schedule, bio, and playlist through a simple Studio interface. The Spec-Driven Agentic Engineering methodology proved itself: a solo developer, zero lines of implementation code, and a team of specialized AI agents that handled everything from design extraction to production deployment.