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

spinny:~/writing $ vim create-demo-claude-code-vibecoding.md

1~
2**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."_
3~
4در این مقاله، نحوه ساخت یک دموی کامل و کارآمد با استفاده از **Claude Code** به عنوان عامل هوش مصنوعی، **Supabase** به عنوان بک‌اند (پایگاه داده، احراز هویت، API) و **Vercel** برای استقرار را خواهیم دید  -  همه با استفاده انحصاری از **سطوح رایگان** این سرویس‌ها.
5~
6## ۱. Vibecoding چیست و چرا انقلابی است
7~
8Vibecoding یک تغییر پارادایم بنیادین در توسعه نرم‌افزار را نشان می‌دهد. به جای نوشتن کد خط به خط:
9~
101. **توصیف می‌کند** توسعه‌دهنده آنچه می‌خواهد به زبان طبیعی.
112. **عامل هوش مصنوعی** کد کامل را تولید می‌کند.
123. **توسعه‌دهنده** بررسی، تست و تکرار می‌کند.
13~
14### چرا کار می‌کند
15~
16- **سرعت**: پروژه‌ای که روزها طول می‌کشد می‌تواند در ساعت‌ها ساخته شود.
17- **دسترسی‌پذیری**: حتی توسعه‌دهندگان غیرمتخصص می‌توانند محصولات کارآمد بسازند.
18- **تکرار سریع**: می‌توانید ایده‌ها را تست کنید و خیلی سریع‌تر تغییر جهت دهید.
19- **تمرکز بر محصول**: بر _چه چیزی_ تمرکز می‌کنید به جای _چگونه_.
20~
21```mermaid
22flowchart LR
23    A[Idea] --> B[Natural language prompt]
24    B --> C[Claude Code generates code]
25    C --> D[Review and test]
26    D --> E[Iteration]
27    E --> B
28    D --> F[Deploy to Vercel]
29```
30~
31### چه زمانی از vibecoding استفاده کنیم
32~
33Vibecoding برای موارد زیر عالی است:
34~
35- **دموها و MVPها**: ساخت سریع یک نمونه اولیه برای اعتبارسنجی یک ایده.
36- **هکاتون‌ها**: ایجاد یک محصول کارآمد تنها در چند ساعت.
37- **پروژه‌های جانبی**: کاوش فناوری‌های جدید بدون سرمایه‌گذاری هفته‌ها.
38- **اثبات مفهوم**: نشان دادن امکان‌پذیری فنی به ذینفعان یا سرمایه‌گذاران.
39~
40> **هشدار:** Vibecoding برای دموها و نمونه‌های اولیه عالی است. برای برنامه‌های درجه تولید با نیازمندی‌های بالای امنیتی و مقیاس‌پذیری، بررسی دقیق کد تولید شده همچنان ضروری است.
41~
42## ۲. پشته فناوری: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code عامل کدنویسی هوش مصنوعی Anthropic است. مستقیماً در ترمینال شما کار می‌کند و می‌تواند:
47~
48- خواندن و درک کل کدبیس.
49- ایجاد، اصلاح و حذف فایل‌ها.
50- اجرای دستورات ترمینال.
51- تعامل با APIها و سرویس‌های خارجی.
52- مدیریت نسخه‌بندی با Git.
53- تکرار مستقل روی خطاها و باگ‌ها.
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase (سطح رایگان)
65~
66Supabase یک جایگزین متن‌باز Firebase است که ارائه می‌دهد:
67~
68- **پایگاه داده PostgreSQL**: یک پایگاه داده رابطه‌ای کامل.
69- **احراز هویت**: ورود با ایمیل، Google، GitHub و غیره.
70- **APIهای REST و Realtime**: به طور خودکار از اسکیمای شما تولید می‌شوند.
71- **ذخیره‌سازی**: برای فایل‌ها و تصاویر.
72- **Edge Functions**: توابع serverless.
73~
74سطح رایگان شامل:
75~
76| منبع | محدودیت رایگان |
77|----------|-----------|
78| پایگاه داده | ۵۰۰ مگابایت |
79| ذخیره‌سازی | ۱ گیگابایت |
80| پهنای باند | ۵ گیگابایت |
81| فراخوانی Edge Function | ۵۰۰ هزار/ماه |
82| کاربران احراز هویت شده | نامحدود |
83| پروژه‌ها | ۲ پروژه فعال |
84~
85### Vercel (سطح رایگان)
86~
87Vercel پلتفرم استقرار ایده‌آل برای برنامه‌های Next.js است:
88~
89- **استقرار خودکار** از GitHub.
90- **استقرارهای پیش‌نمایش** برای هر شاخه و PR.
91- **CDN جهانی** برای عملکرد بهینه.
92- **Serverless Functions** شامل شده.
93- **تحلیل پایه** رایگان.
94~
95سطح رایگان شامل:
96~
97| منبع | محدودیت رایگان |
98|----------|-----------|
99| پهنای باند | ۱۰۰ گیگابایت/ماه |
100| اجرای Serverless Function | ۱۰۰ گیگابایت-ساعت/ماه |
101| ساخت‌ها | ۶٬۰۰۰ دقیقه/ماه |
102| پروژه‌ها | نامحدود |
103| استقرارها | نامحدود |
104~
105## ۳. راه‌اندازی اولیه: آماده‌سازی محیط
106~
107### پیش‌نیازها
108~
109قبل از شروع، مطمئن شوید که دارید:
110~
111- **Node.js 18+** نصب شده.
112- **Git** پیکربندی شده.
113- یک حساب **GitHub**.
114- یک حساب **Supabase** (رایگان در [supabase.com](https://supabase.com)).
115- یک حساب **Vercel** (رایگان در [vercel.com](https://vercel.com)).
116- **Claude Code** نصب شده (`npm install -g @anthropic-ai/claude-code`).
117~
118### مرحله ۱: ایجاد پروژه
119~
120ترمینال را باز کنید و Claude Code را شروع کنید:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127حالا می‌توانید به Claude Code دستورات زبان طبیعی بدهید:
128~
129```
130شما: یک پروژه Next.js 15 با App Router، TypeScript، Tailwind CSS
131و shadcn/ui ایجاد کنید. همچنین یک مخزن Git را مقداردهی اولیه کنید.
132```
133~
134Claude Code به طور خودکار اجرا خواهد کرد:
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### مرحله ۲: پیکربندی Supabase
143~
1441. به [supabase.com](https://supabase.com) بروید و یک پروژه جدید ایجاد کنید.
1452. **Project URL** و **anon key** را از Settings > API یادداشت کنید.
1463. به ترمینال با Claude Code برگردید:
147~
148```
149شما: Supabase را به پروژه اضافه کنید. یک فایل .env.local با متغیرهای
150NEXT_PUBLIC_SUPABASE_URL و NEXT_PUBLIC_SUPABASE_ANON_KEY ایجاد کنید. کلاینت
151Supabase را با پشتیبانی SSR برای Next.js App Router پیکربندی کنید.
152```
153~
154Claude Code پیکربندی کامل را ایجاد خواهد کرد:
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## ۴. ساخت دمو: یک اپلیکیشن مدیریت وظایف
196~
197بیایید یک دموی مشخص بسازیم: یک **اپلیکیشن مدیریت وظایف** با احراز هویت، CRUD کامل و یک رابط کاربری مدرن.
198~
199### تعریف اسکیمای پایگاه داده
200~
201به Claude Code دستورات ایجاد اسکیما بدهید:
202~
203```
204شما: یک مایگریشن SQL برای Supabase با جداول زیر ایجاد کنید:
205~
2061. profiles: id (uuid, FK به auth.users)، username (text)، avatar_url (text)، created_at
2072. projects: id (uuid)، name (text)، description (text)، owner_id (uuid, FK به profiles)، created_at
2083. 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
209~
210Row Level Security را در تمام جداول فعال کنید و سیاست‌های مناسب ایجاد کنید.
211```
212~
213Claude Code یک مایگریشن کامل تولید خواهد کرد:
214~
215```sql
216-- Create enum types
217CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
218CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
219~
220-- Profiles table
221CREATE TABLE profiles (
222  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
223  username TEXT UNIQUE,
224  avatar_url TEXT,
225  created_at TIMESTAMPTZ DEFAULT NOW()
226);
227~
228-- Projects table
229CREATE TABLE projects (
230  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
231  name TEXT NOT NULL,
232  description TEXT,
233  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
234  created_at TIMESTAMPTZ DEFAULT NOW()
235);
236~
237-- Tasks table
238CREATE TABLE tasks (
239  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
240  title TEXT NOT NULL,
241  description TEXT,
242  status task_status DEFAULT 'todo',
243  priority task_priority DEFAULT 'medium',
244  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
245  assigned_to UUID REFERENCES profiles(id),
246  due_date TIMESTAMPTZ,
247  created_at TIMESTAMPTZ DEFAULT NOW(),
248  updated_at TIMESTAMPTZ DEFAULT NOW()
249);
250~
251-- Enable RLS
252ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
253ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
254ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
255~
256-- Profiles policies
257CREATE POLICY "Users can view own profile"
258  ON profiles FOR SELECT USING (auth.uid() = id);
259CREATE POLICY "Users can update own profile"
260  ON profiles FOR UPDATE USING (auth.uid() = id);
261~
262-- Projects policies
263CREATE POLICY "Users can view own projects"
264  ON projects FOR SELECT USING (auth.uid() = owner_id);
265CREATE POLICY "Users can create projects"
266  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
267CREATE POLICY "Users can update own projects"
268  ON projects FOR UPDATE USING (auth.uid() = owner_id);
269CREATE POLICY "Users can delete own projects"
270  ON projects FOR DELETE USING (auth.uid() = owner_id);
271~
272-- Tasks policies
273CREATE POLICY "Users can view tasks in their projects"
274  ON tasks FOR SELECT USING (
275    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
276  );
277CREATE POLICY "Users can create tasks in their projects"
278  ON tasks FOR INSERT WITH CHECK (
279    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
280  );
281CREATE POLICY "Users can update tasks in their projects"
282  ON tasks FOR UPDATE USING (
283    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
284  );
285CREATE POLICY "Users can delete tasks in their projects"
286  ON tasks FOR DELETE USING (
287    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
288  );
289```
290~
291می‌توانید این مایگریشن را مستقیماً از داشبورد Supabase (SQL Editor) یا از طریق CLI اجرا کنید.
292~
293### تولید تایپ‌های TypeScript
294~
295```
296شما: تایپ‌های TypeScript را از پایگاه داده Supabase تولید کنید و در src/types/database.ts ذخیره کنید
297```
298~
299```bash
300npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
301```
302~
303### ساخت رابط کاربری
304~
305حالا قدرتمندترین بخش vibecoding می‌آید. به Claude Code دستورات سطح بالا بدهید:
306~
307```
308شما: یک صفحه داشبورد برای اپلیکیشن مدیریت وظایف با موارد زیر ایجاد کنید:
309~
3101. نوار کناری با ناوبری بین پروژه‌ها
3112. نمای Kanban با ۳ ستون (Todo، In Progress، Done) با drag & drop
3123. مودال برای ایجاد/ویرایش وظایف
3134. هدر با آواتار کاربر و خروج
3145. طراحی مدرن با shadcn/ui و Tailwind
315~
316از داده‌های Supabase با React Server Components تا جایی که ممکن است استفاده کنید
317و Client Components فقط در جایی که تعامل نیاز است.
318```
319~
320Claude Code کل رابط کاربری را کامپوننت به کامپوننت خواهد ساخت.
321~
322### افزودن احراز هویت
323~
324```
325شما: یک سیستم احراز هویت کامل با موارد زیر اضافه کنید:
326~
3271. صفحه ورود با ایمیل/رمز عبور و ورود GitHub
3282. صفحه ثبت‌نام
3293. Middleware برای محافظت از مسیرهای احراز هویت شده
3304. ریدایرکت خودکار برای کاربران احراز هویت نشده
3315. ایجاد خودکار پروفایل پس از ثبت‌نام
332```
333~
334Claude Code میان‌افزار Next.js و صفحات auth را پیکربندی خواهد کرد:
335~
336```typescript
337// src/middleware.ts
338import { createServerClient } from '@supabase/ssr';
339import { NextResponse, type NextRequest } from 'next/server';
340~
341export async function middleware(request: NextRequest) {
342  let supabaseResponse = NextResponse.next({ request });
343~
344  const supabase = createServerClient(
345    process.env.NEXT_PUBLIC_SUPABASE_URL!,
346    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
347    {
348      cookies: {
349        getAll() {
350          return request.cookies.getAll();
351        },
352        setAll(cookiesToSet) {
353          cookiesToSet.forEach(({ name, value }) =>
354            request.cookies.set(name, value)
355          );
356          supabaseResponse = NextResponse.next({ request });
357          cookiesToSet.forEach(({ name, value, options }) =>
358            supabaseResponse.cookies.set(name, value, options)
359          );
360        },
361      },
362    }
363  );
364~
365  const { data: { user } } = await supabase.auth.getUser();
366~
367  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
368    const url = request.nextUrl.clone();
369    url.pathname = '/auth/login';
370    return NextResponse.redirect(url);
371  }
372~
373  return supabaseResponse;
374}
375~
376export const config = {
377  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
378};
379```
380~
381## ۵. الگوهای پیشرفته vibecoding
382~
383### پرامپتینگ تکراری
384~
385راز vibecoding مؤثر **تکرار** است. سعی نکنید همه چیز را در یک پرامپت واحد توصیف کنید. مرحله به مرحله پیش بروید:
386~
387```
388مرحله ۱: "لایه‌بندی پایه با هدر و نوار کناری ایجاد کنید"
389مرحله ۲: "لیست پروژه‌ها را در نوار کناری با دکمه ایجاد جدید اضافه کنید"
390مرحله ۳: "نمای Kanban را در بخش اصلی ایجاد کنید"
391مرحله ۴: "drag & drop بین ستون‌ها اضافه کنید"
392مرحله ۵: "مودال ایجاد وظایف جدید را پیاده‌سازی کنید"
393مرحله ۶: "اعلان‌های toast برای بازخورد کاربر اضافه کنید"
394```
395~
396> **نکته:** هرچه پرامپت دقیق‌تر و متنی‌تر باشد، نتیجه بهتر است. Claude Code به کل کدبیس دسترسی دارد، بنابراین می‌تواند ویژگی‌های جدید را به صورت منسجم ادغام کند.
397~
398### مدیریت خطا
399~
400وقتی چیزی کار نمی‌کند (و خواهد بود)، می‌توانید به سادگی بگویید:
401~
402```
403شما: این خطا را در کنسول دریافت می‌کنم: "TypeError: Cannot read property
404'map' of undefined" در کامپوننت TaskList. آن را رفع کنید.
405```
406~
407Claude Code کد را تحلیل، مشکل را شناسایی و آن را رفع خواهد کرد.
408~
409### بازسازی با هوش مصنوعی
410~
411```
412شما: کامپوننت Dashboard بسیار بزرگ شده است. آن را به کامپوننت‌های کوچک‌تر
413و قابل استفاده مجدد تقسیم کنید در حالی که همان عملکرد حفظ می‌شود.
414```
415~
416### تست
417~
418```
419شما: تست‌هایی با Vitest برای توابع کاربردی و تست‌های Playwright برای
420جریان احراز هویت و ایجاد وظیفه اضافه کنید.
421```
422~
423## ۶. استقرار در Vercel: از کد تا جهان
424~
425### مرحله ۱: Push به GitHub
426~
427```
428شما: یک .gitignore مناسب ایجاد کنید، همه چیز را commit کنید و به یک مخزن
429جدید GitHub به نام "my-demo-app" push کنید.
430```
431~
432```bash
433git add .
434git commit -m "feat: complete task management demo"
435gh repo create my-demo-app --public --push --source=.
436```
437~
438### مرحله ۲: اتصال Vercel
439~
4401. به [vercel.com](https://vercel.com) بروید و روی "Add New Project" کلیک کنید.
4412. مخزن GitHub که تازه ایجاد کرده‌اید را وارد کنید.
4423. متغیرهای محیطی را اضافه کنید:
443   - `NEXT_PUBLIC_SUPABASE_URL`
444   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4454. روی "Deploy" کلیک کنید.
446~
447```mermaid
448flowchart LR
449    A[GitHub Push] --> B[Vercel Build]
450    B --> C[Automatic Deploy]
451    C --> D[Public URL]
452    D --> E[Global CDN]
453```
454~
455### مرحله ۳: پیکربندی دامنه سفارشی (اختیاری)
456~
457Vercel یک URL رایگان مانند `my-demo-app.vercel.app` ارائه می‌دهد. برای دامنه سفارشی:
458~
459```
460شما: پیکربندی دامنه سفارشی را در vercel.json اضافه کنید
461```
462~
463### استقرارهای پیش‌نمایش
464~
465هر بار که یک Pull Request در GitHub باز می‌کنید، Vercel به طور خودکار یک **استقرار پیش‌نمایش** با URL منحصر به فرد ایجاد خواهد کرد. عالی برای نشان دادن تغییرات قبل از ادغام.
466~
467## ۷. بهینه‌سازی‌ها برای دموی شما
468~
469### عملکرد
470~
471```
472شما: عملکرد اپلیکیشن را بهینه کنید:
4731. حالت‌های بارگذاری با Suspense و skeleton اضافه کنید
4742. کشینگ با Next.js unstable_cache پیاده‌سازی کنید
4753. تصاویر را با next/image بهینه کنید
4764. متادیتای SEO برای هر صفحه اضافه کنید
477```
478~
479### Realtime با Supabase
480~
481ویژگی‌ای که همیشه در دموها تأثیرگذار است **realtime** است:
482~
483```
484شما: همگام‌سازی بلادرنگ برای وظایف با استفاده از Supabase Realtime اضافه کنید.
485وقتی کاربری یک وظیفه را به‌روزرسانی می‌کند، همه کاربران دیگر باید تغییر
486را بدون بارگذاری مجدد در لحظه ببینند.
487```
488~
489```typescript
490'use client';
491~
492import { useEffect, useState } from 'react';
493import { createClient } from '@/lib/supabase/client';
494import type { Task } from '@/types/database';
495~
496export function useRealtimeTasks(projectId: string) {
497  const [tasks, setTasks] = useState<Task[]>([]);
498  const supabase = createClient();
499~
500  useEffect(() => {
501    const channel = supabase
502      .channel('tasks-changes')
503      .on(
504        'postgres_changes',
505        {
506          event: '*',
507          schema: 'public',
508          table: 'tasks',
509          filter: `project_id=eq.${projectId}`,
510        },
511        (payload) => {
512          if (payload.eventType === 'INSERT') {
513            setTasks((prev) => [...prev, payload.new as Task]);
514          } else if (payload.eventType === 'UPDATE') {
515            setTasks((prev) =>
516              prev.map((t) =>
517                t.id === payload.new.id ? (payload.new as Task) : t
518              )
519            );
520          } else if (payload.eventType === 'DELETE') {
521            setTasks((prev) =>
522              prev.filter((t) => t.id !== payload.old.id)
523            );
524          }
525        }
526      )
527      .subscribe();
528~
529    return () => {
530      supabase.removeChannel(channel);
531    };
532  }, [projectId, supabase]);
533~
534  return tasks;
535}
536```
537~
538### حالت تاریک
539~
540```
541شما: پشتیبانی از حالت تاریک با دکمه تغییر در هدر اضافه کنید.
542از کلاس‌های dark Tailwind استفاده کنید و ترجیح را در localStorage ذخیره کنید.
543```
544~
545## ۸. بهترین شیوه‌ها برای vibecoding مؤثر
546~
547### ۱. در پرامپت‌هایتان دقیق باشید
548~
549```
550نه: "یک صفحه زیبا بسازید"
551بله: "یک صفحه فرود با بخش hero با گرادیان بنفش-آبی،
552   بخش ویژگی‌ها با ۳ کارت با آیکون‌ها و یک دکمه CTA نارنجی ایجاد کنید"
553```
554~
555### ۲. زمینه فراهم کنید
556~
557```
558نه: "احراز هویت اضافه کنید"
559بله: "احراز هویت با Supabase Auth اضافه کنید. پروژه از Next.js 15 App
560   Router با TypeScript استفاده می‌کند. ورود ایمیل/رمز عبور و OAuth با GitHub
561   می‌خواهم. از الگوی SSR با @supabase/ssr استفاده کنید"
562```
563~
564### ۳. در گام‌های کوچک تکرار کنید
565~
566سعی نکنید همه چیز را در یک پرامپت واحد بسازید. به صورت تدریجی پیش بروید:
567~
5681. لایه‌بندی پایه
5692. یک ویژگی در هر بار
5703. استایل و پرداخت
5714. مدیریت خطا
5725. تست
573~
574### ۴. کد تولید شده را بررسی کنید
575~
576Vibecoding به معنای نخواندن کد نیست. همیشه بررسی کنید:
577~
578- **امنیت**: سیاست‌های RLS، اعتبارسنجی ورودی، پاکسازی داده‌ها.
579- **عملکرد**: کوئری‌های N+1، کامپوننت‌های غیرضروری سمت کلاینت.
580- **بهترین شیوه‌ها**: ساختار پروژه، قراردادهای نامگذاری.
581~
582### ۵. از Git به صورت استراتژیک استفاده کنید
583~
584```
585شما: تغییرات را با پیام توصیفی پس از هر ویژگی تکمیل شده commit کنید.
586```
587~
588این به شما امکان بازگشت را می‌دهد اگر چیزی اشتباه شود.
589~
590## ۹. هزینه‌ها: آیا واقعاً همه چیز رایگان است؟
591~
592در اینجا تفکیک هزینه برای هر سرویس آمده است:
593~
594| سرویس | طرح رایگان | چه زمانی پرداخت می‌کنید |
595|---------|-----------|-------------|
596| **Claude Code** | نیاز به اشتراک Anthropic (از $۲۰/ماه) یا کلید API | فوراً، اما ارزش بسیار زیاد است |
597| **Supabase** | سطح رایگان سخاوتمندانه (۲ پروژه، ۵۰۰ مگابایت DB) | فراتر از محدودیت‌های سطح رایگان |
598| **Vercel** | سطح رایگان برای پروژه‌های شخصی | برای تیم‌ها یا استفاده تجاری |
599| **GitHub** | رایگان برای مخازن عمومی و خصوصی | ویژگی‌های Enterprise |
600~
601> **توجه:** Claude Code نیاز به اشتراک یا اعتبار API دارد، اما بازگشت سرمایه از نظر سرعت توسعه فوق‌العاده است. برای یک دمو یا MVP، هزینه کل در حدود $۲۰ است.
602~
603### جایگزین‌های رایگان هوش مصنوعی
604~
605اگر می‌خواهید هزینه‌ها را مطلقاً صفر نگه دارید، می‌توانید استفاده کنید:
606~
607- **Cursor** (سطح رایگان با محدودیت‌ها).
608- **GitHub Copilot** (رایگان برای دانشجویان و متن‌باز).
609- **Codeium/Windsurf** (سطح رایگان سخاوتمندانه).
610~
611## ۱۰. از دمو تا محصول: مراحل بعدی
612~
613هنگامی که دموی شما آنلاین است، در اینجا نحوه ادامه آمده است:
614~
615```mermaid
616flowchart TD
617    A[Live Demo] --> B{User Feedback}
618    B --> C[Product Iteration]
619    C --> D[Product-Market Fit]
620    D --> E[Scaling]
621    E --> F[Supabase Pro Plan]
622    E --> G[Vercel Pro Plan]
623    E --> H[Custom Domain]
624```
625~
6261. **بازخورد جمع‌آوری کنید**: دمو را با کاربران بالقوه به اشتراک بگذارید و نظرات جمع کنید.
6272. **سریع تکرار کنید**: از vibecoding برای پیاده‌سازی تغییرات درخواستی استفاده کنید.
6283. **معیارها را رصد کنید**: Vercel Analytics و Supabase Dashboard داده‌های ضروری به شما می‌دهند.
6294. **در صورت نیاز مقیاس دهید**: فقط زمانی به طرح‌های پولی ارتقا دهید که تقاضا را تأیید کرده باشید.
630~
631~
632## نتیجه‌گیری
633~
634Vibecoding با Claude Code، Supabase و Vercel ترکیبی قدرتمند برای ساخت دموها و MVPها در زمان رکورد را نشان می‌دهد. آنچه قبلاً هفته‌ها توسعه نیاز داشت، اکنون می‌تواند تنها در چند ساعت با سطح کیفیت شگفت‌انگیز بالا انجام شود.
635~
636کلید اصلی نزدیک شدن به vibecoding با ذهنیت صحیح است: این درباره "ندانستن نحوه کدنویسی" نیست بلکه درباره **تقویت توانایی‌هایتان** با ابزارهای هوش مصنوعی است. هرچه بیشتر درباره فناوری‌های زیربنایی (React، SQL، احراز هویت، استقرار) بدانید، مؤثرتر در هدایت عامل هوش مصنوعی به سمت نتیجه مطلوب خواهید بود.
637~
638آینده توسعه نرم‌افزار اینجاست و هزینه شروع هرگز تا این حد پایین نبوده است. دموی خود را بسازید، آن را با کاربران واقعی اعتبارسنجی کنید و محصول بزرگ بعدی را بسازید.
639~
640> **چک‌لیست برای اولین دموی شما:**
641>
642> - [x] Claude Code نصب و پیکربندی شده
643> - [x] پروژه Supabase با اسکیمای پایگاه داده ایجاد شده
644> - [x] پروژه Next.js با shadcn/ui مقداردهی اولیه شده
645> - [x] احراز هویت پیکربندی شده
646> - [x] CRUD کامل پیاده‌سازی شده
647> - [x] رابط کاربری مدرن و واکنش‌گرا
648> - [x] در Vercel مستقر شده
649> - [x] URL قابل اشتراک آماده بازخورد
650~

NORMAL · create-demo-claude-code-vibecoding.md [readonly]650 lines · :q to close

2**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."_

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

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

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

101. **توصیف می‌کند** توسعه‌دهنده آنچه می‌خواهد به زبان طبیعی.

112. **عامل هوش مصنوعی** کد کامل را تولید می‌کند.

123. **توسعه‌دهنده** بررسی، تست و تکرار می‌کند.

13~

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

15~

16- **سرعت**: پروژه‌ای که روزها طول می‌کشد می‌تواند در ساعت‌ها ساخته شود.

17- **دسترسی‌پذیری**: حتی توسعه‌دهندگان غیرمتخصص می‌توانند محصولات کارآمد بسازند.

18- **تکرار سریع**: می‌توانید ایده‌ها را تست کنید و خیلی سریع‌تر تغییر جهت دهید.

19- **تمرکز بر محصول**: بر _چه چیزی_ تمرکز می‌کنید به جای _چگونه_.

20~

21```mermaid

22flowchart LR

23 A[Idea] --> B[Natural language prompt]

24 B --> C[Claude Code generates code]

25 C --> D[Review and test]

26 D --> E[Iteration]

27 E --> B

28 D --> F[Deploy to Vercel]

29```

30~

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

32~

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

34~

35- **دموها و MVPها**: ساخت سریع یک نمونه اولیه برای اعتبارسنجی یک ایده.

36- **هکاتون‌ها**: ایجاد یک محصول کارآمد تنها در چند ساعت.

37- **پروژه‌های جانبی**: کاوش فناوری‌های جدید بدون سرمایه‌گذاری هفته‌ها.

38- **اثبات مفهوم**: نشان دادن امکان‌پذیری فنی به ذینفعان یا سرمایه‌گذاران.

39~

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

41~

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

43~

44### Claude Code

45~

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

47~

48- خواندن و درک کل کدبیس.

49- ایجاد، اصلاح و حذف فایل‌ها.

50- اجرای دستورات ترمینال.

51- تعامل با APIها و سرویس‌های خارجی.

52- مدیریت نسخه‌بندی با Git.

53- تکرار مستقل روی خطاها و باگ‌ها.

54~

55```bash

56# Install Claude Code

57npm install -g @anthropic-ai/claude-code

58~

59# Start in a project directory

60cd my-project

61claude

62```

63~

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

65~

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

67~

68- **پایگاه داده PostgreSQL**: یک پایگاه داده رابطه‌ای کامل.

69- **احراز هویت**: ورود با ایمیل، Google، GitHub و غیره.

70- **APIهای REST و Realtime**: به طور خودکار از اسکیمای شما تولید می‌شوند.

71- **ذخیره‌سازی**: برای فایل‌ها و تصاویر.

72- **Edge Functions**: توابع serverless.

73~

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

75~

76| منبع | محدودیت رایگان |

77|----------|-----------|

78| پایگاه داده | ۵۰۰ مگابایت |

79| ذخیره‌سازی | ۱ گیگابایت |

80| پهنای باند | ۵ گیگابایت |

81| فراخوانی Edge Function | ۵۰۰ هزار/ماه |

82| کاربران احراز هویت شده | نامحدود |

83| پروژه‌ها | ۲ پروژه فعال |

84~

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

86~

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

88~

89- **استقرار خودکار** از GitHub.

90- **استقرارهای پیش‌نمایش** برای هر شاخه و PR.

91- **CDN جهانی** برای عملکرد بهینه.

92- **Serverless Functions** شامل شده.

93- **تحلیل پایه** رایگان.

94~

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

96~

97| منبع | محدودیت رایگان |

98|----------|-----------|

99| پهنای باند | ۱۰۰ گیگابایت/ماه |

100| اجرای Serverless Function | ۱۰۰ گیگابایت-ساعت/ماه |

101| ساخت‌ها | ۶٬۰۰۰ دقیقه/ماه |

102| پروژه‌ها | نامحدود |

103| استقرارها | نامحدود |

104~

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

106~

107### پیش‌نیازها

108~

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

110~

111- **Node.js 18+** نصب شده.

112- **Git** پیکربندی شده.

113- یک حساب **GitHub**.

114- یک حساب **Supabase** (رایگان در [supabase.com](https://supabase.com)).

115- یک حساب **Vercel** (رایگان در [vercel.com](https://vercel.com)).

116- **Claude Code** نصب شده (`npm install -g @anthropic-ai/claude-code`).

117~

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

119~

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

121~

122```bash

123mkdir my-demo-app && cd my-demo-app

124claude

125```

126~

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

128~

129```

130شما: یک پروژه Next.js 15 با App Router، TypeScript، Tailwind CSS

131و shadcn/ui ایجاد کنید. همچنین یک مخزن Git را مقداردهی اولیه کنید.

132```

133~

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

135~

136```bash

137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir

138npx shadcn@latest init

139git init && git add . && git commit -m "Initial commit"

140```

141~

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

143~

1441. به [supabase.com](https://supabase.com) بروید و یک پروژه جدید ایجاد کنید.

1452. **Project URL** و **anon key** را از Settings > API یادداشت کنید.

1463. به ترمینال با Claude Code برگردید:

147~

148```

149شما: Supabase را به پروژه اضافه کنید. یک فایل .env.local با متغیرهای

150NEXT_PUBLIC_SUPABASE_URL و NEXT_PUBLIC_SUPABASE_ANON_KEY ایجاد کنید. کلاینت

151Supabase را با پشتیبانی SSR برای Next.js App Router پیکربندی کنید.

152```

153~

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

155~

156```typescript

157// src/lib/supabase/client.ts

158import { createBrowserClient } from '@supabase/ssr';

159~

160export function createClient() {

161 return createBrowserClient(

162 process.env.NEXT_PUBLIC_SUPABASE_URL!,

163 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

164 );

165}

166```

167~

168```typescript

169// src/lib/supabase/server.ts

170import { createServerClient } from '@supabase/ssr';

171import { cookies } from 'next/headers';

172~

173export async function createClient() {

174 const cookieStore = await cookies();

175~

176 return createServerClient(

177 process.env.NEXT_PUBLIC_SUPABASE_URL!,

178 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

179 {

180 cookies: {

181 getAll() {

182 return cookieStore.getAll();

183 },

184 setAll(cookiesToSet) {

185 cookiesToSet.forEach(({ name, value, options }) =>

186 cookieStore.set(name, value, options)

187 );

188 },

189 },

190 }

191 );

192}

193```

194~

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

196~

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

198~

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

200~

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

202~

203```

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

205~

2061. profiles: id (uuid, FK به auth.users)، username (text)، avatar_url (text)، created_at

2072. projects: id (uuid)، name (text)، description (text)، owner_id (uuid, FK به profiles)، created_at

2083. 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

209~

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

211```

212~

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

214~

215```sql

216-- Create enum types

217CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');

218CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

219~

220-- Profiles table

221CREATE TABLE profiles (

222 id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,

223 username TEXT UNIQUE,

224 avatar_url TEXT,

225 created_at TIMESTAMPTZ DEFAULT NOW()

226);

227~

228-- Projects table

229CREATE TABLE projects (

230 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

231 name TEXT NOT NULL,

232 description TEXT,

233 owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,

234 created_at TIMESTAMPTZ DEFAULT NOW()

235);

236~

237-- Tasks table

238CREATE TABLE tasks (

239 id UUID DEFAULT gen_random_uuid() PRIMARY KEY,

240 title TEXT NOT NULL,

241 description TEXT,

242 status task_status DEFAULT 'todo',

243 priority task_priority DEFAULT 'medium',

244 project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,

245 assigned_to UUID REFERENCES profiles(id),

246 due_date TIMESTAMPTZ,

247 created_at TIMESTAMPTZ DEFAULT NOW(),

248 updated_at TIMESTAMPTZ DEFAULT NOW()

249);

250~

251-- Enable RLS

252ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

253ALTER TABLE projects ENABLE ROW LEVEL SECURITY;

254ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

255~

256-- Profiles policies

257CREATE POLICY "Users can view own profile"

258 ON profiles FOR SELECT USING (auth.uid() = id);

259CREATE POLICY "Users can update own profile"

260 ON profiles FOR UPDATE USING (auth.uid() = id);

261~

262-- Projects policies

263CREATE POLICY "Users can view own projects"

264 ON projects FOR SELECT USING (auth.uid() = owner_id);

265CREATE POLICY "Users can create projects"

266 ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);

267CREATE POLICY "Users can update own projects"

268 ON projects FOR UPDATE USING (auth.uid() = owner_id);

269CREATE POLICY "Users can delete own projects"

270 ON projects FOR DELETE USING (auth.uid() = owner_id);

271~

272-- Tasks policies

273CREATE POLICY "Users can view tasks in their projects"

274 ON tasks FOR SELECT USING (

275 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

276 );

277CREATE POLICY "Users can create tasks in their projects"

278 ON tasks FOR INSERT WITH CHECK (

279 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

280 );

281CREATE POLICY "Users can update tasks in their projects"

282 ON tasks FOR UPDATE USING (

283 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

284 );

285CREATE POLICY "Users can delete tasks in their projects"

286 ON tasks FOR DELETE USING (

287 project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())

288 );

289```

290~

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

292~

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

294~

295```

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

297```

298~

299```bash

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

301```

302~

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

304~

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

306~

307```

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

309~

3101. نوار کناری با ناوبری بین پروژه‌ها

3112. نمای Kanban با ۳ ستون (Todo، In Progress، Done) با drag & drop

3123. مودال برای ایجاد/ویرایش وظایف

3134. هدر با آواتار کاربر و خروج

3145. طراحی مدرن با shadcn/ui و Tailwind

315~

316از داده‌های Supabase با React Server Components تا جایی که ممکن است استفاده کنید

317و Client Components فقط در جایی که تعامل نیاز است.

318```

319~

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

321~

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

323~

324```

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

326~

3271. صفحه ورود با ایمیل/رمز عبور و ورود GitHub

3282. صفحه ثبت‌نام

3293. Middleware برای محافظت از مسیرهای احراز هویت شده

3304. ریدایرکت خودکار برای کاربران احراز هویت نشده

3315. ایجاد خودکار پروفایل پس از ثبت‌نام

332```

333~

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

335~

336```typescript

337// src/middleware.ts

338import { createServerClient } from '@supabase/ssr';

339import { NextResponse, type NextRequest } from 'next/server';

340~

341export async function middleware(request: NextRequest) {

342 let supabaseResponse = NextResponse.next({ request });

343~

344 const supabase = createServerClient(

345 process.env.NEXT_PUBLIC_SUPABASE_URL!,

346 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,

347 {

348 cookies: {

349 getAll() {

350 return request.cookies.getAll();

351 },

352 setAll(cookiesToSet) {

353 cookiesToSet.forEach(({ name, value }) =>

354 request.cookies.set(name, value)

355 );

356 supabaseResponse = NextResponse.next({ request });

357 cookiesToSet.forEach(({ name, value, options }) =>

358 supabaseResponse.cookies.set(name, value, options)

359 );

360 },

361 },

362 }

363 );

364~

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

366~

367 if (!user && !request.nextUrl.pathname.startsWith('/auth')) {

368 const url = request.nextUrl.clone();

369 url.pathname = '/auth/login';

370 return NextResponse.redirect(url);

371 }

372~

373 return supabaseResponse;

374}

375~

376export const config = {

377 matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],

378};

379```

380~

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

382~

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

384~

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

386~

387```

388مرحله ۱: "لایه‌بندی پایه با هدر و نوار کناری ایجاد کنید"

389مرحله ۲: "لیست پروژه‌ها را در نوار کناری با دکمه ایجاد جدید اضافه کنید"

390مرحله ۳: "نمای Kanban را در بخش اصلی ایجاد کنید"

391مرحله ۴: "drag & drop بین ستون‌ها اضافه کنید"

392مرحله ۵: "مودال ایجاد وظایف جدید را پیاده‌سازی کنید"

393مرحله ۶: "اعلان‌های toast برای بازخورد کاربر اضافه کنید"

394```

395~

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

397~

398### مدیریت خطا

399~

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

401~

402```

403شما: این خطا را در کنسول دریافت می‌کنم: "TypeError: Cannot read property

404'map' of undefined" در کامپوننت TaskList. آن را رفع کنید.

405```

406~

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

408~

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

410~

411```

412شما: کامپوننت Dashboard بسیار بزرگ شده است. آن را به کامپوننت‌های کوچک‌تر

413و قابل استفاده مجدد تقسیم کنید در حالی که همان عملکرد حفظ می‌شود.

414```

415~

416### تست

417~

418```

419شما: تست‌هایی با Vitest برای توابع کاربردی و تست‌های Playwright برای

420جریان احراز هویت و ایجاد وظیفه اضافه کنید.

421```

422~

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

424~

425### مرحله ۱: Push به GitHub

426~

427```

428شما: یک .gitignore مناسب ایجاد کنید، همه چیز را commit کنید و به یک مخزن

429جدید GitHub به نام "my-demo-app" push کنید.

430```

431~

432```bash

433git add .

434git commit -m "feat: complete task management demo"

435gh repo create my-demo-app --public --push --source=.

436```

437~

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

439~

4401. به [vercel.com](https://vercel.com) بروید و روی "Add New Project" کلیک کنید.

4412. مخزن GitHub که تازه ایجاد کرده‌اید را وارد کنید.

4423. متغیرهای محیطی را اضافه کنید:

443 - `NEXT_PUBLIC_SUPABASE_URL`

444 - `NEXT_PUBLIC_SUPABASE_ANON_KEY`

4454. روی "Deploy" کلیک کنید.

446~

447```mermaid

448flowchart LR

449 A[GitHub Push] --> B[Vercel Build]

450 B --> C[Automatic Deploy]

451 C --> D[Public URL]

452 D --> E[Global CDN]

453```

454~

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

456~

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

458~

459```

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

461```

462~

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

464~

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

466~

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

468~

469### عملکرد

470~

471```

472شما: عملکرد اپلیکیشن را بهینه کنید:

4731. حالت‌های بارگذاری با Suspense و skeleton اضافه کنید

4742. کشینگ با Next.js unstable_cache پیاده‌سازی کنید

4753. تصاویر را با next/image بهینه کنید

4764. متادیتای SEO برای هر صفحه اضافه کنید

477```

478~

479### Realtime با Supabase

480~

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

482~

483```

484شما: همگام‌سازی بلادرنگ برای وظایف با استفاده از Supabase Realtime اضافه کنید.

485وقتی کاربری یک وظیفه را به‌روزرسانی می‌کند، همه کاربران دیگر باید تغییر

486را بدون بارگذاری مجدد در لحظه ببینند.

487```

488~

489```typescript

490'use client';

491~

492import { useEffect, useState } from 'react';

493import { createClient } from '@/lib/supabase/client';

494import type { Task } from '@/types/database';

495~

496export function useRealtimeTasks(projectId: string) {

497 const [tasks, setTasks] = useState<Task[]>([]);

498 const supabase = createClient();

499~

500 useEffect(() => {

501 const channel = supabase

502 .channel('tasks-changes')

503 .on(

504 'postgres_changes',

505 {

506 event: '*',

507 schema: 'public',

508 table: 'tasks',

509 filter: `project_id=eq.${projectId}`,

510 },

511 (payload) => {

512 if (payload.eventType === 'INSERT') {

513 setTasks((prev) => [...prev, payload.new as Task]);

514 } else if (payload.eventType === 'UPDATE') {

515 setTasks((prev) =>

516 prev.map((t) =>

517 t.id === payload.new.id ? (payload.new as Task) : t

518 )

519 );

520 } else if (payload.eventType === 'DELETE') {

521 setTasks((prev) =>

522 prev.filter((t) => t.id !== payload.old.id)

523 );

524 }

525 }

526 )

527 .subscribe();

528~

529 return () => {

530 supabase.removeChannel(channel);

531 };

532 }, [projectId, supabase]);

533~

534 return tasks;

535}

536```

537~

538### حالت تاریک

539~

540```

541شما: پشتیبانی از حالت تاریک با دکمه تغییر در هدر اضافه کنید.

542از کلاس‌های dark Tailwind استفاده کنید و ترجیح را در localStorage ذخیره کنید.

543```

544~

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

546~

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

548~

549```

550نه: "یک صفحه زیبا بسازید"

551بله: "یک صفحه فرود با بخش hero با گرادیان بنفش-آبی،

552 بخش ویژگی‌ها با ۳ کارت با آیکون‌ها و یک دکمه CTA نارنجی ایجاد کنید"

553```

554~

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

556~

557```

558نه: "احراز هویت اضافه کنید"

559بله: "احراز هویت با Supabase Auth اضافه کنید. پروژه از Next.js 15 App

560 Router با TypeScript استفاده می‌کند. ورود ایمیل/رمز عبور و OAuth با GitHub

561 می‌خواهم. از الگوی SSR با @supabase/ssr استفاده کنید"

562```

563~

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

565~

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

567~

5681. لایه‌بندی پایه

5692. یک ویژگی در هر بار

5703. استایل و پرداخت

5714. مدیریت خطا

5725. تست

573~

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

575~

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

577~

578- **امنیت**: سیاست‌های RLS، اعتبارسنجی ورودی، پاکسازی داده‌ها.

579- **عملکرد**: کوئری‌های N+1، کامپوننت‌های غیرضروری سمت کلاینت.

580- **بهترین شیوه‌ها**: ساختار پروژه، قراردادهای نامگذاری.

581~

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

583~

584```

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

586```

587~

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

589~

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

591~

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

593~

594| سرویس | طرح رایگان | چه زمانی پرداخت می‌کنید |

595|---------|-----------|-------------|

596| **Claude Code** | نیاز به اشتراک Anthropic (از $۲۰/ماه) یا کلید API | فوراً، اما ارزش بسیار زیاد است |

597| **Supabase** | سطح رایگان سخاوتمندانه (۲ پروژه، ۵۰۰ مگابایت DB) | فراتر از محدودیت‌های سطح رایگان |

598| **Vercel** | سطح رایگان برای پروژه‌های شخصی | برای تیم‌ها یا استفاده تجاری |

599| **GitHub** | رایگان برای مخازن عمومی و خصوصی | ویژگی‌های Enterprise |

600~

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

602~

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

604~

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

606~

607- **Cursor** (سطح رایگان با محدودیت‌ها).

608- **GitHub Copilot** (رایگان برای دانشجویان و متن‌باز).

609- **Codeium/Windsurf** (سطح رایگان سخاوتمندانه).

610~

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

612~

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

614~

615```mermaid

616flowchart TD

617 A[Live Demo] --> B{User Feedback}

618 B --> C[Product Iteration]

619 C --> D[Product-Market Fit]

620 D --> E[Scaling]

621 E --> F[Supabase Pro Plan]

622 E --> G[Vercel Pro Plan]

623 E --> H[Custom Domain]

624```

625~

6261. **بازخورد جمع‌آوری کنید**: دمو را با کاربران بالقوه به اشتراک بگذارید و نظرات جمع کنید.

6272. **سریع تکرار کنید**: از vibecoding برای پیاده‌سازی تغییرات درخواستی استفاده کنید.

6283. **معیارها را رصد کنید**: Vercel Analytics و Supabase Dashboard داده‌های ضروری به شما می‌دهند.

6294. **در صورت نیاز مقیاس دهید**: فقط زمانی به طرح‌های پولی ارتقا دهید که تقاضا را تأیید کرده باشید.

630~

631~

632## نتیجه‌گیری

633~

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

635~

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

637~

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

639~

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

641>

642> - [x] Claude Code نصب و پیکربندی شده

643> - [x] پروژه Supabase با اسکیمای پایگاه داده ایجاد شده

644> - [x] پروژه Next.js با shadcn/ui مقداردهی اولیه شده

645> - [x] احراز هویت پیکربندی شده

646> - [x] CRUD کامل پیاده‌سازی شده

647> - [x] رابط کاربری مدرن و واکنش‌گرا

648> - [x] در Vercel مستقر شده

649> - [x] URL قابل اشتراک آماده بازخورد

650~