The Request
We asked Claude Code to build a full-stack application:
"Build me a full-stack todolist app with Next.js 14, TypeScript, Tailwind CSS, API routes for CRUD operations, and server actions. Make it actually work."
Starting conditions:
- Directory:
capture-session/ - Existing files: none
Why this request? A simple todo app triggers ~4 tool calls. Adding a "serious stack" (Next.js, TypeScript, API routes, validation) forces Claude through the full workflow: scaffolding, discovery, implementation, and testing.
Session Statistics
Tool Breakdown
Every tool call was captured via hooks logging to tool-calls.jsonl:
| Tool | Count | Purpose |
|---|---|---|
| TodoWrite | 5 | Task planning and progress tracking |
| Bash | 7 | Shell commands (npm, build, test) |
| Read | 3 | File discovery |
| Write | 6 | Creating new files |
| Edit | 1 | Modifying existing file |
Complete Tool Sequence
22 tool calls across 5 phases, captured in real-time:
Initialize Next.js → Install dependencies → Create API routes → Build UI components → Test application
--typescript --tailwind --eslint --app --src-dir --no-import-alias
Installing drag-and-drop libraries for sortable todos
Verify project structure was created correctly
Additional dependencies for unique ID generation
Mark initialization complete, activate: Create API routes
Check existing Tailwind configuration and base styles
Examine default page structure to understand patterns
Check root layout for metadata and font configuration
8 lines - TypeScript interface for Todo type
116 lines - Full CRUD API: GET, POST, PUT, DELETE handlers
Mark API complete, activate: Build UI components
85 lines - Individual todo with edit, complete, delete actions
206 lines - Main component with add form, filtering, drag-drop
27 lines - Root page rendering TodoList component
Update metadata title and description for Todo App
42 lines - Custom styles for todo items and animations
Mark UI complete, activate: Test application
Compile TypeScript, verify no build errors
Start development server on localhost:3000
Health check - verify server responds with 200
5/5 tasks marked as completed
Phase Analysis
Click each phase to see the detailed breakdown:
The Agentic Loop
This session ran the loop 22 times. Each iteration: decide → execute → observe → repeat.
Key patterns observed:
- Single-threaded - No swarms or competing agents. One flat message list, fully debuggable.
- Parallel when safe - 3 Read calls executed simultaneously (same timestamp). Tools parallelized when independent.
- TodoWrite as memory - 5 TodoWrite calls tracked progress. Working memory persists across tool calls.
Files Created
The final project structure:
Key Observations
Discovery before modification - Claude read 3 files before writing any code. Real developers do the same - understand the codebase first.
Verification at every phase - ls -la after scaffolding, npm run build after implementation, curl after starting the server. Trust but verify.
Edit vs Write distinction - 6 Write calls for new files, 1 Edit call for surgical change to existing file. Claude picks the right tool.
TodoWrite as execution plan - 5 TodoWrite calls throughout. Not just tracking - it's Claude's working memory for multi-step tasks.
Parallel tool execution - 3 Read calls at identical timestamps. Claude parallelizes independent operations for efficiency.
Want to understand the architecture behind this? Read our technical deep-dive into how Claude Code works.
