Claude Code کے ساتھ ڈیمو کیسے بنائیں: Supabase اور Vercel کے ساتھ وائب کوڈنگ

وائب کوڈنگ ایک نیا سافٹ ویئر ڈیولپمنٹ پیراڈائم ہے جہاں پروگرامر قدرتی زبان کی ہدایات کے ذریعے AI ایجنٹ کی رہنمائی کرتا ہے، مصنوعی ذہانت کو اصل کوڈ لکھنے دیتا ہے۔ یہ اصطلاح Andrej Karpathy (OpenAI کے شریک بانی اور Tesla میں سابق AI ڈائریکٹر) نے فروری 2025 کے ایک مشہور ٹویٹ میں بنائی: "ایک نئی قسم کی کوڈنگ ہے جسے میں وائب کوڈنگ کہتا ہوں، جہاں آپ مکمل طور پر وائبز کے حوالے ہو جاتے ہیں، ایکسپونینشلز کو قبول کرتے ہیں اور بھول جاتے ہیں کہ کوڈ بھی موجود ہے۔"

اس مضمون میں، ہم دیکھیں گے کہ Claude Code کو AI ایجنٹ، Supabase کو بیک اینڈ (ڈیٹابیس، تصدیق، API) اور Vercel کو ڈیپلائمنٹ کے لیے استعمال کرتے ہوئے ایک مکمل، کام کرنے والا ڈیمو کیسے بنایا جائے — سب ان سروسز کے مفت ٹیئرز استعمال کرتے ہوئے۔

1. وائب کوڈنگ کیا ہے اور یہ انقلابی کیوں ہے

وائب کوڈنگ سافٹ ویئر ڈیولپمنٹ میں ایک بنیادی پیراڈائم شفٹ کی نمائندگی کرتی ہے۔ لائن بہ لائن کوڈ لکھنے کی بجائے، ڈیولپر:

قدرتی زبان میں جو چاہتے ہیں اسے بیان کرتے ہیں۔
AI ایجنٹ مکمل کوڈ تیار کرتا ہے۔
ڈیولپر جائزہ لیتا ہے، ٹیسٹ کرتا ہے اور دہراتا ہے۔

یہ کیوں کام کرتا ہے

رفتار: جس پروجیکٹ میں دن لگتے وہ گھنٹوں میں بنایا جا سکتا ہے۔
رسائی: غیر ماہر ڈیولپرز بھی کام کرنے والے پروڈکٹس بنا سکتے ہیں۔
تیز تکرار: آپ آئیڈیاز ٹیسٹ کر سکتے ہیں اور بہت تیزی سے رخ بدل سکتے ہیں۔
پروڈکٹ پر توجہ: آپ کیسے کی بجائے کیا پر توجہ مرکوز کرتے ہیں۔

وائب کوڈنگ کب استعمال کریں

وائب کوڈنگ ان کے لیے بہترین ہے:

ڈیموز اور MVP: آئیڈیا کی توثیق کے لیے تیزی سے پروٹوٹائپ بنانا۔
ہیکاتھون: صرف چند گھنٹوں میں کام کرنے والا پروڈکٹ بنانا۔
ذاتی پروجیکٹس: ہفتے خرچ کیے بغیر نئی ٹیکنالوجیز کی تلاش۔
پروف آف کانسیپٹ: اسٹیک ہولڈرز یا سرمایہ کاروں کو تکنیکی قابلیت کا مظاہرہ۔

انتباہ: وائب کوڈنگ ڈیموز اور پروٹوٹائپس کے لیے بہترین ہے۔ اعلیٰ سیکیورٹی اور اسکیل ایبلٹی کے تقاضوں والی پروڈکشن گریڈ ایپلیکیشنز کے لیے، تیار کردہ کوڈ کا مکمل جائزہ اب بھی ضروری ہے۔

2. ٹیک اسٹیک: Claude Code + Supabase + Vercel

Claude Code

Claude Code، Anthropic کا AI کوڈنگ ایجنٹ ہے۔ یہ براہ راست آپ کے ٹرمینل میں کام کرتا ہے اور یہ کر سکتا ہے:

پوری کوڈبیس کو پڑھنا اور سمجھنا۔
فائلیں بنانا، تبدیل کرنا اور حذف کرنا۔
ٹرمینل کمانڈز چلانا۔
APIs اور بیرونی سروسز کے ساتھ بات چیت کرنا۔
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 وغیرہ سے لاگ ان۔
REST اور Realtime APIs: آپ کے اسکیما سے خود بخود تیار۔
اسٹوریج: فائلز اور تصاویر کے لیے۔
Edge Functions: سرور لیس فنکشنز۔

مفت ٹیئر میں شامل ہے:

| وسیلہ | مفت حد | |----------|-----------| | ڈیٹابیس | 500 MB | | اسٹوریج | 1 GB | | بینڈوڈتھ | 5 GB | | Edge Function انووکیشنز | 500K/ماہ | | تصدیق شدہ صارفین | لامحدود | | پروجیکٹس | 2 فعال پروجیکٹس |

Vercel (مفت ٹیئر)

Vercel، Next.js ایپلیکیشنز کے لیے بہترین ڈیپلائمنٹ پلیٹ فارم ہے:

GitHub سے خودکار ڈیپلائمنٹ۔
ہر برانچ اور PR کے لیے پریویو ڈیپلائمنٹس۔
بہترین کارکردگی کے لیے عالمی CDN۔
Serverless Functions شامل۔
مفت بنیادی تجزیات۔

مفت ٹیئر میں شامل ہے:

| وسیلہ | مفت حد | |----------|-----------| | بینڈوڈتھ | 100 GB/ماہ | | Serverless Function عملدرآمد | 100 GB-گھنٹے/ماہ | | بلڈز | 6,000 منٹ/ماہ | | پروجیکٹس | لامحدود | | ڈیپلائمنٹس | لامحدود |

3. ابتدائی سیٹ اپ: ماحول تیار کرنا

پیش شرائط

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس ہے:

Node.js 18+ انسٹال ہے۔
Git کنفیگر ہے۔
GitHub اکاؤنٹ۔
Supabase اکاؤنٹ (supabase.com پر مفت)۔
Vercel اکاؤنٹ (vercel.com پر مفت)۔
Claude Code انسٹال (npm install -g @anthropic-ai/claude-code)۔

مرحلہ 1: پروجیکٹ بنائیں

ٹرمینل کھولیں اور Claude Code شروع کریں:

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

اب آپ 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 خود بخود چلائے گا:

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

مرحلہ 2: Supabase کنفیگر کریں

supabase.com پر جائیں اور نیا پروجیکٹ بنائیں۔
Settings > API سے Project URL اور anon key نوٹ کریں۔
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 مکمل کنفیگریشن بنائے گا:

// 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. ڈیمو بنانا: ٹاسک مینجمنٹ ایپ

آئیے ایک ٹھوس ڈیمو بنائیں: تصدیق، مکمل CRUD اور جدید انٹرفیس کے ساتھ ایک ٹاسک مینجمنٹ ایپ۔

ڈیٹابیس اسکیما کی تعریف

اسکیما بنانے کے لیے Claude Code کو ہدایات دیں:

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 ایک مکمل مائیگریشن تیار کرے گا:

-- 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 ٹائپس تیار کریں

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

یوزر انٹرفیس بنائیں

اب وائب کوڈنگ کا سب سے طاقتور حصہ آتا ہے۔ Claude Code کو اعلیٰ سطحی ہدایات دیں:

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 پورا انٹرفیس بنائے گا، ایک ایک کمپوننٹ کر کے۔

تصدیق شامل کریں

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 Next.js middleware اور 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).*)'],
};

5. ایڈوانسڈ وائب کوڈنگ پیٹرنز

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

مؤثر وائب کوڈنگ کا راز تکرار ہے۔ ایک ہی پرامپٹ میں سب کچھ بیان کرنے کی کوشش نہ کریں۔ مراحل میں آگے بڑھیں:

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"

ٹپ: پرامپٹ جتنا زیادہ مخصوص اور سیاق و سباق سے بھرپور ہوگا، نتیجہ اتنا بہتر ہوگا۔ Claude Code کو پوری کوڈبیس تک رسائی ہے، اس لیے یہ نئی خصوصیات کو مربوط طریقے سے ضم کر سکتا ہے۔

غلطیوں کا انتظام

جب کچھ کام نہ کرے (اور ایسا ہوگا)، آپ صرف کہہ سکتے ہیں:

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

Claude Code کوڈ کا تجزیہ کرے گا، مسئلہ شناخت کرے گا اور ٹھیک کرے گا۔

AI کے ساتھ ری فیکٹرنگ

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

ٹیسٹنگ

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

6. Vercel پر ڈیپلائے: کوڈ سے دنیا تک

مرحلہ 1: 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=.

مرحلہ 2: Vercel جوڑیں

vercel.com پر جائیں اور "Add New Project" پر کلک کریں۔
ابھی بنائی ہوئی GitHub ریپوزٹری امپورٹ کریں۔
ماحولیاتی متغیرات شامل کریں:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
"Deploy" پر کلک کریں۔

مرحلہ 3: حسب ضرورت ڈومین کنفیگر کریں (اختیاری)

Vercel my-demo-app.vercel.app جیسا مفت URL فراہم کرتا ہے۔ حسب ضرورت ڈومین کے لیے:

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

پریویو ڈیپلائمنٹس

ہر بار جب آپ GitHub پر Pull Request کھولتے ہیں، Vercel خود بخود ایک منفرد URL کے ساتھ پریویو ڈیپلائمنٹ بنائے گا۔ مرج سے پہلے تبدیلیاں دکھانے کے لیے بالکل مناسب۔

7. آپ کے ڈیمو کے لیے اصلاح

کارکردگی

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

Supabase کے ساتھ ریئل ٹائم

ایک خصوصیت جو ڈیموز میں ہمیشہ متاثر کرتی ہے وہ ریئل ٹائم ہے:

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

ڈارک موڈ

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

8. مؤثر وائب کوڈنگ کے بہترین طریقے

1. اپنے پرامپٹس میں مخصوص رہیں

❌ "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. سیاق و سباق فراہم کریں

❌ "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. چھوٹے مراحل میں دہرائیں

ایک ہی پرامپٹ میں سب کچھ بنانے کی کوشش نہ کریں۔ بتدریج آگے بڑھیں:

بنیادی لے آؤٹ
ایک وقت میں ایک خصوصیت
اسٹائلنگ اور پالش
غلطیوں کا انتظام
ٹیسٹنگ

4. تیار کردہ کوڈ کا جائزہ لیں

وائب کوڈنگ کا مطلب کوڈ نہ پڑھنا نہیں ہے۔ ہمیشہ جائزہ لیں:

سیکیورٹی: RLS پالیسیاں، ان پٹ توثیق، ڈیٹا صاف کرنا۔
کارکردگی: N+1 کوئریز، غیر ضروری کلائنٹ سائیڈ کمپوننٹس۔
بہترین طریقے: پروجیکٹ ڈھانچہ، نام رکھنے کے اصول۔

5. Git حکمت عملی سے استعمال کریں

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

اگر کچھ غلط ہو جائے تو یہ آپ کو واپس لوٹنے دیتا ہے۔

9. لاگت: کیا واقعی سب مفت ہے؟

ہر سروس کے لیے لاگت کا تجزیہ:

| سروس | مفت منصوبہ | کب آپ ادائیگی کرتے ہیں | |---------|-----------|-------------| | Claude Code | Anthropic منصوبہ درکار ($20/ماہ سے شروع) یا API کلید | فوری طور پر، لیکن قدر بے حد ہے | | Supabase | فراخ دل مفت ٹیئر (2 پروجیکٹس، 500MB DB) | مفت ٹیئر حدود سے تجاوز پر | | Vercel | ذاتی پروجیکٹس کے لیے مفت ٹیئر | ٹیموں یا تجارتی استعمال کے لیے | | GitHub | عوامی اور نجی ریپوز کے لیے مفت | انٹرپرائز خصوصیات |

نوٹ: Claude Code کو سبسکرپشن یا API کریڈٹس کی ضرورت ہے، لیکن ڈیولپمنٹ کی رفتار کے لحاظ سے سرمایہ کاری پر واپسی غیر معمولی ہے۔ ڈیمو یا MVP کے لیے، کل لاگت $20 کے لگ بھگ ہے۔

مفت AI متبادلات

اگر آپ لاگت کو بالکل صفر رکھنا چاہتے ہیں:

Cursor (حدود کے ساتھ مفت ٹیئر)۔
GitHub Copilot (طلباء اور اوپن سورس کے لیے مفت)۔
Codeium/Windsurf (فراخ دل مفت ٹیئر)۔

10. ڈیمو سے پروڈکٹ تک: اگلے مراحل

آپ کا ڈیمو لائیو ہونے کے بعد، آگے بڑھنے کا طریقہ:

فیڈبیک جمع کریں: ممکنہ صارفین کے ساتھ ڈیمو شیئر کریں اور رائے جمع کریں۔
تیزی سے دہرائیں: درخواست کردہ تبدیلیوں کو نافذ کرنے کے لیے وائب کوڈنگ استعمال کریں۔
میٹرکس مانیٹر کریں: Vercel Analytics اور Supabase Dashboard آپ کو ضروری ڈیٹا دیتے ہیں۔
ضرورت پر اسکیل کریں: صرف مانگ کی توثیق کے بعد ادا شدہ منصوبوں میں اپ گریڈ کریں۔

نتیجہ

Claude Code، Supabase اور Vercel کے ساتھ وائب کوڈنگ ریکارڈ وقت میں ڈیموز اور MVPs بنانے کے لیے ایک طاقتور مجموعہ ہے۔ جو پہلے ہفتوں کی ڈیولپمنٹ لیتا تھا اب صرف چند گھنٹوں میں مکمل ہو سکتا ہے، حیرت انگیز اعلیٰ معیار کے ساتھ۔

کلید یہ ہے کہ صحیح ذہنیت کے ساتھ وائب کوڈنگ کی طرف آئیں: یہ "کوڈ کرنا نہ جاننے" کے بارے میں نہیں ہے بلکہ AI ٹولز کے ساتھ اپنی صلاحیتوں کو بڑھانے کے بارے میں ہے۔ آپ بنیادی ٹیکنالوجیز (React, SQL, تصدیق، ڈیپلائمنٹ) کے بارے میں جتنا زیادہ جانتے ہیں، AI ایجنٹ کو مطلوبہ نتیجے کی طرف رہنمائی کرنے میں اتنے ہی مؤثر ہوں گے۔

سافٹ ویئر ڈیولپمنٹ کا مستقبل یہاں ہے، اور شروع کرنے کی لاگت پہلے کبھی اتنی کم نہیں تھی۔ اپنا ڈیمو بنائیں، حقیقی صارفین سے توثیق کریں، اور اگلا عظیم پروڈکٹ بنائیں۔

آپ کے پہلے ڈیمو کے لیے چیک لسٹ:

[x] Claude Code انسٹال اور کنفیگر ہو گیا

[x] ڈیٹابیس اسکیما کے ساتھ Supabase پروجیکٹ بنایا گیا

[x] shadcn/ui کے ساتھ Next.js پروجیکٹ شروع کیا گیا

[x] تصدیق کنفیگر ہو گئی

[x] مکمل CRUD لاگو ہو گیا

[x] جدید اور ریسپانسو UI

[x] Vercel پر ڈیپلائے ہو گیا

[x] فیڈبیک کے لیے شیئر کرنے والا URL تیار ہے

1. وائب کوڈنگ کیا ہے اور یہ انقلابی کیوں ہے

قدرتی زبان میں جو چاہتے ہیں اسے بیان کرتے ہیں۔
AI ایجنٹ مکمل کوڈ تیار کرتا ہے۔
ڈیولپر جائزہ لیتا ہے، ٹیسٹ کرتا ہے اور دہراتا ہے۔

یہ کیوں کام کرتا ہے

رفتار: جس پروجیکٹ میں دن لگتے وہ گھنٹوں میں بنایا جا سکتا ہے۔
رسائی: غیر ماہر ڈیولپرز بھی کام کرنے والے پروڈکٹس بنا سکتے ہیں۔
تیز تکرار: آپ آئیڈیاز ٹیسٹ کر سکتے ہیں اور بہت تیزی سے رخ بدل سکتے ہیں۔
پروڈکٹ پر توجہ: آپ کیسے کی بجائے کیا پر توجہ مرکوز کرتے ہیں۔

وائب کوڈنگ کب استعمال کریں

وائب کوڈنگ ان کے لیے بہترین ہے:

ڈیموز اور MVP: آئیڈیا کی توثیق کے لیے تیزی سے پروٹوٹائپ بنانا۔
ہیکاتھون: صرف چند گھنٹوں میں کام کرنے والا پروڈکٹ بنانا۔
ذاتی پروجیکٹس: ہفتے خرچ کیے بغیر نئی ٹیکنالوجیز کی تلاش۔
پروف آف کانسیپٹ: اسٹیک ہولڈرز یا سرمایہ کاروں کو تکنیکی قابلیت کا مظاہرہ۔

انتباہ: وائب کوڈنگ ڈیموز اور پروٹوٹائپس کے لیے بہترین ہے۔ اعلیٰ سیکیورٹی اور اسکیل ایبلٹی کے تقاضوں والی پروڈکشن گریڈ ایپلیکیشنز کے لیے، تیار کردہ کوڈ کا مکمل جائزہ اب بھی ضروری ہے۔

2. ٹیک اسٹیک: Claude Code + Supabase + Vercel

Claude Code

Claude Code، Anthropic کا AI کوڈنگ ایجنٹ ہے۔ یہ براہ راست آپ کے ٹرمینل میں کام کرتا ہے اور یہ کر سکتا ہے:

پوری کوڈبیس کو پڑھنا اور سمجھنا۔
فائلیں بنانا، تبدیل کرنا اور حذف کرنا۔
ٹرمینل کمانڈز چلانا۔
APIs اور بیرونی سروسز کے ساتھ بات چیت کرنا۔
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 وغیرہ سے لاگ ان۔
REST اور Realtime APIs: آپ کے اسکیما سے خود بخود تیار۔
اسٹوریج: فائلز اور تصاویر کے لیے۔
Edge Functions: سرور لیس فنکشنز۔

مفت ٹیئر میں شامل ہے:

Vercel (مفت ٹیئر)

Vercel، Next.js ایپلیکیشنز کے لیے بہترین ڈیپلائمنٹ پلیٹ فارم ہے:

GitHub سے خودکار ڈیپلائمنٹ۔
ہر برانچ اور PR کے لیے پریویو ڈیپلائمنٹس۔
بہترین کارکردگی کے لیے عالمی CDN۔
Serverless Functions شامل۔
مفت بنیادی تجزیات۔

مفت ٹیئر میں شامل ہے:

3. ابتدائی سیٹ اپ: ماحول تیار کرنا

پیش شرائط

شروع کرنے سے پہلے، یقینی بنائیں کہ آپ کے پاس ہے:

Node.js 18+ انسٹال ہے۔
Git کنفیگر ہے۔
GitHub اکاؤنٹ۔
Supabase اکاؤنٹ (supabase.com پر مفت)۔
Vercel اکاؤنٹ (vercel.com پر مفت)۔
Claude Code انسٹال (npm install -g @anthropic-ai/claude-code)۔

مرحلہ 1: پروجیکٹ بنائیں

ٹرمینل کھولیں اور Claude Code شروع کریں:

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

اب آپ 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 خود بخود چلائے گا:

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

مرحلہ 2: Supabase کنفیگر کریں

supabase.com پر جائیں اور نیا پروجیکٹ بنائیں۔
Settings > API سے Project URL اور anon key نوٹ کریں۔
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 مکمل کنفیگریشن بنائے گا:

// 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. ڈیمو بنانا: ٹاسک مینجمنٹ ایپ

آئیے ایک ٹھوس ڈیمو بنائیں: تصدیق، مکمل CRUD اور جدید انٹرفیس کے ساتھ ایک ٹاسک مینجمنٹ ایپ۔

ڈیٹابیس اسکیما کی تعریف

اسکیما بنانے کے لیے Claude Code کو ہدایات دیں:

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 ایک مکمل مائیگریشن تیار کرے گا:

-- 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 ٹائپس تیار کریں

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

یوزر انٹرفیس بنائیں

اب وائب کوڈنگ کا سب سے طاقتور حصہ آتا ہے۔ Claude Code کو اعلیٰ سطحی ہدایات دیں:

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 پورا انٹرفیس بنائے گا، ایک ایک کمپوننٹ کر کے۔

تصدیق شامل کریں

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 Next.js middleware اور 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).*)'],
};

5. ایڈوانسڈ وائب کوڈنگ پیٹرنز

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

مؤثر وائب کوڈنگ کا راز تکرار ہے۔ ایک ہی پرامپٹ میں سب کچھ بیان کرنے کی کوشش نہ کریں۔ مراحل میں آگے بڑھیں:

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"

ٹپ: پرامپٹ جتنا زیادہ مخصوص اور سیاق و سباق سے بھرپور ہوگا، نتیجہ اتنا بہتر ہوگا۔ Claude Code کو پوری کوڈبیس تک رسائی ہے، اس لیے یہ نئی خصوصیات کو مربوط طریقے سے ضم کر سکتا ہے۔

غلطیوں کا انتظام

جب کچھ کام نہ کرے (اور ایسا ہوگا)، آپ صرف کہہ سکتے ہیں:

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

Claude Code کوڈ کا تجزیہ کرے گا، مسئلہ شناخت کرے گا اور ٹھیک کرے گا۔

AI کے ساتھ ری فیکٹرنگ

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

ٹیسٹنگ

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

6. Vercel پر ڈیپلائے: کوڈ سے دنیا تک

مرحلہ 1: 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=.

مرحلہ 2: Vercel جوڑیں

vercel.com پر جائیں اور "Add New Project" پر کلک کریں۔
ابھی بنائی ہوئی GitHub ریپوزٹری امپورٹ کریں۔
ماحولیاتی متغیرات شامل کریں:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
"Deploy" پر کلک کریں۔

مرحلہ 3: حسب ضرورت ڈومین کنفیگر کریں (اختیاری)

Vercel my-demo-app.vercel.app جیسا مفت URL فراہم کرتا ہے۔ حسب ضرورت ڈومین کے لیے:

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

پریویو ڈیپلائمنٹس

7. آپ کے ڈیمو کے لیے اصلاح

کارکردگی

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

Supabase کے ساتھ ریئل ٹائم

ایک خصوصیت جو ڈیموز میں ہمیشہ متاثر کرتی ہے وہ ریئل ٹائم ہے:

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

ڈارک موڈ

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

8. مؤثر وائب کوڈنگ کے بہترین طریقے

1. اپنے پرامپٹس میں مخصوص رہیں

❌ "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. سیاق و سباق فراہم کریں

❌ "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. چھوٹے مراحل میں دہرائیں

ایک ہی پرامپٹ میں سب کچھ بنانے کی کوشش نہ کریں۔ بتدریج آگے بڑھیں:

بنیادی لے آؤٹ
ایک وقت میں ایک خصوصیت
اسٹائلنگ اور پالش
غلطیوں کا انتظام
ٹیسٹنگ

4. تیار کردہ کوڈ کا جائزہ لیں

وائب کوڈنگ کا مطلب کوڈ نہ پڑھنا نہیں ہے۔ ہمیشہ جائزہ لیں:

سیکیورٹی: RLS پالیسیاں، ان پٹ توثیق، ڈیٹا صاف کرنا۔
کارکردگی: N+1 کوئریز، غیر ضروری کلائنٹ سائیڈ کمپوننٹس۔
بہترین طریقے: پروجیکٹ ڈھانچہ، نام رکھنے کے اصول۔

5. Git حکمت عملی سے استعمال کریں

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

اگر کچھ غلط ہو جائے تو یہ آپ کو واپس لوٹنے دیتا ہے۔

9. لاگت: کیا واقعی سب مفت ہے؟

ہر سروس کے لیے لاگت کا تجزیہ:

نوٹ: Claude Code کو سبسکرپشن یا API کریڈٹس کی ضرورت ہے، لیکن ڈیولپمنٹ کی رفتار کے لحاظ سے سرمایہ کاری پر واپسی غیر معمولی ہے۔ ڈیمو یا MVP کے لیے، کل لاگت $20 کے لگ بھگ ہے۔

مفت AI متبادلات

اگر آپ لاگت کو بالکل صفر رکھنا چاہتے ہیں:

Cursor (حدود کے ساتھ مفت ٹیئر)۔
GitHub Copilot (طلباء اور اوپن سورس کے لیے مفت)۔
Codeium/Windsurf (فراخ دل مفت ٹیئر)۔

10. ڈیمو سے پروڈکٹ تک: اگلے مراحل

آپ کا ڈیمو لائیو ہونے کے بعد، آگے بڑھنے کا طریقہ:

فیڈبیک جمع کریں: ممکنہ صارفین کے ساتھ ڈیمو شیئر کریں اور رائے جمع کریں۔
تیزی سے دہرائیں: درخواست کردہ تبدیلیوں کو نافذ کرنے کے لیے وائب کوڈنگ استعمال کریں۔
میٹرکس مانیٹر کریں: Vercel Analytics اور Supabase Dashboard آپ کو ضروری ڈیٹا دیتے ہیں۔
ضرورت پر اسکیل کریں: صرف مانگ کی توثیق کے بعد ادا شدہ منصوبوں میں اپ گریڈ کریں۔

نتیجہ

آپ کے پہلے ڈیمو کے لیے چیک لسٹ:

[x] Claude Code انسٹال اور کنفیگر ہو گیا

[x] ڈیٹابیس اسکیما کے ساتھ Supabase پروجیکٹ بنایا گیا

[x] shadcn/ui کے ساتھ Next.js پروجیکٹ شروع کیا گیا

[x] تصدیق کنفیگر ہو گئی

[x] مکمل CRUD لاگو ہو گیا

[x] جدید اور ریسپانسو UI

[x] Vercel پر ڈیپلائے ہو گیا

[x] فیڈبیک کے لیے شیئر کرنے والا URL تیار ہے