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
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.
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.
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.
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.
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.
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
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 (spanning 2 cols) + Churn card (1 col)
- Bottom row: Transactions table (full width)
Use shadcn/ui Card components. Make it responsive.
Key insight: Notice I'm not asking Claude to "build a dashboard." I'm specifying every detail — what charts, what data, what layout. The more specific you are, the less back-and-forth you need.
Build Order Matters
I don't build randomly. I follow the dependency graph from Phase 1:
- Auth first — login, signup, session management
- Data layer — API routes + Prisma queries
- Core pages — the main features users interact with
- Secondary features — settings, profile, etc.
- Polish — loading states, animations, error pages
Building in this order means every subsequent feature has what it needs.
Phase 4: Polish (45 Minutes)
The difference between "it works" and "it ships" is the last 45 minutes.
Error Handling
Go through every API route and component we built. Add:
1. Try-catch blocks with specific error messages
2. Loading skeletons for every data-fetching component
3. Empty states (when there's no data)
4. Error boundaries for each page
Use shadcn/ui Skeleton, Card, and Alert components.
Edge Cases
For the dashboard, handle these edge cases:
1. User has zero subscriptions — show empty state with CTA
2. API rate limit hit — show retry message
3. Date range has no data — show "no data" message on charts
4. Very large numbers — format as K/M/B (1.2K, 3.5M)
5. Negative growth — show red instead of green
Performance
Optimize the dashboard:
1. Add React.memo to expensive components
2. Use Next.js Image for any images
3. Add loading="lazy" to below-fold components
4. Server Components for data fetching (move fetch to server)
5. Add metadata for SEO
Phase 4 output: A production-ready app that handles errors gracefully and feels polished.
The Results Speak for Themselves
Here's what this workflow has produced:
| Project | Manual Time | AI-Assisted Time | Complexity |
|---|---|---|---|
| SaaS Dashboard | 3 weeks | 3h 42m | High |
| E-commerce Admin | 2 weeks | 2h 15m | Medium |
| Blog Platform | 1 week | 1h 50m | Low |
| CRM MVP | 4 weeks | 5h 20m | Very High |
Average speedup: ~10x faster.
And here's the thing — the AI-assisted versions weren't hacky prototypes. They had:
- ✅ Proper TypeScript types
- ✅ Error handling
- ✅ Responsive design
- ✅ Authentication
- ✅ Database migrations
- ✅ Seed data for testing
5 Tips to Make This Work for You
1. Spend More Time Planning
The #1 mistake is rushing to code. Spend 30-60 minutes planning with Claude before writing anything. It pays off 10x.
2. Be Obsessively Specific
Vague prompts = vague code. Instead of "add a chart," say "add a line chart showing MRR over the last 12 months, using Recharts, with tooltips showing exact values on hover."
3. Review, Don't Blindly Trust
AI makes mistakes. Read every line. Understand what it does. You're the senior dev reviewing the junior's PR.
4. Build Incrementally
Don't ask for the whole app at once. Build one feature, test it, then move to the next. Smaller context = better output.
5. Keep a Prompt Library
Save your best prompts. Reuse and refine them across projects. Your prompt library becomes your competitive advantage.
The Bigger Picture
This isn't about replacing developers. It's about amplifying what developers can do.
Instead of spending 3 weeks on a dashboard, I can:
- Build the dashboard in 4 hours
- Spend the rest of the week on features the AI can't do well (complex business logic, UX research, architecture decisions)
- Ship 5x faster than my competitors
The developers who learn to work with AI won't be replaced by AI. They'll replace the developers who don't.
What's Next?
In my next post, I'll cover:
- How to handle complex state management with AI assistance
- Testing strategies for AI-generated code
- When to use AI vs. when to code manually
Follow me to catch that one. And if you've used AI for development, I'd love to hear your workflow in the comments 👇
Have questions? Drop a comment or find me on Twitter/X. Let's build faster, together.
Top comments (0)