Building RegexWars: A Live Setup with Next.js, Clerk and AI

Somewhere across the last batch of videos I noticed I'd developed a quiet obsession with two things: solving little puzzles in the LeetCode/Codewars style, and using regex to do it. Chess pieces in check, Connect Four wins, tic-tac-toe boards — every time I reached for regex, the solution got shorter and weirder and I enjoyed it more. So the natural next thought: this should be its own thing. A Codewars, but every challenge is a regex challenge. Submit puzzles, solve puzzles, score on conciseness and elegance, leaderboards, the lot.

I checked regexwars.com. It was available. I grabbed it.

I have a tenet in the book I'm writing called the tenet of the beginner — an injunction to just start something, because the alternative is endless analysis of an idea that never makes it out of your head. So instead of planning RegexWars for a week, I sat down and shot a video of me bootstrapping it live — domain to deployed waiting list, on camera, in one sitting. This post is the writeup of that session: what I picked, why, and what shipping it actually looked like.

Why this doesn't already exist

Regex is a niche taste. People who love it really love it; everyone else avoids it. Codewars and LeetCode treat regex as one of many tags, not the whole point. There's no dedicated home for it — no leaderboard for "solved 100 regex challenges", no community judging entries on character count and readability.

That niche-ness is exactly why I think it could work. The audience is small but loud, and the format (one challenge, one box, paste in your pattern, get judged) is mechanically simple. The product is a thin layer; the value is the curation and the community.

The stack, picked live

I made the stack decisions on camera, with no pre-planning:

• Next.js (App Router, TypeScript, Tailwind, Turbopack) — my default. npx create-next-app gets me to a running site in under a minute, and I know the shape of every file it generates. App Router because everything I build now is App Router; Turbopack because the dev server is faster and there's no reason to opt out.
• Clerk for authentication — third-party auth I've used on another project and liked. Drop-in components, no rolling my own session handling, free tier covers a waiting-list-stage product comfortably. For a build-in-public site where the only auth event for now is "join waiting list", I'm not going to write a bespoke email-capture flow when Clerk gives me one for free.
• Vercel for hosting — same logic. GitHub push, Vercel deploys, the domain points at it. Five minutes including DNS.
• ChatGPT as a coding pair — not to write the architecture, but to do the dull bits. Replace the boilerplate page.tsx, draft a waiting-list landing section, remind me of the Clerk middleware shape when I've forgotten it. I have a genuinely terrible memory for the names of config files and import paths, and an LLM next to my editor is the cheapest way I've found to paper over that.

None of those are bold choices. That's the point. The interesting work on RegexWars is going to be the regex engine, the scoring, the challenge format — not the auth flow or the deploy pipeline. The stack should be boring on purpose.

What the implementation actually looked like

npx create-next-app regex-wars
# TypeScript, ESLint, Tailwind, src dir, App Router, Turbopack
cd regex-wars
npm run dev

That gave me the default Next.js page. I copied it into ChatGPT, described the project ("Codewars but for regex challenges, an example might be 'detect if a king is in check'"), and asked it to rebrand the landing page. It came back with a respectable hero: "Hone your regex skills through wicked challenges, from basics to brain teasers. Are you ready for the battle? Enter the arena." I'm sure I'll rewrite that copy later, but as a first paint, fine.

Then the waiting-list step. I asked ChatGPT to add a Clerk-backed waiting list with a "Join waiting list" button. It produced the JSX, told me to install @clerk/nextjs, and gave me the imports:

import { SignInButton, SignedIn, SignedOut } from "@clerk/nextjs";

It also got the middleware wrong. Confidently. It generated a middleware.ts that didn't use clerkMiddleware — the actual current API — and a matcher pattern that didn't match what Clerk's docs say. I prompted "isn't it called clerkMiddleware?" and it course-corrected, but the matcher was still off. I pasted the real version from the docs instead. Worth flagging because it's the honest experience of working this way: AI gets you 80% of the boilerplate, but the specific framework integrations are exactly where it hallucinates, and you need to know enough to spot it.

I also needed to wrap the app in <ClerkProvider> in layout.tsx, which I'd forgotten but the error message reminded me of. Standard Clerk setup from there: create an application in the Clerk dashboard, paste the publishable key and secret into .env.local, restart dev, button works, Google sign-in works, waiting list captures emails. Done.

Deploy

git init
git remote add origin git@github.com:.../regex-wars.git
git push -u origin main

Private repo on GitHub. Import to Vercel. First build failed because I hadn't added the Clerk env vars (I'd assumed it would at least build without them — apparently not, Clerk's middleware crashes hard on a missing key at build time). Added the env vars, redeployed, green. Pointed the A record for regexwars.com at Vercel's IP, waited for DNS, and the site was live.

What the session actually proved

This wasn't a deep technical reveal. It was a stake in the ground. The whole point of doing it on camera was to demonstrate two things:

1. The tenet of the beginner is real. From "I have an idea for a site" to "the site exists at its actual domain with a working signup" is, if you let it be, a couple of hours. Most ideas die between those two states for reasons that have nothing to do with the idea.
2. A modern stack collapses the boring middle. Auth, hosting, DNS, deploys — none of these are problems anymore. They take longer to explain than to do. The only thing left is whether the thing in the middle is worth building.

So: regexwars.com is live. The interesting work — the challenge editor, the regex scoring, the leaderboard, the submission flow — is all still ahead. If you have a passion for regex (genuinely, if you do, get in touch — there aren't many of us), come along for the ride. The waiting list is open.