DEV Community

Suifeng023
Suifeng023

Posted on

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

#webdev #ai #productivity #tutorial

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 (MRR, Subscribers, Churn Rate)
- Middle: Revenue chart (full width) + Top plans (sidebar)
- Bottom: Recent transactions table

Use shadcn/ui Card components for the stat cards.
Enter fullscreen mode Exit fullscreen mode

This single prompt gives you a complete dashboard page with charts, data, and proper layout. No piecing together fragments.

Key Build Principles

  1. One feature at a time — never ask Claude to build multiple features in one prompt
  2. Always paste context — Claude doesn't remember previous conversations
  3. Specify the component library — reduces guesswork and inconsistency
  4. Ask for tests — forces the AI to think about edge cases

Phase 4: Polish (45 Minutes)

The last phase is where good becomes great.

Error Handling 

Review all API routes I've built. For each one:
1. Add proper error handling with try/catch
2. Return appropriate HTTP status codes (400, 401, 403, 404, 500)
3. Add input validation with Zod
4. Add rate limiting considerations
5. Log errors properly
Enter fullscreen mode Exit fullscreen mode

CSS and Responsiveness 

Make the entire app responsive:
1. Mobile-first approach
2. All charts should resize properly
3. Tables should become cards on mobile
4. Navigation should collapse to a hamburger menu
5. Test at 320px, 768px, 1024px, 1440px widths
Enter fullscreen mode Exit fullscreen mode

Performance 

Optimize the app:
1. Add loading skeletons for all data-fetching components
2. Implement proper React caching (not just fetching every render)
3. Add pagination to all list endpoints
4. Optimize images (use next/image)
5. Add proper meta tags for SEO
Enter fullscreen mode Exit fullscreen mode

The Results

Using this framework, I've built:

Project Time Complexity What I'd Estimate Manually
SaaS Dashboard 3h 42m High 2-3 weeks
E-commerce Admin 4h 15m Medium-High 1-2 weeks
Blog Platform 2h 30m Medium 1 week
API Gateway 1h 55m Medium 3-5 days
Landing Page Builder 3h 10m High 2 weeks

Average speedup: ~20x faster than manual development.

Common Mistakes to Avoid

1. Trusting AI Output Blindly

Always review the generated code. Claude is smart but not perfect. I've caught:

  • Wrong Prisma query syntax
  • Missing error boundaries
  • Suboptimal SQL queries that would cause N+1 problems
  • Missing authentication checks

2. Not Understanding the Code

If you don't understand what Claude generated, ask it to explain. Don't just copy-paste. You'll need to debug and maintain this code.

Explain this code line by line. What does each part do?
Why was this approach chosen over alternatives?
What are the potential issues with this implementation?
Enter fullscreen mode Exit fullscreen mode

3. Skipping the Blueprint Phase

I've tried skipping straight to coding. Every time, I end up rewriting half the code because the architecture was wrong. The 60 minutes you spend planning saves you 10 hours of refactoring.

4. Not Version Controlling Prompt Iterations

Save your best prompts. I keep a prompts/ folder in each project with the prompts that produced the best results. This creates a personal "prompt library" that compounds over time.

The Prompt Library Concept

After 6 months of this workflow, I've built a prompt library organized by category:

prompts/
├── architecture/
│   ├── nextjs-saas.md
│   ├── api-design.md
│   └── database-schema.md
├── features/
│   ├── auth-nextauth.md
│   ├── dashboard-charts.md
│   ├── crud-operations.md
│   └── file-uploads.md
├── polish/
│   ├── error-handling.md
│   ├── responsive-design.md
│   └── performance.md
└── templates/
    ├── feature-request.md
    ├── code-review.md
    └── testing.md
Enter fullscreen mode Exit fullscreen mode

Now when I start a new project, I'm not writing prompts from scratch. I'm assembling proven prompts from my library. This alone cuts my time by another 30%.

When NOT to Use This Workflow

AI isn't always the right tool:

  • Simple CRUD apps — sometimes a framework like Rails or Django gets you there faster
  • Highly regulated domains — healthcare, finance may require manual compliance reviews
  • Learning projects — you won't learn if you don't struggle
  • Production systems with legacy code — AI doesn't know your undocumented quirks

Final Thoughts

The 4-hour framework isn't about replacing developers. It's about amplifying what developers do best: thinking about architecture, making design decisions, and solving novel problems.

Claude handles the implementation. You handle the strategy.

If you're a solo founder or indie hacker, this workflow can be the difference between shipping in a weekend and shipping in a quarter.

Try it on your next project. Time yourself. See how fast you can go.

What's the fastest you've ever built something with AI? I'd love to hear your results in the comments.

Top comments (0)