چگونه یک دمو با Claude Code بسازیم: Vibecoding با Supabase و Vercel

Vibecoding یک پارادایم جدید توسعه نرم‌افزار است که در آن برنامه‌نویس یک عامل هوش مصنوعی را از طریق دستورات زبان طبیعی هدایت می‌کند و به هوش مصنوعی اجازه می‌دهد کد واقعی را بنویسد. این اصطلاح توسط آندری کارپاتی (هم‌بنیان‌گذار OpenAI و مدیر سابق هوش مصنوعی در Tesla) در یک توییت معروف در فوریه ۲۰۲۵ ابداع شد: "There's a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace the exponentials, and forget that the code even exists."

در این مقاله، نحوه ساخت یک دموی کامل و کارآمد با استفاده از Claude Code به عنوان عامل هوش مصنوعی، Supabase به عنوان بک‌اند (پایگاه داده، احراز هویت، API) و Vercel برای استقرار را خواهیم دید - همه با استفاده انحصاری از سطوح رایگان این سرویس‌ها.

۱. Vibecoding چیست و چرا انقلابی است

Vibecoding یک تغییر پارادایم بنیادین در توسعه نرم‌افزار را نشان می‌دهد. به جای نوشتن کد خط به خط:

1. توصیف می‌کند توسعه‌دهنده آنچه می‌خواهد به زبان طبیعی.
2. عامل هوش مصنوعی کد کامل را تولید می‌کند.
3. توسعه‌دهنده بررسی، تست و تکرار می‌کند.

چرا کار می‌کند

• سرعت: پروژه‌ای که روزها طول می‌کشد می‌تواند در ساعت‌ها ساخته شود.
• دسترسی‌پذیری: حتی توسعه‌دهندگان غیرمتخصص می‌توانند محصولات کارآمد بسازند.
• تکرار سریع: می‌توانید ایده‌ها را تست کنید و خیلی سریع‌تر تغییر جهت دهید.
• تمرکز بر محصول: بر چه چیزی تمرکز می‌کنید به جای چگونه.

چه زمانی از vibecoding استفاده کنیم

Vibecoding برای موارد زیر عالی است:

• دموها و MVPها: ساخت سریع یک نمونه اولیه برای اعتبارسنجی یک ایده.
• هکاتون‌ها: ایجاد یک محصول کارآمد تنها در چند ساعت.
• پروژه‌های جانبی: کاوش فناوری‌های جدید بدون سرمایه‌گذاری هفته‌ها.
• اثبات مفهوم: نشان دادن امکان‌پذیری فنی به ذینفعان یا سرمایه‌گذاران.

هشدار: Vibecoding برای دموها و نمونه‌های اولیه عالی است. برای برنامه‌های درجه تولید با نیازمندی‌های بالای امنیتی و مقیاس‌پذیری، بررسی دقیق کد تولید شده همچنان ضروری است.

۲. پشته فناوری: Claude Code + Supabase + Vercel

Claude Code

Claude Code عامل کدنویسی هوش مصنوعی Anthropic است. مستقیماً در ترمینال شما کار می‌کند و می‌تواند:

• خواندن و درک کل کدبیس.
• ایجاد، اصلاح و حذف فایل‌ها.
• اجرای دستورات ترمینال.
• تعامل با APIها و سرویس‌های خارجی.
• مدیریت نسخه‌بندی با Git.
• تکرار مستقل روی خطاها و باگ‌ها.

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

# Start in a project directory
cd my-project
claude

Supabase (سطح رایگان)

Supabase یک جایگزین متن‌باز Firebase است که ارائه می‌دهد:

• پایگاه داده PostgreSQL: یک پایگاه داده رابطه‌ای کامل.
• احراز هویت: ورود با ایمیل، Google، GitHub و غیره.
• APIهای REST و Realtime: به طور خودکار از اسکیمای شما تولید می‌شوند.
• ذخیره‌سازی: برای فایل‌ها و تصاویر.
• Edge Functions: توابع serverless.

سطح رایگان شامل:

Vercel (سطح رایگان)

Vercel پلتفرم استقرار ایده‌آل برای برنامه‌های Next.js است:

• استقرار خودکار از GitHub.
• استقرارهای پیش‌نمایش برای هر شاخه و PR.
• CDN جهانی برای عملکرد بهینه.
• Serverless Functions شامل شده.
• تحلیل پایه رایگان.

سطح رایگان شامل:

۳. راه‌اندازی اولیه: آماده‌سازی محیط

پیش‌نیازها

قبل از شروع، مطمئن شوید که دارید:

• Node.js 18+ نصب شده.
• Git پیکربندی شده.
• یک حساب GitHub.
• یک حساب Supabase (رایگان در supabase.com).
• یک حساب Vercel (رایگان در vercel.com).
• Claude Code نصب شده (npm install -g @anthropic-ai/claude-code).

مرحله ۱: ایجاد پروژه

ترمینال را باز کنید و Claude Code را شروع کنید:

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

حالا می‌توانید به Claude Code دستورات زبان طبیعی بدهید:

شما: یک پروژه Next.js 15 با App Router، TypeScript، Tailwind CSS
و shadcn/ui ایجاد کنید. همچنین یک مخزن Git را مقداردهی اولیه کنید.

Claude Code به طور خودکار اجرا خواهد کرد:

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

مرحله ۲: پیکربندی Supabase

1. به supabase.com بروید و یک پروژه جدید ایجاد کنید.
2. Project URL و anon key را از Settings > API یادداشت کنید.
3. به ترمینال با Claude Code برگردید:

شما: Supabase را به پروژه اضافه کنید. یک فایل .env.local با متغیرهای
NEXT_PUBLIC_SUPABASE_URL و NEXT_PUBLIC_SUPABASE_ANON_KEY ایجاد کنید. کلاینت
Supabase را با پشتیبانی SSR برای Next.js App Router پیکربندی کنید.

Claude Code پیکربندی کامل را ایجاد خواهد کرد:

// 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)
          );
        },
      },
    }
  );
}

۴. ساخت دمو: یک اپلیکیشن مدیریت وظایف

بیایید یک دموی مشخص بسازیم: یک اپلیکیشن مدیریت وظایف با احراز هویت، CRUD کامل و یک رابط کاربری مدرن.

تعریف اسکیمای پایگاه داده

به Claude Code دستورات ایجاد اسکیما بدهید:

شما: یک مایگریشن SQL برای Supabase با جداول زیر ایجاد کنید:

1. profiles: id (uuid, FK به auth.users)، username (text)، avatar_url (text)، created_at
2. projects: id (uuid)، name (text)، description (text)، owner_id (uuid, FK به 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 به projects)، assigned_to (uuid, FK به profiles)، due_date (timestamp)، created_at، updated_at

Row Level Security را در تمام جداول فعال کنید و سیاست‌های مناسب ایجاد کنید.

Claude Code یک مایگریشن کامل تولید خواهد کرد:

-- 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())
  );

می‌توانید این مایگریشن را مستقیماً از داشبورد Supabase (SQL Editor) یا از طریق CLI اجرا کنید.

تولید تایپ‌های TypeScript

شما: تایپ‌های TypeScript را از پایگاه داده Supabase تولید کنید و در src/types/database.ts ذخیره کنید

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

ساخت رابط کاربری

حالا قدرتمندترین بخش vibecoding می‌آید. به Claude Code دستورات سطح بالا بدهید:

شما: یک صفحه داشبورد برای اپلیکیشن مدیریت وظایف با موارد زیر ایجاد کنید:

1. نوار کناری با ناوبری بین پروژه‌ها
2. نمای Kanban با ۳ ستون (Todo، In Progress، Done) با drag & drop
3. مودال برای ایجاد/ویرایش وظایف
4. هدر با آواتار کاربر و خروج
5. طراحی مدرن با shadcn/ui و Tailwind

از داده‌های Supabase با React Server Components تا جایی که ممکن است استفاده کنید
و Client Components فقط در جایی که تعامل نیاز است.

Claude Code کل رابط کاربری را کامپوننت به کامپوننت خواهد ساخت.

افزودن احراز هویت

شما: یک سیستم احراز هویت کامل با موارد زیر اضافه کنید:

1. صفحه ورود با ایمیل/رمز عبور و ورود GitHub
2. صفحه ثبت‌نام
3. Middleware برای محافظت از مسیرهای احراز هویت شده
4. ریدایرکت خودکار برای کاربران احراز هویت نشده
5. ایجاد خودکار پروفایل پس از ثبت‌نام

Claude Code میان‌افزار Next.js و صفحات auth را پیکربندی خواهد کرد:

// 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).*)'],
};

۵. الگوهای پیشرفته vibecoding

پرامپتینگ تکراری

راز vibecoding مؤثر تکرار است. سعی نکنید همه چیز را در یک پرامپت واحد توصیف کنید. مرحله به مرحله پیش بروید:

مرحله ۱: "لایه‌بندی پایه با هدر و نوار کناری ایجاد کنید"
مرحله ۲: "لیست پروژه‌ها را در نوار کناری با دکمه ایجاد جدید اضافه کنید"
مرحله ۳: "نمای Kanban را در بخش اصلی ایجاد کنید"
مرحله ۴: "drag & drop بین ستون‌ها اضافه کنید"
مرحله ۵: "مودال ایجاد وظایف جدید را پیاده‌سازی کنید"
مرحله ۶: "اعلان‌های toast برای بازخورد کاربر اضافه کنید"

نکته: هرچه پرامپت دقیق‌تر و متنی‌تر باشد، نتیجه بهتر است. Claude Code به کل کدبیس دسترسی دارد، بنابراین می‌تواند ویژگی‌های جدید را به صورت منسجم ادغام کند.

مدیریت خطا

وقتی چیزی کار نمی‌کند (و خواهد بود)، می‌توانید به سادگی بگویید:

شما: این خطا را در کنسول دریافت می‌کنم: "TypeError: Cannot read property
'map' of undefined" در کامپوننت TaskList. آن را رفع کنید.

Claude Code کد را تحلیل، مشکل را شناسایی و آن را رفع خواهد کرد.

بازسازی با هوش مصنوعی

شما: کامپوننت Dashboard بسیار بزرگ شده است. آن را به کامپوننت‌های کوچک‌تر
و قابل استفاده مجدد تقسیم کنید در حالی که همان عملکرد حفظ می‌شود.

تست

شما: تست‌هایی با Vitest برای توابع کاربردی و تست‌های Playwright برای
جریان احراز هویت و ایجاد وظیفه اضافه کنید.

۶. استقرار در Vercel: از کد تا جهان

مرحله ۱: Push به GitHub

شما: یک .gitignore مناسب ایجاد کنید، همه چیز را commit کنید و به یک مخزن
جدید GitHub به نام "my-demo-app" push کنید.

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

مرحله ۲: اتصال Vercel

1. به vercel.com بروید و روی "Add New Project" کلیک کنید.
2. مخزن GitHub که تازه ایجاد کرده‌اید را وارد کنید.
3. متغیرهای محیطی را اضافه کنید:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. روی "Deploy" کلیک کنید.

مرحله ۳: پیکربندی دامنه سفارشی (اختیاری)

Vercel یک URL رایگان مانند my-demo-app.vercel.app ارائه می‌دهد. برای دامنه سفارشی:

شما: پیکربندی دامنه سفارشی را در vercel.json اضافه کنید

استقرارهای پیش‌نمایش

هر بار که یک Pull Request در GitHub باز می‌کنید، Vercel به طور خودکار یک استقرار پیش‌نمایش با URL منحصر به فرد ایجاد خواهد کرد. عالی برای نشان دادن تغییرات قبل از ادغام.

۷. بهینه‌سازی‌ها برای دموی شما

عملکرد

شما: عملکرد اپلیکیشن را بهینه کنید:
1. حالت‌های بارگذاری با Suspense و skeleton اضافه کنید
2. کشینگ با Next.js unstable_cache پیاده‌سازی کنید
3. تصاویر را با next/image بهینه کنید
4. متادیتای SEO برای هر صفحه اضافه کنید

Realtime با Supabase

ویژگی‌ای که همیشه در دموها تأثیرگذار است realtime است:

شما: همگام‌سازی بلادرنگ برای وظایف با استفاده از Supabase Realtime اضافه کنید.
وقتی کاربری یک وظیفه را به‌روزرسانی می‌کند، همه کاربران دیگر باید تغییر
را بدون بارگذاری مجدد در لحظه ببینند.

'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;
}

حالت تاریک

شما: پشتیبانی از حالت تاریک با دکمه تغییر در هدر اضافه کنید.
از کلاس‌های dark Tailwind استفاده کنید و ترجیح را در localStorage ذخیره کنید.

۸. بهترین شیوه‌ها برای vibecoding مؤثر

۱. در پرامپت‌هایتان دقیق باشید

نه: "یک صفحه زیبا بسازید"
بله: "یک صفحه فرود با بخش hero با گرادیان بنفش-آبی،
   بخش ویژگی‌ها با ۳ کارت با آیکون‌ها و یک دکمه CTA نارنجی ایجاد کنید"

۲. زمینه فراهم کنید

نه: "احراز هویت اضافه کنید"
بله: "احراز هویت با Supabase Auth اضافه کنید. پروژه از Next.js 15 App
   Router با TypeScript استفاده می‌کند. ورود ایمیل/رمز عبور و OAuth با GitHub
   می‌خواهم. از الگوی SSR با @supabase/ssr استفاده کنید"

۳. در گام‌های کوچک تکرار کنید

سعی نکنید همه چیز را در یک پرامپت واحد بسازید. به صورت تدریجی پیش بروید:

1. لایه‌بندی پایه
2. یک ویژگی در هر بار
3. استایل و پرداخت
4. مدیریت خطا
5. تست

۴. کد تولید شده را بررسی کنید

Vibecoding به معنای نخواندن کد نیست. همیشه بررسی کنید:

• امنیت: سیاست‌های RLS، اعتبارسنجی ورودی، پاکسازی داده‌ها.
• عملکرد: کوئری‌های N+1، کامپوننت‌های غیرضروری سمت کلاینت.
• بهترین شیوه‌ها: ساختار پروژه، قراردادهای نامگذاری.

۵. از Git به صورت استراتژیک استفاده کنید

شما: تغییرات را با پیام توصیفی پس از هر ویژگی تکمیل شده commit کنید.

این به شما امکان بازگشت را می‌دهد اگر چیزی اشتباه شود.

۹. هزینه‌ها: آیا واقعاً همه چیز رایگان است؟

در اینجا تفکیک هزینه برای هر سرویس آمده است:

توجه: Claude Code نیاز به اشتراک یا اعتبار API دارد، اما بازگشت سرمایه از نظر سرعت توسعه فوق‌العاده است. برای یک دمو یا MVP، هزینه کل در حدود $۲۰ است.

جایگزین‌های رایگان هوش مصنوعی

اگر می‌خواهید هزینه‌ها را مطلقاً صفر نگه دارید، می‌توانید استفاده کنید:

• Cursor (سطح رایگان با محدودیت‌ها).
• GitHub Copilot (رایگان برای دانشجویان و متن‌باز).
• Codeium/Windsurf (سطح رایگان سخاوتمندانه).

۱۰. از دمو تا محصول: مراحل بعدی

هنگامی که دموی شما آنلاین است، در اینجا نحوه ادامه آمده است:

1. بازخورد جمع‌آوری کنید: دمو را با کاربران بالقوه به اشتراک بگذارید و نظرات جمع کنید.
2. سریع تکرار کنید: از vibecoding برای پیاده‌سازی تغییرات درخواستی استفاده کنید.
3. معیارها را رصد کنید: Vercel Analytics و Supabase Dashboard داده‌های ضروری به شما می‌دهند.
4. در صورت نیاز مقیاس دهید: فقط زمانی به طرح‌های پولی ارتقا دهید که تقاضا را تأیید کرده باشید.

نتیجه‌گیری

Vibecoding با Claude Code، Supabase و Vercel ترکیبی قدرتمند برای ساخت دموها و MVPها در زمان رکورد را نشان می‌دهد. آنچه قبلاً هفته‌ها توسعه نیاز داشت، اکنون می‌تواند تنها در چند ساعت با سطح کیفیت شگفت‌انگیز بالا انجام شود.

کلید اصلی نزدیک شدن به vibecoding با ذهنیت صحیح است: این درباره "ندانستن نحوه کدنویسی" نیست بلکه درباره تقویت توانایی‌هایتان با ابزارهای هوش مصنوعی است. هرچه بیشتر درباره فناوری‌های زیربنایی (React، SQL، احراز هویت، استقرار) بدانید، مؤثرتر در هدایت عامل هوش مصنوعی به سمت نتیجه مطلوب خواهید بود.

آینده توسعه نرم‌افزار اینجاست و هزینه شروع هرگز تا این حد پایین نبوده است. دموی خود را بسازید، آن را با کاربران واقعی اعتبارسنجی کنید و محصول بزرگ بعدی را بسازید.

چک‌لیست برای اولین دموی شما:

• Claude Code نصب و پیکربندی شده
• پروژه Supabase با اسکیمای پایگاه داده ایجاد شده
• پروژه Next.js با shadcn/ui مقداردهی اولیه شده
• احراز هویت پیکربندی شده
• CRUD کامل پیاده‌سازی شده
• رابط کاربری مدرن و واکنش‌گرا
• در Vercel مستقر شده
• URL قابل اشتراک آماده بازخورد