You're building an inventory and order management system for a corporate dental-fabrication lab in Alexandria, Sydney — a full-stack application with database, API, and frontend.
The discipline skills: PostgreSQL schema design, Prisma ORM, Next.js API routes with proper HTTP status codes, server and client components with App Router, React Testing Library, CSP/CORS/CSRF configuration, structured logging, and error tracking with Sentry.
The AI-direction lesson: the work is now complex enough that your own review has a blind spot. You've been looking at the same code, making the same assumptions, normalizing the same patterns. A second AI model — one with no context about why you made your choices — will catch things you can't see anymore. Cross-model review works because fresh eyes have different failure modes than yours.
Your Role
You are building the full stack: database, API, and frontend.
The planning pipeline is the same as last time — PRD, design decisions, CLAUDE.md, ticket breakdown — but the terrain is fundamentally harder. A database schema determines what the API can return, the API determines what the frontend can display, and a mistake in the schema propagates through every layer above it.
You direct Claude Code through the entire build. Directing a backend requires different precision. "Build me an API for managing orders" is not enough — you specify data relationships, validation rules, and status codes before any code gets generated.
What's New
Last time you built an interactive React showcase with components, state management, and automated tests. You created the planning artifacts yourself for the first time, deployed to Vercel, and handled a scope addition from the client.
Three things change.
You build a backend. PostgreSQL for the database, Prisma for the ORM, Next.js API routes for the endpoints. The schema is the most consequential decision you'll make — it determines everything downstream. Get it wrong and you're undoing work across three layers.
The frontend becomes multi-page. Next.js App Router replaces the single-page React app. Server components and client components are a new architectural choice — where code executes (server vs browser) matters for performance, data access, and hydration behavior. You'll need to specify these constraints to Claude Code before it generates pages.
Security becomes a system concern. CORS exists because your frontend and API may run on different origins. CSRF exists because your order form modifies data. CSP exists because you now have enough JavaScript surface area to matter. These protections interact.
The hard part is the contract between layers. When the API returns a different shape than the frontend expects, the page fails silently — the server logs show nothing wrong. Testing the API against its contract is a different activity from testing the frontend against the design, and you need both.
Tools
- Claude Code — AI coding agent, VS Code extension. Primary tool for planning and building.
- Git and GitHub — version control, remote repo, issues, project board.
- VS Code with Claude Code extension and ESLint.
- Next.js with App Router — multi-page framework with server-side rendering. New.
- PostgreSQL — relational database. New.
- Prisma — database ORM and migration tool. New.
- React Testing Library — component testing with accessibility-first queries. New.
- Vitest — test runner. Continuing.
- Tailwind CSS — utility-first CSS framework. Continuing.
- Sentry — error tracking and alerting. New.
- Chrome DevTools Performance profiler — flame chart analysis. New.
- Vercel CLI — deployment to production. Continuing.
Materials
- Nicola's email — her requirements in her own words. Five numbered items, no ambiguity about what she wants, some gaps in what she hasn't thought about.
- Pipeline templates — PRD template, design decisions template (with a new Data Layer section), ticket breakdown template. Same structure as last time, applied to harder terrain.
- CLAUDE.md — project governance file with the full ticket list, tech stack, and verification targets.
- Seed data — six practices, twelve materials lots, fifteen cases, five orders. Realistic data to populate the database so you can see the system working from the start.
- API contract — endpoint documentation with request/response shapes, status codes, and error responses. The contract your implementation has to honor.