Watch an app go from a vote in the chat to live on the internet in 60 minutes
This is the full two-hour replay: the build, then about 40 minutes of Q&A.Led by James McAulay · Encore CEO (acquired) · ElevenLabs Growth · Cambridge Computer Science
Get the full replay free
- All two hours: the build and the Q&A
- 28 chapters, so you can jump to any part
- Plays straight away, no waiting for an email
No spam, unsubscribe any time.
From the live chat (UK time)
Such a nerd. I love it!
45 mins spent planning and 15 mins spent building - I like this ratio.
sheesh in that happened in 1 minute
I understand absolutely nothing of this, but I’m so invested 🍿
Would definitely be keen to use this! Awesome stuff James, thank you
From a vote in the chat to a live app, step by step
- The vote
The chat picks the app: a race-day fuelling planner for triathletes.
- The interview
Claude asks 20 multiple-choice questions and writes the PRD.
- Wireframes
Clickable HTML wireframes before a line of app code.
- Ten critics
Critic agents attack the plan from every angle before the build.
- The build
Subagents build the milestones in parallel, with tests.
- Live
Deployed to Vercel with under two minutes on the clock.
- Q&A
About 40 minutes of questions on tools, security and the method, ending with version 2 going live.
- 60 min
- from a vote in the chat to a live app
- 900+
- automated tests by the end of the session
- 25
- tools used or explained on screen
- 28
- chapters, so you can jump to any part
The method in this replay is chapter 7 of Claude Code for Builders
In “How I build” James takes the same loop step by step on a real feature, at a pace you can follow. The other 7 chapters push Claude Code itself to its limit: hooks, subagents, skills that improve themselves, always-on routines, any model, and shipping safely with several agents at once.
8 chapters · 37 modules · £349 + VAT. Sales open Friday 30 October at 10:00 UK time, and the waitlist hears first.
- 7.1The loop, and research before deciding
- 7.2The PRD method (with the interview inside it)
- 7.3Adversarial review of the plan
- 7.4See it, mark it up, build it
- 7.5Build, test, ship
Every tool James reached for in the build
● 18 used on screen · ○ 7 talked through. Tap a tool to see how James used it.
AI models & coding agents
Claude Code●The coding agent that ran the whole build in the terminal, from PRD and wireframes to the Vercel deploy.
Claude Opus 5.5●The main model for planning, writing the PRD and building the app; James finds it quick enough that he rarely needs fast mode.
- Claude Sonnet 5.5●
The cheaper, faster model used for the research agent and the ten critic sub-agents that attacked the PRD.
ChatGPT / Codex●OpenAI's coding agent, run on a top-tier GPT model at extra-high effort as a second pair of eyes to review the PRD and the code Claude built.
Claude Cowork○Answering a question about sub-agents outside the terminal: Cowork is being merged into Claude chat, so you can ask for sub-agents there too.
App building blocks
Next.js●The web framework James told Claude to build the app in; he explained it as a fast framework that works well with Vercel.
Tailwind CSS●The CSS library for styling, described as skipping the hassle of hand-building CSS.
shadcn/ui●The ready-made component library (menus, popovers, toasts) that makes Claude's first draft look decent; James calls them Lego bricks.
Supabase○Offered by Claude as the database option in the PRD interview and explained as the database most coding agents suggest; the app stayed browser-only for v1.
Clerk○Recommended for handling login securely, shown through the Clerk dashboard of James's own site; not used in the live app.
Apify○Suggested in the PRD as a possible version 2 route to live supermarket prices, since the big UK grocers have no API and ban scraping.
Deploy, hosting & domains
Vercel●Hosting for the app: a sub-agent created the project through the Vercel CLI and the site went live without James opening the Vercel dashboard.
GitHub●Private repository for the code, created through the GitHub CLI, with Claude's pull requests merged on GitHub to ship each release.
Porkbun○Where James would buy a proper domain name; he searched it live but did not buy one.
Cloudflare○Described as the layer that protects a site from bots and DDoS attacks, so nobody can burn through your AI tokens by spamming it.
Design & visuals
Paper●A Figma-style design canvas connected to Claude over MCP; James showed his footer variations in it and would use it for wireframes if not rushing.
Magnific●Used from Claude Code to fetch licensed stock photos of triathletes for the landing page, and for AI image generation and thumbnails.
CleanShot X●Screenshot app used to annotate a wireframe, paste it into Claude and ask for a simpler race-plan page.
Research, planning & voice
Perplexity●James dictated a prompt asking Claude to use the Perplexity API to research scraping terms and APIs; the demo stalled on a missing key in that folder.
Wispr Flow●Voice dictation tool James uses to speak his prompts to Claude, including the long app brief at the start of the build.
TrainingPeaks○James's training platform and the maker of the unofficial TrainingPeaks MCP he built; an integration was planned in the PRD, then cut from version 1.
Google Sheets●Showed his hand-built Ironman Wales 2022 fuelling spreadsheet as the manual version of what the app automates.
Testing & security
Playwright●Lets Claude open the app in a real browser and click through it to test visually; its sub-agents ran Playwright against the build.
gitleaks●Scanned the code for private keys and secrets before the first deploy; it flagged possible secrets that Claude checked before uploading.
Google Chrome●Where Claude opened the wireframes and the app for James to click around, and where he used DevTools to preview the mobile layout.
The skills that did the heavy lifting
/prdInterviews James with multiple-choice questions, researches the topic and writes a milestone-checkbox product requirements document that any coding agent can build from.
/multi-agent-refineSpins up ten critic sub-agents to attack the PRD from different angles (safety, scope, cost, privacy, sports science) and applies the fixes; they found 79 improvements.
/owasp-security-checkRuns the app against a list of the commonest web security mistakes once the build finishes. James also pointed to the open-source claude-code-owasp skill as the one he believes he uses.
/i-have-adhdby ayghriThird-party skill that rewrites Claude's reply as a short numbered list that leads with the next action, used when Claude asks for decisions James has lost the thread on.
/opus5-auditAudits a CLAUDE.md, skills and folder setup against Claude 5 guidance and gives an A to F grade, built because Opus 5 needs less explicit instruction.
/claude-code-security-reviewby AnthropicAnthropic's AI security review GitHub Action, mentioned as another way to get a second look at security.