DEV Community

Suifeng023
Suifeng023

Posted on

How I Use Claude to Build Full-Stack Apps in Under 4 Hours — The Complete Workflow

#ai #webdev #productivity #claudodev

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 (takes 2/3) + top plans (takes 1/3)
- Bottom: Recent transactions table

Style: Clean, minimal, white background with subtle shadows.
Use shadcn/ui Card components for everything.
Enter fullscreen mode Exit fullscreen mode

The Key Rule: One Feature at a Time

I never ask Claude to "build the whole app." I ask it to build one feature with full context. Then I test it, commit it, and move on.

This is the biggest productivity secret:

  • ✅ Narrow, deep prompts = high-quality, working code
  • ❌ Broad, shallow prompts = generic, broken code

Example: Building the Stripe Webhook Handler 

Write a Stripe webhook handler for Next.js 14 App Router.

Events to handle:
1. checkout.session.completed — activate subscription
2. customer.subscription.updated — update subscription status
3. customer.subscription.deleted — cancel subscription
4. invoice.payment_failed — mark as past due

Requirements:
- Verify the Stripe webhook signature
- Use Prisma transactions for data updates
- Return 200 for all events (even unhandled ones)
- Log unhandled events for monitoring

Give me the complete route.ts file.
Enter fullscreen mode Exit fullscreen mode

Phase 4: Polish (45 Minutes)

The last phase is where good apps become great.

Error Handling 

Review this code and add comprehensive error handling:
[paste code]

For each function, add:
1. Input validation (Zod)
2. Try/catch with specific error types
3. User-friendly error messages
4. Proper HTTP status codes
5. Logging for debugging
Enter fullscreen mode Exit fullscreen mode

Loading States 

Add loading states to all components:
1. Skeleton loaders for data-fetching components
2. Button disabled states during mutations
3. Toast notifications for success/error
4. Optimistic updates for mutations
Enter fullscreen mode Exit fullscreen mode

Edge Cases 

What edge cases should I handle for [FEATURE]?
List them all and write the code for each one.
Enter fullscreen mode Exit fullscreen mode

Accessibility 

Review this component for accessibility:
[paste component]

Fix any issues with:
- ARIA labels
- Keyboard navigation
- Screen reader support
- Focus management
- Color contrast
Enter fullscreen mode Exit fullscreen mode

The Prompt Engineering Principles

After 50+ projects with Claude, here are the principles that make the biggest difference:

1. Context Is King 

❌ "Build me a login page"
✅ "Build a login page using NextAuth.js credentials provider. 
    The database uses Prisma with an Adapter. 
    Email verification is required. 
    Rate limit to 5 attempts per minute.
    Redirect to /dashboard on success, show error on /login?error=failed."
Enter fullscreen mode Exit fullscreen mode

2. Show, Don't Tell 

❌ "Make it look nice"
✅ "Style it like Linear.app's interface — clean, 
    lots of whitespace, monospace fonts for data, 
    subtle hover states, no borders on cards (use shadows instead)."
Enter fullscreen mode Exit fullscreen mode

3. Ask for Tests 

❌ "Build the function"
✅ "Build the function and write 10 test cases 
    covering: happy path, empty input, invalid types, 
    boundary values, concurrent access, and error states."
Enter fullscreen mode Exit fullscreen mode

4. Iterate, Don't Regenerate

Instead of asking Claude to rewrite from scratch:

❌ "This doesn't work, try again"
✅ "The chart renders but the tooltips are showing 
    undefined values. I think the issue is in the 
    CustomTooltip component on line 42. 
    The data shape is: { month: string, revenue: number }.
    Fix the tooltip to display formatted currency."
Enter fullscreen mode Exit fullscreen mode

Real Results: Before vs After

Metric Before Claude Workflow After Claude Workflow
Time to prototype 2-3 weeks 3-4 hours
Lines of code / hour ~50 ~200 (reviewed)
Bugs in first version 15-20 3-5
Time spent debugging 40% of dev time 10% of dev time
Features per sprint 3-5 8-12

What AI Can't Do (Yet)

Let me be honest about limitations:

  • Architecture decisions — AI can suggest, but you need to evaluate trade-offs
  • Business logic understanding — AI doesn't know your domain
  • Code review — You must understand what AI generates
  • Production debugging — Complex, multi-system issues still need human reasoning
  • Security — Always review AI-generated auth and data handling code

The Bottom Line

Using Claude effectively isn't about replacing developers. It's about removing the 80% of work that's repetitive, well-documented, and formulaic — so you can spend your time on the 20% that requires real engineering judgment.

The 4-hour framework works because it mirrors how senior engineers already think: plan first, build systematically, polish last. Claude just makes each phase 5-10x faster.

Try it on your next project. Time yourself. I'd love to hear your results.

Have you used AI to accelerate your development workflow? What worked and what didn't? Drop a comment below! 👇

Top comments (0)