terminal
Claude Code
Claude Code25 Feb 20268 min phút đọc

Workflow thực chiến với Claude Code: Từ ý tưởng đến production trong 1 ngày

IS

ISC Team

ISC Vibe Marketplace

Bạn có một ý tưởng sản phẩm. Sau 8 tiếng, app đã live trên production. Nghe có vẻ phi thực tế? Với Claude Code và workflow đúng đắn, đây là điều hoàn toàn khả thi — và bài viết này sẽ hướng dẫn bạn từng bước.

Phase 1: Chuẩn bị (30 phút)

Bước 1: Viết CLAUDE.md đầu tiên

Trước khi code bất cứ thứ gì, viết CLAUDE.md để Claude hiểu context dự án của bạn:

# Task Manager App

## Tech Stack
- Next.js 15 (App Router)
- TypeScript (strict mode)
- Supabase (auth + database)
- Tailwind CSS

## Conventions
- Tất cả components phải có TypeScript types
- Server Components mặc định
- Atomic Design: atoms/ molecules/ organisms/
- Import từ barrel exports

## Database
- Dùng Supabase client từ @/lib/supabase
- RLS đã được enable — không bypass

## Trước khi commit
1. npm run lint (phải pass)
2. npm run build (không có errors)

Bước 2: Setup project

# Yêu cầu Claude setup project
"Setup Next.js 15 project với Supabase, TypeScript strict, Tailwind.
 Tạo folder structure theo Atomic Design.
 Setup environment variables template."

Phase 2: Core Features (4-5 tiếng)

Bước 3: Database Schema First

Luôn bắt đầu từ data model. Mô tả schema bằng ngôn ngữ tự nhiên, Claude sẽ tạo SQL migrations:

"Tạo Supabase migration cho app task manager:
- Table tasks: id, title, description, status, priority, due_date, user_id
- Table projects: id, name, color, user_id
- Tasks thuộc về projects (foreign key)
- RLS: user chỉ thấy tasks/projects của mình
- Indexes cho performance: user_id, status, due_date"

Bước 4: Implement theo từng feature

Đừng yêu cầu Claude build toàn bộ app một lúc. Chia nhỏ thành features độc lập:

Feature 1: "Build TaskCard component — hiển thị title, priority badge,
           due date, checkbox để mark complete. Dùng atoms từ Button và Badge."

Feature 2: "Build TaskList với infinite scroll — fetch từ Supabase,
           filter theo project/status, sort theo priority."

Feature 3: "Build AddTaskModal — form với validation, tích hợp
           Supabase insert, optimistic update UI."

Bước 5: Dùng /plan trước khi implement

Với features phức tạp, luôn ask Claude plan trước:

"Trước khi code, hãy lên plan chi tiết cho real-time collaboration feature:
 - Cần những components nào?
 - Data flow như thế nào?
 - Supabase Realtime subscribe ở đâu?
 - Edge cases cần handle?"

→ Review plan → Approve → "Giờ implement theo plan đã approve"

Phase 3: Polish & Testing (2 tiếng)

Bước 6: Dùng Subagent để review

"Spawn một subagent để review toàn bộ codebase:
 1. Security: RLS đã đúng chưa? Authentication vulnerabilities?
 2. Performance: N+1 queries? Unnecessary re-renders?
 3. Type safety: Any type ở đâu? Missing types?
 Báo cáo findings và suggestions."

Bước 7: Hook tự động cho quality

# Setup hooks để catch issues sớm
{
  "hooks": {
    "post-tool-use": [
      {
        "matcher": { "tools": ["Write", "Edit"] },
        "handler": {
          "command": "npm run lint --fix && npx tsc --noEmit"
        }
      }
    ]
  }
}

Phase 4: Deploy (30 phút)

Bước 8: Tạo /deploy skill

# ~/.claude/skills/deploy.md
# /deploy — Deploy to Production

## Checklist bắt buộc
1. [ ] npm run build — không có errors
2. [ ] npm run lint — pass
3. [ ] Kiểm tra env variables đã set trên Vercel
4. [ ] Review database migrations mới nhất
5. [ ] Xác nhận với user trước khi push

## Deploy command
vercel --prod

## Post-deploy
- Kiểm tra https://app.example.com
- Xem Vercel deployment logs
- Test auth flow trên production
# Gọi khi sẵn sàng
/deploy

Tips Quan Trọng Nhất

lightbulb

Commit thường xuyên. Sau mỗi feature nhỏ, ask Claude commit với message mô tả rõ ràng. Dễ rollback khi AI tạo ra lỗi.

  • Một feature một lúc: Đừng yêu cầu quá nhiều thứ trong một prompt
  • Review output: Đọc code quan trọng trước khi accept, đặc biệt security logic
  • Lưu context: CLAUDE.md cập nhật khi dự án thay đổi
  • Dùng /plan: Với features phức tạp, plan trước, code sau
  • Test as you go: Setup Hooks để tests chạy tự động

Kết Quả Thực Tế

Với workflow này, một developer có thể:

  • MVP trong 1 ngày làm việc (8 tiếng)
  • Full-stack app với auth, database, UI trong 2-3 ngày
  • Production-ready với testing và monitoring trong 1 tuần

Chìa khóa không phải là "làm ít hơn" — mà là focus đúng chỗ: Architecture, decision making, quality review. Còn implementation, Claude sẽ lo.