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

Claude Code দিয়ে কিভাবে একটি ডেমো তৈরি করবেন: Supabase এবং Vercel-এর সাথে ভাইবকোডিং

2026-03-02 · 14 min read · Filippo Spinella · এআই, ভাইবকোডিং, Supabase, Vercel

ভাইবকোডিং হলো একটি নতুন সফটওয়্যার ডেভেলপমেন্ট প্যারাডাইম যেখানে প্রোগ্রামার প্রাকৃতিক ভাষার নির্দেশনার মাধ্যমে একটি AI এজেন্টকে গাইড করে, এবং কৃত্রিম বুদ্ধিমত্তাকে প্রকৃত কোড লিখতে দেয়। শব্দটি তৈরি করেছেন Andrej Karpathy (OpenAI-এর সহ-প্রতিষ্ঠাতা এবং Tesla-র প্রাক্তন AI পরিচালক) ফেব্রুয়ারি ২০২৫-এর একটি বিখ্যাত টুইটে: "একটি নতুন ধরনের কোডিং আছে যাকে আমি ভাইবকোডিং বলি, যেখানে আপনি সম্পূর্ণভাবে ভাইবের কাছে নিজেকে সমর্পণ করেন, এক্সপোনেনশিয়ালকে আলিঙ্গন করেন এবং ভুলে যান যে কোডটি আদৌ বিদ্যমান।"

এই নিবন্ধে, আমরা দেখব কিভাবে Claude Code কে AI এজেন্ট হিসেবে, Supabase কে ব্যাকেন্ড (ডাটাবেস, অথেনটিকেশন, API) হিসেবে এবং Vercel কে ডিপ্লয়মেন্টের জন্য ব্যবহার করে একটি সম্পূর্ণ, কার্যকর ডেমো তৈরি করা যায় - সবকিছু এই সেবাগুলোর বিনামূল্যে টিয়ার ব্যবহার করে।

১. ভাইবকোডিং কী এবং কেন এটি বৈপ্লবিক

ভাইবকোডিং সফটওয়্যার ডেভেলপমেন্টে একটি মৌলিক প্যারাডাইম পরিবর্তন উপস্থাপন করে। লাইন বাই লাইন কোড লেখার পরিবর্তে, ডেভেলপার:

প্রাকৃতিক ভাষায় কী চান তা বর্ণনা করেন।
AI এজেন্ট সম্পূর্ণ কোড তৈরি করে।
ডেভেলপার পর্যালোচনা করেন, পরীক্ষা করেন এবং পুনরাবৃত্তি করেন।

কেন এটি কাজ করে

গতি: যে প্রকল্পে দিন লাগত তা ঘণ্টায় তৈরি করা যায়।
অ্যাক্সেসিবিলিটি: অ-বিশেষজ্ঞ ডেভেলপাররাও কার্যকর পণ্য তৈরি করতে পারেন।
দ্রুত পুনরাবৃত্তি: আপনি আইডিয়া পরীক্ষা করতে এবং পিভট করতে অনেক দ্রুত পারবেন।
পণ্যে মনোযোগ: আপনি কীভাবে এর পরিবর্তে কী তে মনোনিবেশ করেন।

কখন ভাইবকোডিং ব্যবহার করবেন

ভাইবকোডিং এর জন্য পারফেক্ট:

ডেমো এবং MVP: একটি আইডিয়া যাচাই করতে দ্রুত প্রোটোটাইপ তৈরি।
হ্যাকাথন: মাত্র কয়েক ঘণ্টায় একটি কার্যকর পণ্য তৈরি।
সাইড প্রজেক্ট: সপ্তাহ খরচ না করে নতুন প্রযুক্তি অন্বেষণ।
প্রুফ অফ কনসেপ্ট: স্টেকহোল্ডার বা বিনিয়োগকারীদের কাছে প্রযুক্তিগত সম্ভাব্যতা প্রদর্শন।

সতর্কতা: ভাইবকোডিং ডেমো এবং প্রোটোটাইপের জন্য চমৎকার। উচ্চ নিরাপত্তা এবং স্কেলেবিলিটি প্রয়োজনীয়তাসহ প্রোডাকশন-গ্রেড অ্যাপ্লিকেশনের জন্য, জেনারেটেড কোডের পুঙ্খানুপুঙ্খ পর্যালোচনা এখনও অপরিহার্য।

২. টেক স্ট্যাক: Claude Code + Supabase + Vercel

Claude Code

Claude Code হলো Anthropic-এর AI কোডিং এজেন্ট। এটি সরাসরি আপনার টার্মিনালে কাজ করে এবং পারে:

সম্পূর্ণ কোডবেস পড়তে এবং বুঝতে।
ফাইল তৈরি, পরিবর্তন এবং মুছতে।
টার্মিনাল কমান্ড চালাতে।
API এবং বাহ্যিক সেবার সাথে ইন্টার‌্যাক্ট করতে।
Git দিয়ে ভার্সনিং পরিচালনা করতে।
স্বয়ংক্রিয়ভাবে ত্রুটি এবং বাগে পুনরাবৃত্তি করতে।

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

# Start in a project directory
cd my-project
claude

Supabase (বিনামূল্যে টিয়ার)

Supabase হলো Firebase-এর একটি ওপেন-সোর্স বিকল্প যা প্রদান করে:

PostgreSQL ডাটাবেস: একটি সম্পূর্ণ রিলেশনাল ডাটাবেস।
অথেনটিকেশন: ইমেইল, Google, GitHub ইত্যাদি দিয়ে লগইন।
REST এবং Realtime API: আপনার স্কিমা থেকে স্বয়ংক্রিয়ভাবে তৈরি।
স্টোরেজ: ফাইল এবং ছবির জন্য।
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 মিনিট/মাস
প্রকল্প	সীমাহীন
ডিপ্লয়মেন্ট	সীমাহীন

৩. প্রাথমিক সেটআপ: পরিবেশ প্রস্তুত করা

পূর্বশর্ত

শুরু করার আগে, নিশ্চিত করুন আপনার কাছে আছে:

Node.js 18+ ইনস্টল করা।
Git কনফিগার করা।
একটি GitHub অ্যাকাউন্ট।
একটি Supabase অ্যাকাউন্ট (supabase.com-এ বিনামূল্যে)।
একটি Vercel অ্যাকাউন্ট (vercel.com-এ বিনামূল্যে)।
Claude Code ইনস্টল করা (npm install -g @anthropic-ai/claude-code)।

ধাপ ১: প্রকল্প তৈরি করুন

টার্মিনাল খুলুন এবং Claude Code শুরু করুন:

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

এখন আপনি Claude Code-কে প্রাকৃতিক ভাষায় নির্দেশনা দিতে শুরু করতে পারেন:

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"

ধাপ ২: 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)
          );
        },
      },
    }
  );
}

৪. ডেমো তৈরি করা: একটি টাস্ক ম্যানেজমেন্ট অ্যাপ

আসুন একটি কংক্রিট ডেমো তৈরি করি: অথেনটিকেশন, সম্পূর্ণ 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).*)'],
};

৫. অ্যাডভান্সড ভাইবকোডিং প্যাটার্ন

পুনরাবৃত্তিমূলক প্রম্পটিং

কার্যকর ভাইবকোডিং-এর রহস্য হলো পুনরাবৃত্তি। একটি একক প্রম্পটে সবকিছু বর্ণনা করার চেষ্টা করবেন না। ধাপে ধাপে এগিয়ে যান:

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.

৬. Vercel-এ ডিপ্লয়: কোড থেকে বিশ্বে

ধাপ ১: 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=.

ধাপ ২: Vercel সংযুক্ত করুন

vercel.com-এ যান এবং "Add New Project"-এ ক্লিক করুন।
আপনার সদ্য তৈরি করা GitHub রিপোজিটরি ইমপোর্ট করুন।
এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
"Deploy"-এ ক্লিক করুন।

ধাপ ৩: কাস্টম ডোমেইন কনফিগার করুন (ঐচ্ছিক)

Vercel my-demo-app.vercel.app-এর মতো একটি বিনামূল্যে URL প্রদান করে। কাস্টম ডোমেইনের জন্য:

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

প্রিভিউ ডিপ্লয়মেন্ট

প্রতিবার যখন আপনি GitHub-এ একটি Pull Request খোলেন, Vercel স্বয়ংক্রিয়ভাবে একটি অনন্য URL সহ একটি প্রিভিউ ডিপ্লয়মেন্ট তৈরি করবে। মার্জ করার আগে পরিবর্তন দেখানোর জন্য পারফেক্ট।

৭. আপনার ডেমোর জন্য অপ্টিমাইজেশন

পারফরম্যান্স

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.

৮. কার্যকর ভাইবকোডিং-এর সেরা অনুশীলন

১. আপনার প্রম্পটে নির্দিষ্ট হন

❌ "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"

২. প্রসঙ্গ প্রদান করুন

❌ "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"

৩. ছোট ধাপে পুনরাবৃত্তি করুন

একটি একক প্রম্পটে সবকিছু তৈরি করার চেষ্টা করবেন না। ক্রমান্বয়ে এগিয়ে যান:

বেস লেআউট
একবারে একটি ফিচার
স্টাইলিং এবং পলিশ
ত্রুটি সামলানো
টেস্টিং

৪. জেনারেটেড কোড পর্যালোচনা করুন

ভাইবকোডিং মানে কোড না পড়া নয়। সবসময় পর্যালোচনা করুন:

নিরাপত্তা: RLS পলিসি, ইনপুট ভ্যালিডেশন, ডেটা স্যানিটাইজেশন।
পারফরম্যান্স: N+1 কুয়েরি, অপ্রয়োজনীয় ক্লায়েন্ট-সাইড কম্পোনেন্ট।
সেরা অনুশীলন: প্রকল্প কাঠামো, নামকরণ কনভেনশন।

৫. কৌশলগতভাবে Git ব্যবহার করুন

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

এটি কিছু ভুল হলে রিভার্ট করতে দেয়।

৯. খরচ: সত্যিই কি সব বিনামূল্যে?

প্রতিটি সেবার জন্য খরচ বিশ্লেষণ:

সেবা	বিনামূল্যে পরিকল্পনা	কখন আপনি অর্থ প্রদান করবেন
Claude Code	একটি Anthropic প্ল্যান প্রয়োজন ($20/মাস থেকে শুরু) বা API কী	অবিলম্বে, তবে মূল্য বিশাল
Supabase	উদার বিনামূল্যে টিয়ার (2 প্রকল্প, 500MB DB)	বিনামূল্যে টিয়ার সীমার বাইরে
Vercel	ব্যক্তিগত প্রকল্পের জন্য বিনামূল্যে টিয়ার	টিম বা বাণিজ্যিক ব্যবহারের জন্য
GitHub	পাবলিক এবং প্রাইভেট রিপোর জন্য বিনামূল্যে	এন্টারপ্রাইজ ফিচার

নোট: Claude Code-এর জন্য সাবস্ক্রিপশন বা API ক্রেডিট প্রয়োজন, কিন্তু ডেভেলপমেন্ট গতির দিক থেকে বিনিয়োগের রিটার্ন অসাধারণ। একটি ডেমো বা MVP-এর জন্য, মোট খরচ $20-এর পরিসরে।

বিনামূল্যে AI বিকল্প

আপনি যদি খরচ একদম শূন্যে রাখতে চান, আপনি ব্যবহার করতে পারেন:

Cursor (সীমাবদ্ধতা সহ বিনামূল্যে টিয়ার)।
GitHub Copilot (ছাত্র এবং ওপেন সোর্সের জন্য বিনামূল্যে)।
Codeium/Windsurf (উদার বিনামূল্যে টিয়ার)।

১০. ডেমো থেকে পণ্যে: পরবর্তী ধাপ

আপনার ডেমো লাইভ হয়ে গেলে, এইভাবে এগিয়ে যান:

ফিডব্যাক সংগ্রহ করুন: সম্ভাব্য ব্যবহারকারীদের সাথে ডেমো শেয়ার করুন এবং মতামত সংগ্রহ করুন।
দ্রুত পুনরাবৃত্তি করুন: অনুরোধকৃত পরিবর্তন বাস্তবায়নে ভাইবকোডিং ব্যবহার করুন।
মেট্রিক্স মনিটর করুন: Vercel Analytics এবং Supabase Dashboard আপনাকে প্রয়োজনীয় ডেটা দেয়।
প্রয়োজনে স্কেল করুন: চাহিদা যাচাই করার পরেই পেইড প্ল্যানে আপগ্রেড করুন।

উপসংহার

Claude Code, Supabase এবং Vercel-এর সাথে ভাইবকোডিং রেকর্ড সময়ে ডেমো এবং MVP তৈরি করার জন্য একটি শক্তিশালী সমন্বয় উপস্থাপন করে। যা আগে সপ্তাহের ডেভেলপমেন্ট নিত তা এখন মাত্র কয়েক ঘণ্টায় সম্পন্ন করা যায়, আশ্চর্যজনকভাবে উচ্চ মানের সাথে।

মূল বিষয় হলো সঠিক মানসিকতা নিয়ে ভাইবকোডিং-এ আসা: এটি "কোড করতে না জানা" নয়, বরং AI টুল দিয়ে আপনার ক্ষমতা বৃদ্ধি করা। আপনি অন্তর্নিহিত প্রযুক্তিগুলো (React, SQL, অথেনটিকেশন, ডিপ্লয়মেন্ট) সম্পর্কে যত বেশি জানবেন, AI এজেন্টকে কাঙ্ক্ষিত ফলাফলের দিকে গাইড করতে তত বেশি কার্যকর হবেন।

সফটওয়্যার ডেভেলপমেন্টের ভবিষ্যত এখানে, এবং শুরু করার খরচ আগে কখনো এত কম ছিল না। আপনার ডেমো তৈরি করুন, বাস্তব ব্যবহারকারীদের সাথে যাচাই করুন এবং পরবর্তী দুর্দান্ত পণ্য তৈরি করুন।

আপনার প্রথম ডেমোর জন্য চেকলিস্ট:

Claude Code ইনস্টল এবং কনফিগার করা হয়েছে

ডাটাবেস স্কিমা সহ Supabase প্রকল্প তৈরি করা হয়েছে

shadcn/ui সহ Next.js প্রকল্প ইনিশিয়ালাইজ করা হয়েছে

অথেনটিকেশন কনফিগার করা হয়েছে

সম্পূর্ণ CRUD বাস্তবায়ন করা হয়েছে

আধুনিক এবং রেসপনসিভ UI

Vercel-এ ডিপ্লয় করা হয়েছে

ফিডব্যাকের জন্য শেয়ারযোগ্য URL প্রস্তুত

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

Claude Code দিয়ে কিভাবে একটি ডেমো তৈরি করবেন: Supabase এবং Vercel-এর সাথে ভাইবকোডিং

2026-03-02 · 14 min read · Filippo Spinella · এআই, ভাইবকোডিং, Supabase, Vercel

১. ভাইবকোডিং কী এবং কেন এটি বৈপ্লবিক

প্রাকৃতিক ভাষায় কী চান তা বর্ণনা করেন।
AI এজেন্ট সম্পূর্ণ কোড তৈরি করে।
ডেভেলপার পর্যালোচনা করেন, পরীক্ষা করেন এবং পুনরাবৃত্তি করেন।

কেন এটি কাজ করে

গতি: যে প্রকল্পে দিন লাগত তা ঘণ্টায় তৈরি করা যায়।
অ্যাক্সেসিবিলিটি: অ-বিশেষজ্ঞ ডেভেলপাররাও কার্যকর পণ্য তৈরি করতে পারেন।
দ্রুত পুনরাবৃত্তি: আপনি আইডিয়া পরীক্ষা করতে এবং পিভট করতে অনেক দ্রুত পারবেন।
পণ্যে মনোযোগ: আপনি কীভাবে এর পরিবর্তে কী তে মনোনিবেশ করেন।

কখন ভাইবকোডিং ব্যবহার করবেন

ভাইবকোডিং এর জন্য পারফেক্ট:

ডেমো এবং MVP: একটি আইডিয়া যাচাই করতে দ্রুত প্রোটোটাইপ তৈরি।
হ্যাকাথন: মাত্র কয়েক ঘণ্টায় একটি কার্যকর পণ্য তৈরি।
সাইড প্রজেক্ট: সপ্তাহ খরচ না করে নতুন প্রযুক্তি অন্বেষণ।
প্রুফ অফ কনসেপ্ট: স্টেকহোল্ডার বা বিনিয়োগকারীদের কাছে প্রযুক্তিগত সম্ভাব্যতা প্রদর্শন।

সতর্কতা: ভাইবকোডিং ডেমো এবং প্রোটোটাইপের জন্য চমৎকার। উচ্চ নিরাপত্তা এবং স্কেলেবিলিটি প্রয়োজনীয়তাসহ প্রোডাকশন-গ্রেড অ্যাপ্লিকেশনের জন্য, জেনারেটেড কোডের পুঙ্খানুপুঙ্খ পর্যালোচনা এখনও অপরিহার্য।

২. টেক স্ট্যাক: Claude Code + Supabase + Vercel

Claude Code

Claude Code হলো Anthropic-এর AI কোডিং এজেন্ট। এটি সরাসরি আপনার টার্মিনালে কাজ করে এবং পারে:

সম্পূর্ণ কোডবেস পড়তে এবং বুঝতে।
ফাইল তৈরি, পরিবর্তন এবং মুছতে।
টার্মিনাল কমান্ড চালাতে।
API এবং বাহ্যিক সেবার সাথে ইন্টার‌্যাক্ট করতে।
Git দিয়ে ভার্সনিং পরিচালনা করতে।
স্বয়ংক্রিয়ভাবে ত্রুটি এবং বাগে পুনরাবৃত্তি করতে।

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

# Start in a project directory
cd my-project
claude

Supabase (বিনামূল্যে টিয়ার)

Supabase হলো Firebase-এর একটি ওপেন-সোর্স বিকল্প যা প্রদান করে:

PostgreSQL ডাটাবেস: একটি সম্পূর্ণ রিলেশনাল ডাটাবেস।
অথেনটিকেশন: ইমেইল, Google, GitHub ইত্যাদি দিয়ে লগইন।
REST এবং Realtime API: আপনার স্কিমা থেকে স্বয়ংক্রিয়ভাবে তৈরি।
স্টোরেজ: ফাইল এবং ছবির জন্য।
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 মিনিট/মাস
প্রকল্প	সীমাহীন
ডিপ্লয়মেন্ট	সীমাহীন

৩. প্রাথমিক সেটআপ: পরিবেশ প্রস্তুত করা

পূর্বশর্ত

শুরু করার আগে, নিশ্চিত করুন আপনার কাছে আছে:

Node.js 18+ ইনস্টল করা।
Git কনফিগার করা।
একটি GitHub অ্যাকাউন্ট।
একটি Supabase অ্যাকাউন্ট (supabase.com-এ বিনামূল্যে)।
একটি Vercel অ্যাকাউন্ট (vercel.com-এ বিনামূল্যে)।
Claude Code ইনস্টল করা (npm install -g @anthropic-ai/claude-code)।

ধাপ ১: প্রকল্প তৈরি করুন

টার্মিনাল খুলুন এবং Claude Code শুরু করুন:

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

এখন আপনি Claude Code-কে প্রাকৃতিক ভাষায় নির্দেশনা দিতে শুরু করতে পারেন:

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"

ধাপ ২: 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)
          );
        },
      },
    }
  );
}

৪. ডেমো তৈরি করা: একটি টাস্ক ম্যানেজমেন্ট অ্যাপ

ডাটাবেস স্কিমা নির্ধারণ করুন

স্কিমা তৈরি করতে 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())
  );

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

ইউজার ইন্টারফেস তৈরি করুন

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

৫. অ্যাডভান্সড ভাইবকোডিং প্যাটার্ন

পুনরাবৃত্তিমূলক প্রম্পটিং

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.

৬. Vercel-এ ডিপ্লয়: কোড থেকে বিশ্বে

ধাপ ১: 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=.

ধাপ ২: Vercel সংযুক্ত করুন

vercel.com-এ যান এবং "Add New Project"-এ ক্লিক করুন।
আপনার সদ্য তৈরি করা GitHub রিপোজিটরি ইমপোর্ট করুন।
এনভায়রনমেন্ট ভেরিয়েবল যোগ করুন:
- NEXT_PUBLIC_SUPABASE_URL
- NEXT_PUBLIC_SUPABASE_ANON_KEY
"Deploy"-এ ক্লিক করুন।

ধাপ ৩: কাস্টম ডোমেইন কনফিগার করুন (ঐচ্ছিক)

Vercel my-demo-app.vercel.app-এর মতো একটি বিনামূল্যে URL প্রদান করে। কাস্টম ডোমেইনের জন্য:

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

প্রিভিউ ডিপ্লয়মেন্ট

৭. আপনার ডেমোর জন্য অপ্টিমাইজেশন

পারফরম্যান্স

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.

৮. কার্যকর ভাইবকোডিং-এর সেরা অনুশীলন

১. আপনার প্রম্পটে নির্দিষ্ট হন

❌ "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"

২. প্রসঙ্গ প্রদান করুন

❌ "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"

৩. ছোট ধাপে পুনরাবৃত্তি করুন

বেস লেআউট
একবারে একটি ফিচার
স্টাইলিং এবং পলিশ
ত্রুটি সামলানো
টেস্টিং

৪. জেনারেটেড কোড পর্যালোচনা করুন

ভাইবকোডিং মানে কোড না পড়া নয়। সবসময় পর্যালোচনা করুন:

নিরাপত্তা: RLS পলিসি, ইনপুট ভ্যালিডেশন, ডেটা স্যানিটাইজেশন।
পারফরম্যান্স: N+1 কুয়েরি, অপ্রয়োজনীয় ক্লায়েন্ট-সাইড কম্পোনেন্ট।
সেরা অনুশীলন: প্রকল্প কাঠামো, নামকরণ কনভেনশন।

৫. কৌশলগতভাবে Git ব্যবহার করুন

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

এটি কিছু ভুল হলে রিভার্ট করতে দেয়।

৯. খরচ: সত্যিই কি সব বিনামূল্যে?

প্রতিটি সেবার জন্য খরচ বিশ্লেষণ:

সেবা	বিনামূল্যে পরিকল্পনা	কখন আপনি অর্থ প্রদান করবেন
Claude Code	একটি Anthropic প্ল্যান প্রয়োজন ($20/মাস থেকে শুরু) বা API কী	অবিলম্বে, তবে মূল্য বিশাল
Supabase	উদার বিনামূল্যে টিয়ার (2 প্রকল্প, 500MB DB)	বিনামূল্যে টিয়ার সীমার বাইরে
Vercel	ব্যক্তিগত প্রকল্পের জন্য বিনামূল্যে টিয়ার	টিম বা বাণিজ্যিক ব্যবহারের জন্য
GitHub	পাবলিক এবং প্রাইভেট রিপোর জন্য বিনামূল্যে	এন্টারপ্রাইজ ফিচার

নোট: Claude Code-এর জন্য সাবস্ক্রিপশন বা API ক্রেডিট প্রয়োজন, কিন্তু ডেভেলপমেন্ট গতির দিক থেকে বিনিয়োগের রিটার্ন অসাধারণ। একটি ডেমো বা MVP-এর জন্য, মোট খরচ $20-এর পরিসরে।

বিনামূল্যে AI বিকল্প

আপনি যদি খরচ একদম শূন্যে রাখতে চান, আপনি ব্যবহার করতে পারেন:

Cursor (সীমাবদ্ধতা সহ বিনামূল্যে টিয়ার)।
GitHub Copilot (ছাত্র এবং ওপেন সোর্সের জন্য বিনামূল্যে)।
Codeium/Windsurf (উদার বিনামূল্যে টিয়ার)।

১০. ডেমো থেকে পণ্যে: পরবর্তী ধাপ

আপনার ডেমো লাইভ হয়ে গেলে, এইভাবে এগিয়ে যান:

ফিডব্যাক সংগ্রহ করুন: সম্ভাব্য ব্যবহারকারীদের সাথে ডেমো শেয়ার করুন এবং মতামত সংগ্রহ করুন।
দ্রুত পুনরাবৃত্তি করুন: অনুরোধকৃত পরিবর্তন বাস্তবায়নে ভাইবকোডিং ব্যবহার করুন।
মেট্রিক্স মনিটর করুন: Vercel Analytics এবং Supabase Dashboard আপনাকে প্রয়োজনীয় ডেটা দেয়।
প্রয়োজনে স্কেল করুন: চাহিদা যাচাই করার পরেই পেইড প্ল্যানে আপগ্রেড করুন।

উপসংহার

আপনার প্রথম ডেমোর জন্য চেকলিস্ট:

Claude Code ইনস্টল এবং কনফিগার করা হয়েছে

ডাটাবেস স্কিমা সহ Supabase প্রকল্প তৈরি করা হয়েছে

shadcn/ui সহ Next.js প্রকল্প ইনিশিয়ালাইজ করা হয়েছে

অথেনটিকেশন কনফিগার করা হয়েছে

সম্পূর্ণ CRUD বাস্তবায়ন করা হয়েছে

আধুনিক এবং রেসপনসিভ UI

Vercel-এ ডিপ্লয় করা হয়েছে

ফিডব্যাকের জন্য শেয়ারযোগ্য URL প্রস্তুত