Як Створити Демо з Claude Code: Vibecoding з Supabase та Vercel

Vibecoding - це нова парадигма розробки програмного забезпечення, де програміст керує AI-агентом за допомогою інструкцій природною мовою, дозволяючи штучному інтелекту писати фактичний код. Термін був створений Андрієм Карпаті (співзасновником OpenAI та колишнім Director of AI у Tesla) у відомому твіті лютого 2025 року: "There's a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace the exponentials, and forget that the code even exists."

У цій статті ми розглянемо, як створити повну, робочу демо за допомогою Claude Code як AI-агента, Supabase як бекенду (база даних, автентифікація, API) та Vercel для розгортання - використовуючи виключно безкоштовні тарифи цих сервісів.

1. Що Таке Vibecoding і Чому Це Революційно

Vibecoding являє собою фундаментальну зміну парадигми в розробці програмного забезпечення. Замість написання коду рядок за рядком розробник:

1. Описує те, що хоче, природною мовою.
2. AI-агент генерує повний код.
3. Розробник переглядає, тестує та ітерує.

Чому Це Працює

• Швидкість: проєкт, який зайняв би дні, можна побудувати за години.
• Доступність: навіть недосвідчені розробники можуть створювати робочі продукти.
• Швидка ітерація: можна тестувати ідеї та змінювати напрямок набагато швидше.
• Фокус на продукті: ви зосереджуєтесь на що, а не на як.

Коли Використовувати Vibecoding

Vibecoding ідеально підходить для:

• Демо та MVP: швидке створення прототипу для валідації ідеї.
• Хакатони: створення робочого продукту всього за кілька годин.
• Побічні проєкти: вивчення нових технологій без інвестування тижнів.
• Proof of Concept: демонстрація технічної здійсненності для зацікавлених сторін або інвесторів.

Попередження: Vibecoding чудово підходить для демо та прототипів. Для виробничих додатків з високими вимогами до безпеки та масштабованості ретельний огляд згенерованого коду залишається необхідним.

2. Технічний Стек: Claude Code + Supabase + Vercel

Claude Code

Claude Code - це AI-агент кодування від Anthropic. Він працює безпосередньо у вашому терміналі та може:

• Читати та розуміти всю кодову базу.
• Створювати, змінювати та видаляти файли.
• Виконувати команди терміналу.
• Взаємодіяти з API та зовнішніми сервісами.
• Керувати версіонуванням через Git.
• Автономно ітерувати над помилками та багами.

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

# Start in a project directory
cd my-project
claude

Supabase (Безкоштовний Тариф)

Supabase - це альтернатива Firebase з відкритим кодом, яка пропонує:

• Базу даних PostgreSQL: повну реляційну базу даних.
• Автентифікацію: вхід через email, Google, GitHub тощо.
• REST та Realtime API: автоматично згенеровані з вашої схеми.
• Сховище: для файлів та зображень.
• Edge Functions: безсерверні функції.

Безкоштовний тариф включає:

Vercel (Безкоштовний Тариф)

Vercel - ідеальна платформа для розгортання Next.js-додатків:

• Автоматичне розгортання з GitHub.
• Preview deployments для кожної гілки та 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

1. Перейдіть на supabase.com та створіть новий проєкт.
2. Запишіть Project URL та anon key з Settings > API.
3. Поверніться до терміналу з 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 Types

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

Побудуйте Інтерфейс Користувача

Тепер настає найпотужніша частина vibecoding. Дайте 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 та сторінки автентифікації:

// 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. Просунуті Патерни Vibecoding

Ітеративний Промптинг

Секрет ефективного vibecoding - це ітерація. Не намагайтеся описати все одним промптом. Працюйте поетапно:

Крок 1: "Create the base layout with header and sidebar"
Крок 2: "Add the project list in the sidebar with a button to create new ones"
Крок 3: "Create the Kanban view in the main area"
Крок 4: "Add drag & drop between columns"
Крок 5: "Implement the modal to create new tasks"
Крок 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

1. Перейдіть на vercel.com та натисніть "Add New Project."
2. Імпортуйте щойно створений GitHub-репозиторій.
3. Додайте змінні середовища:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Натисніть "Deploy."

Крок 3: Налаштуйте Власний Домен (Опціонально)

Vercel надає безкоштовний URL типу my-demo-app.vercel.app. Для власного домену:

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

Preview Deployments

Кожного разу, коли ви відкриваєте Pull Request на GitHub, Vercel автоматично створює preview deployment з унікальним 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. Найкращі Практики Ефективного Vibecoding

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. Ітеруйте Малими Кроками

Не намагайтеся побудувати все одним промптом. Рухайтесь поетапно:

1. Базовий макет
2. Одна функція за раз
3. Стилізація та полірування
4. Обробка помилок
5. Тестування

4. Переглядайте Згенерований Код

Vibecoding не означає не читати код. Завжди перевіряйте:

• Безпеку: 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. Від Демо до Продукту: Наступні Кроки

Коли ваша демо запущена, ось як рухатися далі:

1. Збирайте відгуки: діліться демо з потенційними користувачами та збирайте думки.
2. Ітеруйте швидко: використовуйте vibecoding для впровадження запитаних змін.
3. Відстежуйте метрики: Vercel Analytics та Supabase Dashboard надають вам важливі дані.
4. Масштабуйте за потреби: переходьте на платні плани лише тоді, коли ви підтвердили попит.

Висновок

Vibecoding з Claude Code, Supabase та Vercel являє собою потужну комбінацію для створення демо та MVP у рекордний час. Те, що раніше займало тижні розробки, тепер можна досягти за лічені години з напрочуд високим рівнем якості.

Ключ - підходити до vibecoding з правильним мисленням: це не про "невміння кодувати", а про посилення ваших можливостей за допомогою AI-інструментів. Чим більше ви знаєте про базові технології (React, SQL, автентифікація, розгортання), тим ефективніше ви зможете направляти AI-агента до бажаного результату.

Майбутнє розробки програмного забезпечення вже тут, і вартість початку ніколи не була нижчою. Створіть свою демо, підтвердіть її реальними користувачами та побудуйте наступний чудовий продукт.

Чек-лист для вашої першої демо:

• Claude Code встановлено та налаштовано
• Проєкт Supabase створено зі схемою бази даних
• Проєкт Next.js ініціалізовано з shadcn/ui
• Автентифікацію налаштовано
• Повний CRUD реалізовано
• Сучасний та адаптивний UI
• Розгорнуто на Vercel
• URL для спільного доступу готовий для відгуків