Jak Zbudować Demo z Claude Code: Vibecoding z Supabase i Vercel

Vibecoding to nowy paradygmat rozwoju oprogramowania, w którym programista kieruje agentem AI za pomocą instrukcji w języku naturalnym, pozwalając sztucznej inteligencji pisać właściwy kod. Termin został ukuty przez Andreja Karpathy'ego (współzałożyciela OpenAI i byłego dyrektora AI w Tesli) w słynnym tweecie z lutego 2025: "Jest nowy rodzaj kodowania, który nazywam vibecoding, gdzie całkowicie oddajesz się vibom, akceptujesz wykładniczy wzrost i zapominasz, że kod w ogóle istnieje."

W tym artykule zobaczymy, jak zbudować kompletne, działające demo używając Claude Code jako agenta AI, Supabase jako backendu (baza danych, uwierzytelnianie, API) i Vercel do wdrożenia — wszystko wykorzystując wyłącznie darmowe plany tych usług.

1. Czym Jest Vibecoding i Dlaczego Jest Rewolucyjny

Vibecoding reprezentuje fundamentalną zmianę paradygmatu w rozwoju oprogramowania. Zamiast pisać kod linia po linii, programista:

1. Opisuje co chce w języku naturalnym.
2. Agent AI generuje kompletny kod.
3. Programista sprawdza, testuje i iteruje.

Dlaczego To Działa

• Szybkość: projekt, który zajmowałby dni, można zbudować w godzinach.
• Dostępność: nawet niedoświadczeni programiści mogą budować działające produkty.
• Szybka iteracja: możesz testować pomysły i zmieniać kierunek znacznie szybciej.
• Skupienie na produkcie: koncentrujesz się na co zamiast jak.

Kiedy Używać Vibecoding

Vibecoding jest idealny do:

• Demo i MVP: szybkie budowanie prototypu w celu walidacji pomysłu.
• Hackathonów: tworzenie działającego produktu w zaledwie kilka godzin.
• Projektów pobocznych: eksplorowanie nowych technologii bez inwestowania tygodni.
• Proof of Concept: demonstrowanie wykonalności technicznej interesariuszom lub inwestorom.

Ostrzeżenie: Vibecoding jest doskonały do demo i prototypów. W przypadku aplikacji produkcyjnych o wysokich wymaganiach bezpieczeństwa i skalowalności, dokładny przegląd wygenerowanego kodu jest nadal niezbędny.

2. Stos Technologiczny: Claude Code + Supabase + Vercel

Claude Code

Claude Code to agent kodowania AI od Anthropic. Działa bezpośrednio w terminalu i może:

• Czytać i rozumieć całą bazę kodu.
• Tworzyć, modyfikować i usuwać pliki.
• Wykonywać polecenia terminala.
• Współdziałać z API i zewnętrznymi usługami.
• Zarządzać wersjonowaniem z Git.
• Autonomicznie iterować nad błędami i bugami.

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

# Start in a project directory
cd my-project
claude

Supabase (Darmowy Plan)

Supabase to open-source'owa alternatywa dla Firebase oferująca:

• Bazę danych PostgreSQL: kompletną relacyjną bazę danych.
• Uwierzytelnianie: logowanie przez email, Google, GitHub itp.
• API REST i Realtime: automatycznie generowane ze schematu.
• Storage: dla plików i obrazów.
• Edge Functions: funkcje serverless.

Darmowy plan obejmuje:

| Zasób | Darmowy limit | |----------|-----------| | Baza danych | 500 MB | | Storage | 1 GB | | Przepustowość | 5 GB | | Wywołania Edge Function | 500K/miesiąc | | Uwierzytelnieni użytkownicy | Bez limitu | | Projekty | 2 aktywne projekty |

Vercel (Darmowy Plan)

Vercel to idealna platforma wdrożeniowa dla aplikacji Next.js:

• Automatyczne wdrożenie z GitHub.
• Wdrożenia podglądowe dla każdej gałęzi i PR.
• Globalna sieć CDN dla optymalnej wydajności.
• Serverless Functions w zestawie.
• Podstawowa analityka za darmo.

Darmowy plan obejmuje:

| Zasób | Darmowy limit | |----------|-----------| | Przepustowość | 100 GB/miesiąc | | Wykonanie Serverless Function | 100 GB-godzin/miesiąc | | Kompilacje | 6000 minut/miesiąc | | Projekty | Bez limitu | | Wdrożenia | Bez limitu |

3. Początkowa Konfiguracja: Przygotowanie Środowiska

Wymagania Wstępne

Przed rozpoczęciem upewnij się, że masz:

• Node.js 18+ zainstalowany.
• Git skonfigurowany.
• Konto GitHub.
• Konto Supabase (darmowe na supabase.com).
• Konto Vercel (darmowe na vercel.com).
• Claude Code zainstalowany (npm install -g @anthropic-ai/claude-code).

Krok 1: Utwórz Projekt

Otwórz terminal i uruchom Claude Code:

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

Teraz możesz zacząć dawać Claude Code instrukcje w języku naturalnym:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code automatycznie wykona:

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

Krok 2: Skonfiguruj Supabase

1. Przejdź na supabase.com i utwórz nowy projekt.
2. Zanotuj Project URL i anon key z Settings > API.
3. Wróć do terminala z 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 utworzy kompletną konfigurację:

// 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. Budowanie Demo: Aplikacja do Zarządzania Zadaniami

Zbudujmy konkretne demo: aplikację do zarządzania zadaniami z uwierzytelnianiem, pełnym CRUD i nowoczesnym interfejsem.

Definicja Schematu Bazy Danych

Daj Claude Code instrukcje do stworzenia schematu:

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 wygeneruje kompletną migrację:

-- 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())
  );

Migrację tę można uruchomić bezpośrednio z panelu Supabase (SQL Editor) lub przez CLI.

Generowanie Typów 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

Budowanie Interfejsu Użytkownika

Teraz nadchodzi najpotężniejsza część vibecoding. Daj Claude Code instrukcje wysokiego poziomu:

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 zbuduje cały interfejs, komponent po komponencie.

Dodanie Uwierzytelniania

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 skonfiguruje middleware Next.js i strony uwierzytelniania:

// 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. Zaawansowane Wzorce Vibecoding

Iteracyjne Promptowanie

Sekret efektywnego vibecoding to iteracja. Nie próbuj opisywać wszystkiego w jednym prompcie. Postępuj etapowo:

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"

Wskazówka: Im bardziej szczegółowy i kontekstowy prompt, tym lepszy wynik. Claude Code ma dostęp do całej bazy kodu, więc może spójnie integrować nowe funkcje.

Obsługa Błędów

Gdy coś nie działa (a będzie tak), możesz po prostu powiedzieć:

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

Claude Code przeanalizuje kod, zidentyfikuje problem i go naprawi.

Refaktoring z AI

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

Testowanie

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

6. Wdrożenie na Vercel: Od Kodu do Świata

Krok 1: Push na 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=.

Krok 2: Podłącz Vercel

1. Przejdź na vercel.com i kliknij „Add New Project".
2. Zaimportuj właśnie utworzone repozytorium GitHub.
3. Dodaj zmienne środowiskowe:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Kliknij „Deploy".

Krok 3: Konfiguracja Własnej Domeny (Opcjonalnie)

Vercel zapewnia darmowy URL jak my-demo-app.vercel.app. Dla własnej domeny:

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

Wdrożenia Podglądowe

Za każdym razem, gdy otwierasz Pull Request na GitHub, Vercel automatycznie utworzy wdrożenie podglądowe z unikalnym URL. Idealne do pokazywania zmian przed scaleniem.

7. Optymalizacje dla Twojego Demo

Wydajność

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

Realtime z Supabase

Funkcja, która zawsze robi wrażenie w demo, to realtime:

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

Tryb Ciemny

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

8. Najlepsze Praktyki Efektywnego Vibecoding

1. Bądź Konkretny w Promptach

❌ "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. Dostarcz Kontekst

❌ "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. Iteruj Małymi Krokami

Nie próbuj budować wszystkiego w jednym prompcie. Postępuj stopniowo:

1. Podstawowy układ
2. Jedna funkcja na raz
3. Stylizacja i dopracowanie
4. Obsługa błędów
5. Testowanie

4. Sprawdzaj Wygenerowany Kod

Vibecoding nie oznacza nieczytania kodu. Zawsze sprawdzaj:

• Bezpieczeństwo: polityki RLS, walidacja danych wejściowych, sanityzacja danych.
• Wydajność: zapytania N+1, niepotrzebne komponenty po stronie klienta.
• Najlepsze praktyki: struktura projektu, konwencje nazewnictwa.

5. Używaj Git Strategicznie

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

Pozwala to na cofnięcie zmian, jeśli coś pójdzie nie tak.

9. Koszty: Czy Naprawdę Wszystko Jest Za Darmo?

Analiza kosztów dla każdej usługi:

| Usługa | Darmowy plan | Kiedy płacisz | |---------|-----------|-------------| | Claude Code | Wymaga planu Anthropic (od $20/miesiąc) lub klucza API | Natychmiast, ale wartość jest ogromna | | Supabase | Hojny darmowy plan (2 projekty, 500MB DB) | Po przekroczeniu limitów | | Vercel | Darmowy plan dla projektów osobistych | Dla zespołów lub użytku komercyjnego | | GitHub | Darmowy dla publicznych i prywatnych repozytoriów | Funkcje korporacyjne |

Uwaga: Claude Code wymaga subskrypcji lub kredytów API, ale zwrot z inwestycji pod względem szybkości rozwoju jest nadzwyczajny. Dla demo lub MVP całkowity koszt wynosi około $20.

Darmowe Alternatywy AI

Jeśli chcesz utrzymać koszty na absolutnym zerze:

• Cursor (darmowy plan z ograniczeniami).
• GitHub Copilot (darmowy dla studentów i open source).
• Codeium/Windsurf (hojny darmowy plan).

10. Od Demo do Produktu: Następne Kroki

Gdy Twoje demo jest na żywo, oto jak postępować:

1. Zbieraj opinie: udostępnij demo potencjalnym użytkownikom i zbieraj opinie.
2. Szybko iteruj: użyj vibecoding do wdrażania żądanych zmian.
3. Monitoruj metryki: Vercel Analytics i Supabase Dashboard dostarczają niezbędne dane.
4. Skaluj gdy potrzeba: przechodź na płatne plany dopiero po potwierdzeniu popytu.

Podsumowanie

Vibecoding z Claude Code, Supabase i Vercel to potężna kombinacja do budowania demo i MVP w rekordowym czasie. To, co kiedyś zajmowało tygodnie rozwoju, teraz można osiągnąć w zaledwie kilka godzin, z zaskakująco wysoką jakością.

Kluczem jest podejście do vibecoding z odpowiednim nastawieniem: nie chodzi o „nieumiejętność kodowania", ale o wzmacnianie swoich możliwości za pomocą narzędzi AI. Im więcej wiesz o bazowych technologiach (React, SQL, uwierzytelnianie, wdrażanie), tym skuteczniej prowadzisz agenta AI do pożądanego rezultatu.

Przyszłość rozwoju oprogramowania jest tutaj, a koszt rozpoczęcia nigdy nie był niższy. Stwórz swoje demo, zweryfikuj z prawdziwymi użytkownikami i zbuduj kolejny wielki produkt.

Lista kontrolna dla Twojego pierwszego demo:

• [x] Claude Code zainstalowany i skonfigurowany
• [x] Projekt Supabase utworzony ze schematem bazy danych
• [x] Projekt Next.js zainicjalizowany z shadcn/ui
• [x] Uwierzytelnianie skonfigurowane
• [x] Pełny CRUD zaimplementowany
• [x] Nowoczesny i responsywny UI
• [x] Wdrożony na Vercel
• [x] URL do udostępnienia gotowy na opinie