Session 03 · 5/20 · jake + tanner
picking the project, walking the stack, kicking off plan mode — paused at 00:47
This week was different. No project carried over from last time — Tanner picked something new, and the rule of the session was: take it from nothing to a plan, in real time, together.
Twenty-five minutes of brainstorming the idea. Five minutes deciding the stack. Ten minutes watching Claude Code draft the architecture in plan mode. Then a candidate call popped up and we paused — with the plan ready to run next time.
A referral agent for ElevenLabs hiring. An employee says "I have a friend who'd be great at X — what roles fit?" and the agent talks back, asks a few questions to sharpen what "great at X" really means, then surfaces matching openings. Over time, it gets smarter — pulling from a knowledge base of what "good" looks like for each role, informed by hiring managers and recruiters.
"I would love to build an agent via API because I haven't done that before — that pulls in from a knowledge base what good looks like… an internal employee-only resource informed by hiring managers, enhanced by recruiters." — Tanner, ~00:14
Jake's nudge mid-pitch: "What does the UX look like?" — pulling the design back from data-architecture into something a person actually uses. That reframe shaped everything that came after.
what each part is, where it fits, why you might hear about it
Reusable interface elements — buttons, forms, dialogs — pre-styled and accessible. You copy them into your project instead of installing them as a package, so you can tweak anything.
A utility-first styling system. Instead of writing custom CSS files, you stack tiny class names directly on elements (p-4 rounded-lg). Fast to iterate, easy to keep consistent.
The all-in-one framework. Handles pages, routing, server-side rendering, and API routes — frontend and backend in one project. Built on top of React, with everything else bolted on.
The library Next.js is built on. Lets you build interfaces out of components that react to user input. Next.js is a flavor of React with everything else bolted on.
JavaScript with type checking. Catches a whole class of bugs before they ship — "this function expects a string, you gave it a number." The standard for production web apps.
The engine that runs JavaScript outside the browser — on your laptop, on Vercel's servers. Everything above this is JavaScript-based and needs Node.js to actually run.
The platform everything sits on. Push a commit to GitHub, Vercel builds the whole stack and serves it to users. Made by the same people as Next.js — which is part of why we paired them.
Supabase
Postgres database with auth, file storage, and a clean SDK on top. Where we'll store the post-call analysis, recruiter best-practices, and the running list of "what good looks like" per role.
ElevenLabs
The agent itself. The conversation runs through an ElevenLabs Conversational AI agent — voice on top, real-time transcript, post-call analysis to extract structured data into Supabase.
Vite
Front-end-only alternative to Next.js — faster dev server, but you have to wire your own backend.
Plain CSS
Hand-written stylesheets, no utilities. Fine for small projects; tedious at scale.
MUI / Chakra
Pre-built component libraries that ship as packages. Faster to start, harder to customize than shadcn.
Netlify
Other hosting platforms. Vercel-equivalent for most use cases, but less Next.js-native.
Render / Railway
Hosting for apps that need long-running processes or custom containers — beyond what Vercel's serverless model handles.
Next.js
→
ElevenLabs agent
→
Supabase
→
Vercel (hosted)
Jake suggests they take an idea from nothing to live, together — so Tanner can see the process, not just the result.
A knowledge-base-driven agent that knows what "good" looks like per role — informed by hiring managers, enhanced by recruiters, learns over time. Employees can ask: "I know someone with X skills — what fits?"
Interview training for senior hires — consistent pitch, evaluated interviewers. Saved for a later session; the referral agent is the one we're building today.
Jake nudges Tanner from data-architecture into user experience. Before deciding what data to store, decide what the person sees.
All this stuff is just a database plus intelligence on top. Once that clicks, the architecture writes itself.
Started typing interview-agent, Tanner suggested referral-agent, Jake renamed it live. Five seconds, no friction.
Next.js is what Vercel builds and what most of ElevenLabs' marketing pages run on. The pairing is the path of least resistance.
Load /vercel:nextjs, /frontend-design, and /agents so the agent bakes the cake the right way — Next.js best-practices, polished UI defaults, ElevenLabs agent SDK conventions.
Shift-tab into plan mode. Plan mode forces introspection and research before any code gets written — for greenfield work, that's the difference between a thought-out architecture and chaos.
Jake writes the full brief in one go: agent that interviews referrers, knowledge base of openings + best practices, recommendation back to the user, nice UI on the public side, admin dashboard with post-call analysis, Supabase on the back, trends over time.
Claude returns the architecture: Next.js App Router + TS + React 19 + Tailwind + shadcn + Supabase + ElevenLabs SDK. Tanner reads through the tech-stack section as Jake explains each piece in plain English.
Conflict popped up. We pause here — the plan is ready, the stack is decided, the skills are loaded. Next time: hand the plan to Claude and run it.
This was a clean stop point — the architecture plan had just rendered, nothing was half-built, nothing was broken. Next session we resume by re-loading the same three skills, opening the saved plan, and asking Claude to execute it.
Watching the agent get built, with checkpoints to stop and ask questions. No new decisions to make — the architecture is settled.
Re-load the skills
Run /vercel:nextjs, /frontend-design, and /agents in Claude Code so the assistant has the same context it had last time.
Open the saved plan
The architecture plan lives at ~/.claude/plans/peppy-wondering-sunset.md. Worth a quick re-read so we both remember the shape of what we're building.
Execute
Hand the plan to Claude. Jake will narrate each phase — scaffold, then Supabase schema, then the agent wiring, then the UI — and pause for questions wherever something is worth slowing down on.
