How I Use Claude to Build Full-Stack Apps in Under 4 Hours — The Complete Workflow
Three months ago, I spent 3 weeks building a SaaS dashboard. Last week, I built a more complex one in 3 hours and 42 minutes — using Claude as my co-pilot.
The difference wasn't just "using AI." It was a specific, repeatable workflow that eliminates the bottlenecks most developers hit when coding with AI.
Here's exactly how I do it — step by step, with real prompts.
The Problem: Most People Use AI Wrong
I see developers making the same mistakes:
- ❌ Pasting entire codebases into Claude and hoping for the best
- ❌ Using vague prompts like "build me a dashboard"
- ❌ Not breaking down the problem before asking AI
- ❌ Copy-pasting AI output without understanding it
- ❌ Not using AI for the things it's actually best at
The secret? AI is a junior developer that never sleeps, never gets bored, and has read every Stack Overflow answer ever written. But like any junior dev, it needs clear direction.
My 4-Hour Framework
I divide every project into 4 phases of ~1 hour each:
Phase
Time
What AI Does
What I Do
1. Blueprint
60 min
Generates architecture, tech choices
Define requirements, review plan
2. Scaffold
60 min
Generates boilerplate, database schema
Set up repos, configure env
3. Build
60 min
Writes core feature code
Review, test, iterate
4. Polish
45 min
CSS, error handling, edge cases
Final review, deploy
Let me walk through each phase.
Phase 1: Blueprint (60 Minutes)
Before writing a single line of code, I spend an hour planning with Claude. This is the most important phase and the one most people skip.
Step 1: Define the Problem
I start with a clear, structured prompt:
I'm building a SaaS product. Here's what I need:
Product: A subscription analytics dashboard
Users: SaaS founders who want to track MRR, churn, and LTV
Data Source: Stripe API
Tech Stack: Next.js 14 (App Router), TypeScript, Prisma, PostgreSQL, TailwindCSS
Timeline: Need a working prototype today
Give me:
1. A complete database schema with all relationships
2. API route structure (REST endpoints)
3. Component hierarchy (what pages/components I need)
4. The order I should build things in (dependency graph)
5. Potential gotchas I might hit
Enter fullscreen mode Exit fullscreen mode
Why this works: Claude generates a concrete plan. No more "I'll figure it out as I go." You get a roadmap.
Step 2: Generate the Database Schema
Then I drill into each part:
Based on the schema you generated, write:
1. Complete Prisma schema with all models, relations, and indexes
2. Seed data (at least 20 records per model) that looks realistic
3. Migration SQL if needed
Format as a single `schema.prisma` file I can copy directly.
Enter fullscreen mode Exit fullscreen mode
Step 3: API Contract
For each API route, give me:
1. The endpoint path and HTTP method
2. Request body/params type (TypeScript interface)
3. Response type (TypeScript interface)
4. Authentication requirement
5. Brief description of what it does
Format as a TypeScript file with all types exported.
Enter fullscreen mode Exit fullscreen mode
Phase 1 output: You now have a complete spec — database schema, API types, component list, and build order. This would take 2-3 days to produce manually.
Phase 2: Scaffold (60 Minutes)
Now let AI generate all the boring stuff.
Generate Project Structure
Set up a Next.js 14 project with:
- App Router (not Pages Router)
- TypeScript strict mode
- TailwindCSS with these custom colors: [your palette]
- Prisma with PostgreSQL
- NextAuth.js for authentication (GitHub + email)
- shadcn/ui component library
Give me the exact commands to run and the folder structure.
Enter fullscreen mode Exit fullscreen mode
Generate Type Definitions
Create a complete `types/index.ts` file that includes:
- All database model types (from our schema)
- All API request/response types
- All component prop types
- Utility types (pagination, API response wrapper, etc.)
Make it fully typed. No `any` allowed.
Enter fullscreen mode Exit fullscreen mode
Generate Utility Functions
Write these utility functions:
1. `apiResponse<T>(data, status, message)` — standardized API response
2. `validateRequest<T>(schema, body)` — Zod validation wrapper
3. `paginate(query, page, limit)` — cursor-based pagination
4. `formatCurrency(amount, currency)` — i18n currency formatting
5. `calculateMRR(subscriptions)` — Monthly Recurring Revenue calc
6. `calculateChurn(subscriptions, period)` — Churn rate calc
Each function should be production-ready with proper error handling.
Enter fullscreen mode Exit fullscreen mode
Phase 2 output: A complete project skeleton with types, utils, auth, and database — ready to build features on top of.
Phase 3: Build (60 Minutes)
This is where the magic happens. I build features one at a time, using a specific prompt pattern.
The Feature Prompt Pattern
For every feature, I use this template:
Build me the [FEATURE NAME] feature.
Context:
- Tech stack: Next.js 14, TypeScript, Prisma, TailwindCSS, shadcn/ui
- Database schema: [paste relevant models]
- API types: [paste relevant types]
Requirements:
1. [Specific requirement 1]
2. [Specific requirement 2]
3. [Specific requirement 3]
Give me:
1. The API route code (app/api/...)
2. The React component code
3. Any Prisma queries needed
4. Test cases for edge cases
Important rules:
- Use Server Components by default, Client Components only when needed
- Handle loading states and errors
- Use optimistic updates where appropriate
Enter fullscreen mode Exit fullscreen mode
Example: Building the Dashboard Page
Build me the main dashboard page.
It should show:
1. Revenue chart (line chart, last 12 months) — use Recharts
2. Current MRR card with % change from last month
3. Active subscribers count
4. Churn rate card
5. Top 5 plans by revenue (horizontal bar chart)
6. Recent transactions table (last 10, with pagination)
Layout:
- Top row: 3 stat cards
- Middle row: Revenue chart (8 cols) + sidebar (4 cols)
- Bottom row: Transactions table
Use shadcn/ui Card components. Make it responsive.
Enter fullscreen mode Exit fullscreen mode
Key insight: Notice how specific I am. I don't say "make a nice dashboard." I specify every component, every data source, every layout detail. The more specific you are, the better Claude performs.
Phase 4: Polish (45 Minutes)
This is the phase that separates "prototype" from "production."
Error Handling Pass
Review all my API routes and add:
1. Proper error handling (try/catch with meaningful messages)
2. Input validation (Zod schemas for every endpoint)
3. Rate limiting consideration
4. Authentication checks on protected routes
5. Proper HTTP status codes (not just 200 and 500)
Enter fullscreen mode Exit fullscreen mode
Edge Cases Pass
For each feature I built, list the edge cases I should handle:
- Empty states (no data, no results)
- Loading states (skeletons, spinners)
- Error states (network errors, API failures)
- Permission states (unauthorized, forbidden)
- Pagination edge cases (last page, empty pages)
Enter fullscreen mode Exit fullscreen mode
CSS Polish
Review the UI and improve:
1. Add subtle animations (transitions on hover, page load)
2. Ensure consistent spacing (using Tailwind's spacing scale)
3. Add dark mode support
4. Check responsive behavior on mobile/tablet/desktop
5. Add loading skeletons for async data
Enter fullscreen mode Exit fullscreen mode
The Prompts That Save Me Hours
Here are the specific prompts I reuse across every project:
1. The "Fix This Error" Prompt
I got this error:
[paste full error message]
Context: I'm using [tech stack]. The error happens when [specific action].
Give me:
1. What's causing it (explain in simple terms)
2. The exact fix (code I can copy)
3. How to prevent it in the future
Enter fullscreen mode Exit fullscreen mode
2. The "Review My Code" Prompt
Review this code for:
1. Security vulnerabilities
2. Performance issues
3. TypeScript type safety
4. Best practices violations
5. Potential bugs
[paste code]
Rate each category 1-10 and explain issues.
Enter fullscreen mode Exit fullscreen mode
3. The "Refactor This" Prompt
Refactor this code to be:
1. More readable (clear naming, small functions)
2. More performant (fewer renders, memoization)
3. More maintainable (separation of concerns)
4. Better typed (no `any`, proper generics)
[paste code]
Show the refactored version with comments explaining changes.
Enter fullscreen mode Exit fullscreen mode
4. The "Write Tests" Prompt
Write comprehensive tests for this [component/function]:
[paste code]
Include:
1. Happy path tests
2. Edge cases (empty input, null, undefined)
3. Error scenarios
4. Boundary conditions
Use Jest + React Testing Library. Format as a test file.
Enter fullscreen mode Exit fullscreen mode
Real Results From This Workflow
Here's what I've built using this exact framework:
Project
Time
What It Does
Complexity
SaaS Dashboard
3h 42m
Analytics, payments, user management
High
E-commerce Store
2h 15m
Products, cart, Stripe checkout
Medium
Blog Platform
1h 50m
CRUD posts, auth, comments
Low-Medium
API Wrapper
2h 30m
REST API with docs, rate limiting
Medium
Internal Tool
1h 20m
Data export, filters, CSV download
Low
Total: ~12 hours for 5 production apps that would normally take 4-6 weeks.
Common Pitfalls (I've Hit Them All)
Pitfall 1: The "Conversation Drift"
After 30+ messages, Claude loses context. Solution: Start a new conversation every major phase. Keep a context.md file with current state.
Pitfall 2: The "Copy Paste Trap"
You paste Claude's code without reading it. Now you have bugs you don't understand. Solution: Always read the code. Ask Claude to explain anything you don't get.
Pitfall 3: The "Scope Creep"
Every AI feature seems easy, so you keep adding more. Solution: Write down requirements BEFORE talking to Claude. Stick to the list.
Pitfall 4: The "Magic Prompt" Myth
People search for the "one perfect prompt." It doesn't exist. Solution: Good prompts are specific, contextual, and iterative. Build up context over a conversation.
Tools I Use Alongside Claude
- Cursor — IDE with Claude built in. Best AI coding experience.
- Claude Artifacts — For quick UI prototyping and visualization
- Excalidraw — For architecture diagrams (Claude can describe what to draw)
- Git — Commit after each working feature. Claude can't help you if you don't version control.
- Vercel — One-click deploy for Next.js projects
The Productivity Math
Traditional developer speed: ~50 lines of production code per hour
With Claude workflow: ~500 lines of production code per hour (after review)
That's a 10x multiplier — but only if you follow a structured approach like this one.
The key insight: Claude doesn't make you faster at coding. Claude makes you faster at planning, scaffolding, and iterating — which is where 80% of development time actually goes.
Want the Complete Prompt Library?
I've compiled 500+ production-ready Claude prompts organized by phase, feature type, and tech stack into The Developer Prompt Bible. It covers:
- ✅ Full-stack app blueprints (Next.js, Django, Rails)
- ✅ Database schema generation (Prisma, Drizzle, SQL)
- ✅ API design patterns (REST, GraphQL)
- ✅ Component generation (React, Vue, Svelte)
- ✅ Testing prompts (Jest, Pytest, Cypress)
- ✅ DevOps and deployment (Docker, CI/CD, AWS)
- ✅ Code review and refactoring
- ✅ Security audit prompts
If you build with AI, this will save you hundreds of hours.
For design-focused folks, I also put together the Midjourney Design Pack with 200+ prompts for commercial design work.
What's your AI development workflow? I'm always looking to improve mine. Drop a comment below. 👇
If you found this useful, follow me for more AI development content. I write about practical AI workflows every week.