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:

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 (span 2/3) + Top plans (span 1/3)
- Bottom: Recent transactions table (full width)

Use shadcn/ui components. Responsive design.
Loading skeletons for all data.

Building APIs First

I always build the API layer before the UI. Why? Because Claude is better at backend code than frontend styling. Get the data layer right, then polish the UI.

Build me the API route for fetching dashboard stats.

Endpoint: GET /api/dashboard/stats
Authentication: Required (NextAuth session)

Response type:

typescript
interface DashboardStats {
mrr: number;
mrrChange: number; // percentage
activeSubscribers: number;
churnRate: number;
totalRevenue: number;
revenueData: Array<{ month: string; revenue: number }>;
topPlans: Array<{ name: string; subscribers: number; revenue: number }>;
recentTransactions: Array;
}

Use Prisma queries with proper aggregations. Cache the response for 5 minutes.

plaintext

The Iteration Loop

Here's my actual workflow during Phase 3:

1. Prompt → Get code from Claude
2. Paste → Into the right file
3. Run → Check for errors
4. Paste errors → Back to Claude
5. Fix → Apply the fix
6. Repeat → Until it works

This loop is fast. Each iteration takes 2-5 minutes. I usually need 3-5 iterations per feature.

Pro tip: Always tell Claude the exact error message. Don't say "it doesn't work." Paste the terminal output.

Phase 4: Polish (45 Minutes)

The last phase is about making your app feel professional.

Error Handling

Review my codebase and add:
1. Error boundaries for every page (React Error Boundaries)
2. Loading states (skeletons) for every data-fetching component
3. Toast notifications for success/error states
4. 404 and 500 error pages
5. Input validation on all forms

Use shadcn/ui Sonner for toasts, its Skeleton component for loading states.

plaintext

CSS Polish

I need help polishing the UI:

Current issues:
1. Cards look flat — add subtle shadows and hover effects
2. The chart doesn't align with the stat cards
3. Mobile layout breaks on the transactions table
4. The sidebar overlaps content on tablets
5. Dark mode colors need adjustment

Fix each issue. Here's my current TailwindCSS config: [paste config]

plaintext

Edge Cases

What edge cases should I handle for:
1. User with 0 subscriptions (empty state)
2. Revenue data with gaps (missing months)
3. Very large numbers (formatting)
4. Slow API responses (timeouts)
5. Concurrent updates (race conditions)

Give me code for each scenario.

plaintext

Phase 4 output: A polished, production-ready app that handles errors gracefully and looks great.

Real Results: My 3h42m Build

Here's my actual timeline for the subscription dashboard:

The key insight: I spent 90% of my time reviewing and testing, not writing code. Claude wrote the code; I was the architect and QA.

5 Rules That Made This Work

Rule 1: Be Specific, Not Vague

❌ "Build a dashboard with charts"
✅ "Build a dashboard page with 3 stat cards showing MRR, subscriber count, and churn rate. Use Recharts for a line chart showing 12-month revenue trend."

Rule 2: Provide Context, Not Just Commands

Always tell Claude:

• Your tech stack and versions
• Your existing code structure
• Your data models
• Any constraints (performance, accessibility, etc.)

Rule 3: Build Small, Iterate Fast

Don't ask Claude to build the entire app in one prompt. Build one feature at a time, test it, then move on.

Rule 4: Use AI for Strengths, Not Everything

Claude is amazing at:

• ✅ Boilerplate code
• ✅ Database queries
• ✅ Type definitions
• ✅ Error handling
• ✅ Documentation

Claude is okay at:

• ⚠️ Complex UI layouts (needs iteration)
• ⚠️ CSS animations (needs specific direction)

Claude struggles with:

• ❌ Understanding your brand's visual identity
• ❌ Making UX decisions about user flow
• ❌ Knowing your users' preferences

Rule 5: Review Everything, Trust Nothing

I read every line Claude generates. Not because it's wrong — it's usually right — but because understanding the code is how you become a better developer.

The Complete Prompt Cheat Sheet

Here are the prompts I use for every project, ready to copy:

Project Init

I'm building [PRODUCT DESCRIPTION]. 
Tech stack: [LIST]
Give me: database schema, API routes, component hierarchy, and build order.

plaintext

Feature Build

Build [FEATURE]. Context: [STACK + MODELS]. Requirements: [LIST].
Give me: API route, component, Prisma queries, edge cases.

plaintext

Debug

I got this error: [PASTE ERROR]
Here's my code: [PASTE CODE]
What's wrong and how do I fix it?

plaintext

Polish

Review [COMPONENT] for: error handling, loading states, accessibility, edge cases, performance.

What's Next?

This workflow isn't limited to dashboards. I've used it to build:

• E-commerce storefronts
• Blog platforms
• API integrations
• Internal tools
• Even a small CRM

The key is the structure: plan → scaffold → build → polish. Follow this, and you'll ship faster than you ever thought possible.

One last thing: This only works if you're a decent developer yourself. Claude amplifies your skills — it doesn't replace them. If you can't architect a solution or spot a bug, AI won't save you.

But if you're a solid mid-level developer? This workflow will make you 5-10x more productive. That's not hype — that's what my last 3 months of projects prove.

Have questions about this workflow? Drop a comment — I'm happy to share more details about any phase.

If you found this helpful, follow me for more AI-assisted development content. I share real projects, real timelines, and real code.