Cách Xây Dựng Demo với Claude Code: Vibecoding cùng Supabase và Vercel

Vibecoding là một mô hình phát triển phần mềm mới, trong đó lập trình viên hướng dẫn một tác nhân AI thông qua các chỉ dẫn bằng ngôn ngữ tự nhiên, để trí tuệ nhân tạo viết code thực tế. Thuật ngữ này được đặt ra bởi Andrej Karpathy (đồng sáng lập OpenAI và cựu Giám đốc AI tại Tesla) trong một tweet nổi tiếng vào tháng 2 năm 2025: "Có một loại coding mới mà tôi gọi là vibecoding, nơi bạn hoàn toàn đắm chìm vào cảm xúc, đón nhận sự tăng trưởng theo cấp số nhân, và quên đi rằng code thậm chí còn tồn tại."

Trong bài viết này, chúng ta sẽ xem cách xây dựng một demo hoàn chỉnh, hoạt động được sử dụng Claude Code làm tác nhân AI, Supabase làm backend (cơ sở dữ liệu, xác thực, API), và Vercel để triển khai — tất cả chỉ sử dụng gói miễn phí của các dịch vụ này.

1. Vibecoding Là Gì và Tại Sao Nó Mang Tính Cách Mạng

Vibecoding đại diện cho sự thay đổi mô hình cơ bản trong phát triển phần mềm. Thay vì viết code từng dòng, nhà phát triển:

1. Mô tả những gì họ muốn bằng ngôn ngữ tự nhiên.
2. Tác nhân AI tạo ra code hoàn chỉnh.
3. Nhà phát triển xem xét, kiểm thử và lặp lại.

Tại Sao Nó Hiệu Quả

• Tốc độ: dự án mất nhiều ngày có thể được xây dựng trong vài giờ.
• Khả năng tiếp cận: ngay cả những nhà phát triển không chuyên cũng có thể xây dựng sản phẩm hoạt động.
• Lặp lại nhanh: bạn có thể thử nghiệm ý tưởng và chuyển hướng nhanh hơn nhiều.
• Tập trung vào sản phẩm: bạn tập trung vào cái gì thay vì như thế nào.

Khi Nào Sử Dụng Vibecoding

Vibecoding hoàn hảo cho:

• Demo và MVP: nhanh chóng xây dựng prototype để xác nhận ý tưởng.
• Hackathon: tạo sản phẩm hoạt động chỉ trong vài giờ.
• Dự án phụ: khám phá công nghệ mới mà không cần đầu tư hàng tuần.
• Proof of Concept: chứng minh tính khả thi kỹ thuật cho các bên liên quan hoặc nhà đầu tư.

Cảnh báo: Vibecoding tuyệt vời cho demo và prototype. Đối với ứng dụng cấp production với yêu cầu bảo mật và khả năng mở rộng cao, việc xem xét kỹ lưỡng code được tạo ra vẫn là cần thiết.

2. Tech Stack: Claude Code + Supabase + Vercel

Claude Code

Claude Code là tác nhân coding AI của Anthropic. Nó hoạt động trực tiếp trong terminal của bạn và có thể:

• Đọc và hiểu toàn bộ codebase.
• Tạo, sửa đổi và xóa file.
• Thực thi lệnh terminal.
• Tương tác với API và dịch vụ bên ngoài.
• Quản lý phiên bản với Git.
• Tự động lặp lại trên lỗi và bug.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (Gói Miễn Phí)

Supabase là giải pháp thay thế mã nguồn mở cho Firebase, cung cấp:

• Cơ sở dữ liệu PostgreSQL: cơ sở dữ liệu quan hệ hoàn chỉnh.
• Xác thực: đăng nhập bằng email, Google, GitHub, v.v.
• API REST và Realtime: tự động tạo từ schema của bạn.
• Lưu trữ: cho file và hình ảnh.
• Edge Functions: hàm serverless.

Gói miễn phí bao gồm:

| Tài nguyên | Giới hạn miễn phí | |----------|-----------| | Cơ sở dữ liệu | 500 MB | | Lưu trữ | 1 GB | | Băng thông | 5 GB | | Lượt gọi Edge Function | 500K/tháng | | Người dùng đã xác thực | Không giới hạn | | Dự án | 2 dự án hoạt động |

Vercel (Gói Miễn Phí)

Vercel là nền tảng triển khai hoàn hảo cho ứng dụng Next.js:

• Triển khai tự động từ GitHub.
• Triển khai preview cho mỗi nhánh và PR.
• CDN toàn cầu để có hiệu suất tối ưu.
• Serverless Functions đi kèm.
• Phân tích cơ bản miễn phí.

Gói miễn phí bao gồm:

| Tài nguyên | Giới hạn miễn phí | |----------|-----------| | Băng thông | 100 GB/tháng | | Thực thi Serverless Function | 100 GB-giờ/tháng | | Build | 6.000 phút/tháng | | Dự án | Không giới hạn | | Triển khai | Không giới hạn |

3. Thiết Lập Ban Đầu: Chuẩn Bị Môi Trường

Điều Kiện Tiên Quyết

Trước khi bắt đầu, hãy đảm bảo bạn có:

• Node.js 18+ đã cài đặt.
• Git đã cấu hình.
• Tài khoản GitHub.
• Tài khoản Supabase (miễn phí tại supabase.com).
• Tài khoản Vercel (miễn phí tại vercel.com).
• Claude Code đã cài đặt (npm install -g @anthropic-ai/claude-code).

Bước 1: Tạo Dự Án

Mở terminal và khởi động Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

Bây giờ bạn có thể bắt đầu đưa ra chỉ dẫn bằng ngôn ngữ tự nhiên cho Claude Code:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code sẽ tự động thực thi:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Bước 2: Cấu Hình Supabase

1. Truy cập supabase.com và tạo dự án mới.
2. Ghi chú Project URL và anon key từ Settings > API.
3. Quay lại terminal với Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code sẽ tạo cấu hình hoàn chỉnh:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Xây Dựng Demo: Ứng Dụng Quản Lý Công Việc

Hãy xây dựng một demo cụ thể: một ứng dụng quản lý công việc với xác thực, CRUD đầy đủ, và giao diện hiện đại.

Định Nghĩa Schema Cơ Sở Dữ Liệu

Đưa ra chỉ dẫn cho Claude Code để tạo schema:

You: Create a SQL migration for Supabase with the following tables:

1. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   to profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum:
   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
   created_at, updated_at

Enable Row Level Security on all tables and create appropriate policies.

Claude Code sẽ tạo migration hoàn chỉnh:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Bạn có thể chạy migration này trực tiếp từ bảng điều khiển Supabase (SQL Editor) hoặc qua CLI.

Tạo TypeScript Types

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Xây Dựng Giao Diện Người Dùng

Bây giờ là phần mạnh nhất của vibecoding. Đưa cho Claude Code các chỉ dẫn cấp cao:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code sẽ xây dựng toàn bộ giao diện, từng component một.

Thêm Xác Thực

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

Claude Code sẽ cấu hình middleware Next.js và các trang xác thực:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Các Mẫu Vibecoding Nâng Cao

Prompting Lặp Lại

Bí quyết của vibecoding hiệu quả là lặp lại. Đừng cố mô tả mọi thứ trong một prompt duy nhất. Tiến hành từng bước:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

Mẹo: Prompt càng cụ thể và có ngữ cảnh, kết quả càng tốt. Claude Code có quyền truy cập toàn bộ codebase, nên có thể tích hợp các tính năng mới một cách nhất quán.

Xử Lý Lỗi

Khi có điều gì đó không hoạt động (và sẽ xảy ra), bạn có thể đơn giản nói:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code sẽ phân tích code, xác định vấn đề và sửa nó.

Tái Cấu Trúc với AI

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Kiểm Thử

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Triển Khai lên Vercel: Từ Code ra Thế Giới

Bước 1: Push lên GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Bước 2: Kết Nối Vercel

1. Truy cập vercel.com và nhấp "Add New Project."
2. Import repository GitHub bạn vừa tạo.
3. Thêm biến môi trường:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Nhấp "Deploy."

Bước 3: Cấu Hình Tên Miền Tùy Chỉnh (Tùy Chọn)

Vercel cung cấp URL miễn phí như my-demo-app.vercel.app. Cho tên miền tùy chỉnh:

You: Add the configuration for a custom domain in vercel.json

Triển Khai Preview

Mỗi khi bạn mở Pull Request trên GitHub, Vercel sẽ tự động tạo triển khai preview với URL duy nhất. Hoàn hảo để hiển thị thay đổi trước khi merge.

7. Tối Ưu Hóa Cho Demo Của Bạn

Hiệu Suất

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Realtime với Supabase

Tính năng luôn gây ấn tượng trong demo là realtime:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Chế Độ Tối

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Các Thực Hành Tốt Nhất Cho Vibecoding Hiệu Quả

1. Cụ Thể Trong Prompt

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Cung Cấp Ngữ Cảnh

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Lặp Lại Từng Bước Nhỏ

Đừng cố xây dựng mọi thứ trong một prompt. Tiến hành từng bước:

1. Layout cơ bản
2. Một tính năng mỗi lần
3. Styling và hoàn thiện
4. Xử lý lỗi
5. Kiểm thử

4. Xem Xét Code Được Tạo

Vibecoding không có nghĩa là không đọc code. Luôn xem xét:

• Bảo mật: chính sách RLS, xác thực đầu vào, làm sạch dữ liệu.
• Hiệu suất: truy vấn N+1, component client-side không cần thiết.
• Thực hành tốt nhất: cấu trúc dự án, quy ước đặt tên.

5. Sử Dụng Git Chiến Lược

You: Commit the changes with a descriptive message after each completed feature.

Điều này cho phép bạn revert nếu có sự cố.

9. Chi Phí: Có Thực Sự Hoàn Toàn Miễn Phí?

Phân tích chi phí cho mỗi dịch vụ:

| Dịch vụ | Gói Miễn Phí | Khi Nào Phải Trả | |---------|-----------|-------------| | Claude Code | Yêu cầu gói Anthropic (từ $20/tháng) hoặc API key | Ngay lập tức, nhưng giá trị rất lớn | | Supabase | Gói miễn phí hào phóng (2 dự án, 500MB DB) | Vượt giới hạn miễn phí | | Vercel | Gói miễn phí cho dự án cá nhân | Cho đội nhóm hoặc sử dụng thương mại | | GitHub | Miễn phí cho repo công khai và riêng tư | Tính năng doanh nghiệp |

Lưu ý: Claude Code yêu cầu đăng ký hoặc tín dụng API, nhưng lợi tức đầu tư về tốc độ phát triển là vượt trội. Cho demo hoặc MVP, tổng chi phí khoảng $20.

Các Lựa Chọn AI Miễn Phí

Nếu bạn muốn chi phí hoàn toàn bằng không:

• Cursor (gói miễn phí với giới hạn).
• GitHub Copilot (miễn phí cho sinh viên và mã nguồn mở).
• Codeium/Windsurf (gói miễn phí hào phóng).

10. Từ Demo Đến Sản Phẩm: Các Bước Tiếp Theo

Khi demo của bạn đã lên sóng, đây là cách tiến hành:

1. Thu thập phản hồi: chia sẻ demo với người dùng tiềm năng và thu thập ý kiến.
2. Lặp lại nhanh: sử dụng vibecoding để triển khai các thay đổi được yêu cầu.
3. Theo dõi chỉ số: Vercel Analytics và Supabase Dashboard cung cấp dữ liệu thiết yếu.
4. Mở rộng khi cần: chỉ nâng cấp lên gói trả phí khi đã xác nhận nhu cầu.

Kết Luận

Vibecoding với Claude Code, Supabase và Vercel đại diện cho sự kết hợp mạnh mẽ để xây dựng demo và MVP trong thời gian kỷ lục. Những gì trước đây mất hàng tuần phát triển giờ có thể hoàn thành chỉ trong vài giờ, với chất lượng cao đáng ngạc nhiên.

Chìa khóa là tiếp cận vibecoding với tư duy đúng đắn: không phải "không biết code" mà là khuếch đại khả năng của bạn với công cụ AI. Bạn càng biết nhiều về các công nghệ nền tảng (React, SQL, xác thực, triển khai), bạn càng hiệu quả trong việc hướng dẫn tác nhân AI đến kết quả mong muốn.

Tương lai của phát triển phần mềm đã ở đây, và chi phí để bắt đầu chưa bao giờ thấp hơn. Tạo demo của bạn, xác nhận với người dùng thực, và xây dựng sản phẩm vĩ đại tiếp theo.

Danh sách kiểm tra cho demo đầu tiên:

• [x] Claude Code đã cài đặt và cấu hình
• [x] Dự án Supabase đã tạo với schema cơ sở dữ liệu
• [x] Dự án Next.js đã khởi tạo với shadcn/ui
• [x] Xác thực đã cấu hình
• [x] CRUD đầy đủ đã triển khai
• [x] UI hiện đại và responsive
• [x] Đã triển khai lên Vercel
• [x] URL có thể chia sẻ sẵn sàng cho phản hồi