How I built a context-switching profile builder with Next.js, dnd-kit, and Supabase

I've been building Introlo, a link-in-bio tool where your single URL shows different content depending on the context you set. I call these "persona modes" — you might show one version of your profile when you're networking, another when you're fundraising, another when you're promoting creative work. This post is about how I built the Studio (the profile editor) and the architectural decisions behind making persona modes work. Hopefully useful if you're building anything with dynamic content rendering, drag-and-drop interfaces, or multi-state profiles. The Stack React 18 + Next.js 14 (App Router) TypeScript Tailwind CSS (custom component layer, no shadcn/MUI/Chakra) Supabase (auth + database) Stripe (payments) dnd-kit (drag-and-drop) No component library. Every UI element is custom. That was a deliberate choice I'll get into below. The Core Problem: One URL, Multiple States The fundamental challenge is this: a single URL (introlo.com/yourname) needs to re