1 
2**وائب کوڈنگ** ایک نیا سافٹ ویئر ڈیولپمنٹ پیراڈائم ہے جہاں پروگرامر قدرتی زبان کی ہدایات کے ذریعے AI ایجنٹ کی رہنمائی کرتا ہے، مصنوعی ذہانت کو اصل کوڈ لکھنے دیتا ہے۔ یہ اصطلاح Andrej Karpathy (OpenAI کے شریک بانی اور Tesla میں سابق AI ڈائریکٹر) نے فروری 2025 کے ایک مشہور ٹویٹ میں بنائی: _"ایک نئی قسم کی کوڈنگ ہے جسے میں وائب کوڈنگ کہتا ہوں، جہاں آپ مکمل طور پر وائبز کے حوالے ہو جاتے ہیں، ایکسپونینشلز کو قبول کرتے ہیں اور بھول جاتے ہیں کہ کوڈ بھی موجود ہے۔"_
3 
4اس مضمون میں، ہم دیکھیں گے کہ **Claude Code** کو AI ایجنٹ، **Supabase** کو بیک اینڈ (ڈیٹابیس، تصدیق، API) اور **Vercel** کو ڈیپلائمنٹ کے لیے استعمال کرتے ہوئے ایک مکمل، کام کرنے والا ڈیمو کیسے بنایا جائے  -  سب ان سروسز کے **مفت ٹیئرز** استعمال کرتے ہوئے۔
5 
6## 1. وائب کوڈنگ کیا ہے اور یہ انقلابی کیوں ہے
7 
8وائب کوڈنگ سافٹ ویئر ڈیولپمنٹ میں ایک بنیادی پیراڈائم شفٹ کی نمائندگی کرتی ہے۔ لائن بہ لائن کوڈ لکھنے کی بجائے، ڈیولپر:
9 
101. قدرتی زبان میں جو چاہتے ہیں اسے **بیان کرتے ہیں**۔
112. **AI ایجنٹ** مکمل کوڈ تیار کرتا ہے۔
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### وائب کوڈنگ کب استعمال کریں
32 
33وائب کوڈنگ ان کے لیے بہترین ہے:
34 
35- **ڈیموز اور MVP**: آئیڈیا کی توثیق کے لیے تیزی سے پروٹوٹائپ بنانا۔
36- **ہیکاتھون**: صرف چند گھنٹوں میں کام کرنے والا پروڈکٹ بنانا۔
37- **ذاتی پروجیکٹس**: ہفتے خرچ کیے بغیر نئی ٹیکنالوجیز کی تلاش۔
38- **پروف آف کانسیپٹ**: اسٹیک ہولڈرز یا سرمایہ کاروں کو تکنیکی قابلیت کا مظاہرہ۔
39 
40> **انتباہ:** وائب کوڈنگ ڈیموز اور پروٹوٹائپس کے لیے بہترین ہے۔ اعلیٰ سیکیورٹی اور اسکیل ایبلٹی کے تقاضوں والی پروڈکشن گریڈ ایپلیکیشنز کے لیے، تیار کردہ کوڈ کا مکمل جائزہ اب بھی ضروری ہے۔
41 
42## 2. ٹیک اسٹیک: Claude Code + Supabase + Vercel
43 
44### Claude Code
45 
46Claude Code، Anthropic کا AI کوڈنگ ایجنٹ ہے۔ یہ براہ راست آپ کے ٹرمینل میں کام کرتا ہے اور یہ کر سکتا ہے:
47 
48- پوری کوڈبیس کو پڑھنا اور سمجھنا۔
49- فائلیں بنانا، تبدیل کرنا اور حذف کرنا۔
50- ٹرمینل کمانڈز چلانا۔
51- APIs اور بیرونی سروسز کے ساتھ بات چیت کرنا۔
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- **REST اور Realtime APIs**: آپ کے اسکیما سے خود بخود تیار۔
71- **اسٹوریج**: فائلز اور تصاویر کے لیے۔
72- **Edge Functions**: سرور لیس فنکشنز۔
73 
74مفت ٹیئر میں شامل ہے:
75 
76| وسیلہ | مفت حد |
77|----------|-----------|
78| ڈیٹابیس | 500 MB |
79| اسٹوریج | 1 GB |
80| بینڈوڈتھ | 5 GB |
81| Edge Function انووکیشنز | 500K/ماہ |
82| تصدیق شدہ صارفین | لامحدود |
83| پروجیکٹس | 2 فعال پروجیکٹس |
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 GB/ماہ |
100| Serverless Function عملدرآمد | 100 GB-گھنٹے/ماہ |
101| بلڈز | 6,000 منٹ/ماہ |
102| پروجیکٹس | لامحدود |
103| ڈیپلائمنٹس | لامحدود |
104 
105## 3. ابتدائی سیٹ اپ: ماحول تیار کرنا
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### مرحلہ 1: پروجیکٹ بنائیں
119 
120ٹرمینل کھولیں اور Claude Code شروع کریں:
121 
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126 
127اب آپ Claude Code کو قدرتی زبان میں ہدایات دینا شروع کر سکتے ہیں:
128 
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
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### مرحلہ 2: Supabase کنفیگر کریں
143 
1441. [supabase.com](https://supabase.com) پر جائیں اور نیا پروجیکٹ بنائیں۔
1452. Settings > API سے **Project URL** اور **anon key** نوٹ کریں۔
1463. Claude Code کے ساتھ ٹرمینل میں واپس آئیں:
147 
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for 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## 4. ڈیمو بنانا: ٹاسک مینجمنٹ ایپ
196 
197آئیے ایک ٹھوس ڈیمو بنائیں: تصدیق، مکمل CRUD اور جدید انٹرفیس کے ساتھ ایک **ٹاسک مینجمنٹ ایپ**۔
198 
199### ڈیٹابیس اسکیما کی تعریف
200 
201اسکیما بنانے کے لیے Claude Code کو ہدایات دیں:
202 
203```
204You: Create a SQL migration for Supabase with the following tables:
205 
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214 
215Enable Row Level Security on all tables and create appropriate policies.
216```
217 
218Claude Code ایک مکمل مائیگریشن تیار کرے گا:
219 
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224 
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232 
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241 
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255 
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260 
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266 
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276 
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295 
296آپ یہ مائیگریشن براہ راست Supabase ڈیش بورڈ (SQL Editor) سے یا CLI کے ذریعے چلا سکتے ہیں۔
297 
298### TypeScript ٹائپس تیار کریں
299 
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303 
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307 
308### یوزر انٹرفیس بنائیں
309 
310اب وائب کوڈنگ کا سب سے طاقتور حصہ آتا ہے۔ Claude Code کو اعلیٰ سطحی ہدایات دیں:
311 
312```
313You: Create a dashboard page for the task management app with:
314 
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320 
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324 
325Claude Code پورا انٹرفیس بنائے گا، ایک ایک کمپوننٹ کر کے۔
326 
327### تصدیق شامل کریں
328 
329```
330You: Add a complete authentication system with:
331 
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338 
339Claude Code Next.js middleware اور auth صفحات کنفیگر کرے گا:
340 
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345 
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348 
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369 
370  const { data: { user } } = await supabase.auth.getUser();
371 
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377 
378  return supabaseResponse;
379}
380 
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385 
386## 5. ایڈوانسڈ وائب کوڈنگ پیٹرنز
387 
388### تکراری پرامپٹنگ
389 
390مؤثر وائب کوڈنگ کا راز **تکرار** ہے۔ ایک ہی پرامپٹ میں سب کچھ بیان کرنے کی کوشش نہ کریں۔ مراحل میں آگے بڑھیں:
391 
392```
393Step 1: "Create the base layout with header and sidebar"
394Step 2: "Add the project list in the sidebar with a button to create new ones"
395Step 3: "Create the Kanban view in the main area"
396Step 4: "Add drag & drop between columns"
397Step 5: "Implement the modal to create new tasks"
398Step 6: "Add toast notifications for user feedback"
399```
400 
401> **ٹپ:** پرامپٹ جتنا زیادہ مخصوص اور سیاق و سباق سے بھرپور ہوگا، نتیجہ اتنا بہتر ہوگا۔ Claude Code کو پوری کوڈبیس تک رسائی ہے، اس لیے یہ نئی خصوصیات کو مربوط طریقے سے ضم کر سکتا ہے۔
402 
403### غلطیوں کا انتظام
404 
405جب کچھ کام نہ کرے (اور ایسا ہوگا)، آپ صرف کہہ سکتے ہیں:
406 
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411 
412Claude Code کوڈ کا تجزیہ کرے گا، مسئلہ شناخت کرے گا اور ٹھیک کرے گا۔
413 
414### AI کے ساتھ ری فیکٹرنگ
415 
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420 
421### ٹیسٹنگ
422 
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427 
428## 6. Vercel پر ڈیپلائے: کوڈ سے دنیا تک
429 
430### مرحلہ 1: GitHub پر پش کریں
431 
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436 
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442 
443### مرحلہ 2: Vercel جوڑیں
444 
4451. [vercel.com](https://vercel.com) پر جائیں اور "Add New Project" پر کلک کریں۔
4462. ابھی بنائی ہوئی GitHub ریپوزٹری امپورٹ کریں۔
4473. ماحولیاتی متغیرات شامل کریں:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. "Deploy" پر کلک کریں۔
451 
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Automatic Deploy]
456    C --> D[Public URL]
457    D --> E[Global CDN]
458```
459 
460### مرحلہ 3: حسب ضرورت ڈومین کنفیگر کریں (اختیاری)
461 
462Vercel `my-demo-app.vercel.app` جیسا مفت URL فراہم کرتا ہے۔ حسب ضرورت ڈومین کے لیے:
463 
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467 
468### پریویو ڈیپلائمنٹس
469 
470ہر بار جب آپ GitHub پر Pull Request کھولتے ہیں، Vercel خود بخود ایک منفرد URL کے ساتھ **پریویو ڈیپلائمنٹ** بنائے گا۔ مرج سے پہلے تبدیلیاں دکھانے کے لیے بالکل مناسب۔
471 
472## 7. آپ کے ڈیمو کے لیے اصلاح
473 
474### کارکردگی
475 
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483 
484### Supabase کے ساتھ ریئل ٹائم
485 
486ایک خصوصیت جو ڈیموز میں ہمیشہ متاثر کرتی ہے وہ **ریئل ٹائم** ہے:
487 
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493 
494```typescript
495'use client';
496 
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500 
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504 
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533 
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538 
539  return tasks;
540}
541```
542 
543### ڈارک موڈ
544 
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549 
550## 8. مؤثر وائب کوڈنگ کے بہترین طریقے
551 
552### 1. اپنے پرامپٹس میں مخصوص رہیں
553 
554```
555❌ "Make a nice page"
556✅ "Create a landing page with a hero section with a purple-blue gradient,
557   a features section with 3 cards with icons, and an orange CTA button"
558```
559 
560### 2. سیاق و سباق فراہم کریں
561 
562```
563❌ "Add authentication"
564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
565   Router with TypeScript. I want email/password login and OAuth with GitHub.
566   Use the SSR pattern with @supabase/ssr"
567```
568 
569### 3. چھوٹے مراحل میں دہرائیں
570 
571ایک ہی پرامپٹ میں سب کچھ بنانے کی کوشش نہ کریں۔ بتدریج آگے بڑھیں:
572 
5731. بنیادی لے آؤٹ
5742. ایک وقت میں ایک خصوصیت
5753. اسٹائلنگ اور پالش
5764. غلطیوں کا انتظام
5775. ٹیسٹنگ
578 
579### 4. تیار کردہ کوڈ کا جائزہ لیں
580 
581وائب کوڈنگ کا مطلب کوڈ نہ پڑھنا نہیں ہے۔ ہمیشہ جائزہ لیں:
582 
583- **سیکیورٹی**: RLS پالیسیاں، ان پٹ توثیق، ڈیٹا صاف کرنا۔
584- **کارکردگی**: N+1 کوئریز، غیر ضروری کلائنٹ سائیڈ کمپوننٹس۔
585- **بہترین طریقے**: پروجیکٹ ڈھانچہ، نام رکھنے کے اصول۔
586 
587### 5. Git حکمت عملی سے استعمال کریں
588 
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592 
593اگر کچھ غلط ہو جائے تو یہ آپ کو واپس لوٹنے دیتا ہے۔
594 
595## 9. لاگت: کیا واقعی سب مفت ہے؟
596 
597ہر سروس کے لیے لاگت کا تجزیہ:
598 
599| سروس | مفت منصوبہ | کب آپ ادائیگی کرتے ہیں |
600|---------|-----------|-------------|
601| **Claude Code** | Anthropic منصوبہ درکار ($20/ماہ سے شروع) یا API کلید | فوری طور پر، لیکن قدر بے حد ہے |
602| **Supabase** | فراخ دل مفت ٹیئر (2 پروجیکٹس، 500MB DB) | مفت ٹیئر حدود سے تجاوز پر |
603| **Vercel** | ذاتی پروجیکٹس کے لیے مفت ٹیئر | ٹیموں یا تجارتی استعمال کے لیے |
604| **GitHub** | عوامی اور نجی ریپوز کے لیے مفت | انٹرپرائز خصوصیات |
605 
606> **نوٹ:** Claude Code کو سبسکرپشن یا API کریڈٹس کی ضرورت ہے، لیکن ڈیولپمنٹ کی رفتار کے لحاظ سے سرمایہ کاری پر واپسی غیر معمولی ہے۔ ڈیمو یا MVP کے لیے، کل لاگت $20 کے لگ بھگ ہے۔
607 
608### مفت AI متبادلات
609 
610اگر آپ لاگت کو بالکل صفر رکھنا چاہتے ہیں:
611 
612- **Cursor** (حدود کے ساتھ مفت ٹیئر)۔
613- **GitHub Copilot** (طلباء اور اوپن سورس کے لیے مفت)۔
614- **Codeium/Windsurf** (فراخ دل مفت ٹیئر)۔
615 
616## 10. ڈیمو سے پروڈکٹ تک: اگلے مراحل
617 
618آپ کا ڈیمو لائیو ہونے کے بعد، آگے بڑھنے کا طریقہ:
619 
620```mermaid
621flowchart TD
622    A[Live Demo] --> B{User Feedback}
623    B --> C[Product Iteration]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Custom Domain]
629```
630 
6311. **فیڈبیک جمع کریں**: ممکنہ صارفین کے ساتھ ڈیمو شیئر کریں اور رائے جمع کریں۔
6322. **تیزی سے دہرائیں**: درخواست کردہ تبدیلیوں کو نافذ کرنے کے لیے وائب کوڈنگ استعمال کریں۔
6333. **میٹرکس مانیٹر کریں**: Vercel Analytics اور Supabase Dashboard آپ کو ضروری ڈیٹا دیتے ہیں۔
6344. **ضرورت پر اسکیل کریں**: صرف مانگ کی توثیق کے بعد ادا شدہ منصوبوں میں اپ گریڈ کریں۔
635 
636 
637## نتیجہ
638 
639Claude Code، Supabase اور Vercel کے ساتھ وائب کوڈنگ ریکارڈ وقت میں ڈیموز اور MVPs بنانے کے لیے ایک طاقتور مجموعہ ہے۔ جو پہلے ہفتوں کی ڈیولپمنٹ لیتا تھا اب صرف چند گھنٹوں میں مکمل ہو سکتا ہے، حیرت انگیز اعلیٰ معیار کے ساتھ۔
640 
641کلید یہ ہے کہ صحیح ذہنیت کے ساتھ وائب کوڈنگ کی طرف آئیں: یہ "کوڈ کرنا نہ جاننے" کے بارے میں نہیں ہے بلکہ AI ٹولز کے ساتھ **اپنی صلاحیتوں کو بڑھانے** کے بارے میں ہے۔ آپ بنیادی ٹیکنالوجیز (React, SQL, تصدیق، ڈیپلائمنٹ) کے بارے میں جتنا زیادہ جانتے ہیں، AI ایجنٹ کو مطلوبہ نتیجے کی طرف رہنمائی کرنے میں اتنے ہی مؤثر ہوں گے۔
642 
643سافٹ ویئر ڈیولپمنٹ کا مستقبل یہاں ہے، اور شروع کرنے کی لاگت پہلے کبھی اتنی کم نہیں تھی۔ اپنا ڈیمو بنائیں، حقیقی صارفین سے توثیق کریں، اور اگلا عظیم پروڈکٹ بنائیں۔
644 
645> **آپ کے پہلے ڈیمو کے لیے چیک لسٹ:**
646>
647> - [x] Claude Code انسٹال اور کنفیگر ہو گیا
648> - [x] ڈیٹابیس اسکیما کے ساتھ Supabase پروجیکٹ بنایا گیا
649> - [x] shadcn/ui کے ساتھ Next.js پروجیکٹ شروع کیا گیا
650> - [x] تصدیق کنفیگر ہو گئی
651> - [x] مکمل CRUD لاگو ہو گیا
652> - [x] جدید اور ریسپانسو UI
653> - [x] Vercel پر ڈیپلائے ہو گیا
654> - [x] فیڈبیک کے لیے شیئر کرنے والا URL تیار ہے
655