Jak vytvorit demo s Claude Code: Vibecoding s Supabase a Vercel

Vibecoding je nove paradigma vyvoje softwaru, kde programator vede AI agenta pomoci instrukci v prirodzenem jazyce a necha umelou inteligenci psat skutecny kod. Termin vymyslel Andrej Karpathy (spoluzakladatel OpenAI a byvaly reditel AI v Tesle) ve slavnem tweetu z unora 2025: "Existuje novy druh programovani, ktery nazyvam vibecoding, kde se plne oddate vibracim, primate exponencialy a zapomenete, ze kod vubec existuje."

V tomto clanku si ukazeme, jak vytvorit kompletni, funkcni demo pomoci Claude Code jako AI agenta, Supabase jako backendu (databaze, autentizace, API) a Vercel pro nasazeni - vse s vyuzitim vyhradne bezplatnych urovni techto sluzeb.

1. Co je Vibecoding a proc je revolucni

Vibecoding predstavuje fundamentalni zmenu paradigmatu ve vyvoji softwaru. Misto psani kodu radek po radku vyvojar:

1. Popisuje, co chce, v prirodzenem jazyce.
2. AI agent vygeneruje kompletni kod.
3. Vyvojar kontroluje, testuje a iteruje.

Proc to funguje

• Rychlost: projekt, ktery by trval dny, lze postavit za hodiny.
• Pristupnost: i mene zkuseni vyvojari mohou stavet funkcni produkty.
• Rychla iterace: muzete testovat napady a pivotovat mnohem rychleji.
• Zamereni na produkt: soustedite se na co misto jak.

Kdy pouzit Vibecoding

Vibecoding je idealni pro:

• Dema a MVP: rychle vytvoreni prototypu pro overeni napadu.
• Hackathony: vytvoreni funkcniho produktu behem nekolika hodin.
• Vedlejsi projekty: prozkoumani novych technologii bez investice tydnu.
• Proof of Concept: prokazani technicke proveditelnosti zainteresovanym stranam nebo investorum.

Upozorneni: Vibecoding je vynikajici pro dema a prototypy. Pro produkcni aplikace s vysokymi pozadavky na bezpecnost a skalovatelnost je dukladna kontrola vygenerovaneho kodu stale nezbytna.

2. Technologicky stack: Claude Code + Supabase + Vercel

Claude Code

Claude Code je AI kodovaci agent od Anthropic. Pracuje primo ve vasem terminalu a muze:

• Cist a chapat celou kodovou zakladnu.
• Vytvaret, upravovat a mazat soubory.
• Provadet terminalove prikazy.
• Interagovat s API a externimi sluzbami.
• Spravovat verzovani pomoci Gitu.
• Autonomne iterovat nad chybami a bugy.

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

# Start in a project directory
cd my-project
claude

Supabase (Bezplatna uroven)

Supabase je open-source alternativa k Firebase, ktera nabizi:

• PostgreSQL databaze: kompletni relacni databaze.
• Autentizace: prihlaseni pomoci emailu, Google, GitHub atd.
• REST a Realtime API: automaticky generovane z vaseho schematu.
• Uloziste: pro soubory a obrazky.
• Edge Functions: serverless funkce.

Bezplatna uroven zahrnuje:

Vercel (Bezplatna uroven)

Vercel je idealni platforma pro nasazeni Next.js aplikaci:

• Automaticke nasazeni z GitHubu.
• Nahledove nasazeni pro kazdou vetev a PR.
• Globalni CDN pro optimalni vykon.
• Serverless Functions zahrnuty.
• Zakladni analytika zdarma.

Bezplatna uroven zahrnuje:

3. Pocatecni nastaveni: Priprava prostredi

Predpoklady

Pred zacatkem se ujistete, ze mate:

• Node.js 18+ nainstalovany.
• Git nakonfigurovany.
• Ucet na GitHubu.
• Ucet na Supabase (zdarma na supabase.com).
• Ucet na Vercel (zdarma na vercel.com).
• Claude Code nainstalovany (npm install -g @anthropic-ai/claude-code).

Krok 1: Vytvorte projekt

Otevrete terminal a spustte Claude Code:

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

Nyni muzete zacit davat Claude Code instrukce v prirodzenem jazyce:

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

Claude Code automaticky provede:

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: Nakonfigurujte Supabase

1. Jdete na supabase.com a vytvorte novy projekt.
2. Poznamejte si URL projektu a anon klic z Settings > API.
3. Vratte se do terminalu s 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 vytvori kompletni konfiguraci:

// 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. Stavba dema: Aplikace pro spravu uloh

Pojdme postavit konkretni demo: aplikaci pro spravu uloh s autentizaci, plnym CRUD a modernim rozhranim.

Definice databazoveho schematu

Dejte Claude Code instrukce k vytvoreni 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 vygeneruje kompletni migraci:

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

Tuto migraci muzete spustit primo z panelu Supabase (SQL Editor) nebo pres CLI.

Generovani TypeScript typu

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

Vytvoreni uzivatelskeho rozhrani

Nyni prichazi nejmocnejsi cast vibecoding. Dejte Claude Code vysokourovnove instrukce:

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 postavi cele rozhrani, komponentu po komponente.

Pridani autentizace

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 nakonfiguruje Next.js middleware a autentizacni stranky:

// 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. Pokrocile vzory Vibecoding

Iterativni prompting

Tajemstvim efektivniho vibecoding je iterace. Nesnazse se popsat vse v jednom promptu. Postupujte po krocich:

Krok 1: "Create the base layout with header and sidebar"
Krok 2: "Add the project list in the sidebar with a button to create new ones"
Krok 3: "Create the Kanban view in the main area"
Krok 4: "Add drag & drop between columns"
Krok 5: "Implement the modal to create new tasks"
Krok 6: "Add toast notifications for user feedback"

Tip: Cim je prompt konkretnejsi a kontextualizovanejsi, tim lepsi vysledek. Claude Code ma pristup k cele kodove zakladne, takze muze nové funkce integrovat koherentne.

Zpracovani chyb

Kdyz neco nefunguje (a stane se to), muzete jednoduše rici:

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

Claude Code analyzuje kod, identifikuje problem a opravi ho.

Refaktoring s AI

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

Testovani

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

6. Nasazeni na Vercel: Od kodu do sveta

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: Pripojte Vercel

1. Jdete na vercel.com a kliknete na "Add New Project."
2. Importujte prave vytvoreny GitHub repozitar.
3. Pridejte promenne prostredi:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Kliknete na "Deploy."

Krok 3: Konfigurace vlastni domeny (Volitelne)

Vercel poskytuje bezplatnou URL jako my-demo-app.vercel.app. Pro vlastni domenu:

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

Nahledove nasazeni

Pokazde, kdyz otevrece Pull Request na GitHubu, Vercel automaticky vytvori nahledove nasazeni s unikatni URL. Idealni pro ukazani zmen pred mergem.

7. Optimalizace pro vase demo

Vykon

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 se Supabase

Funkce, ktera v demech vzdy zaujme, je 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;
}

Tmavy rezim

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

8. Osvedcene postupy pro efektivni Vibecoding

1. Budte ve svych promptech konkretni

❌ "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. Poskytnete kontext

❌ "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. Iterujte v malych krocich

Nesnazte se postavit vse v jednom promptu. Postupujte inkrementalne:

1. Zakladni rozlozeni
2. Jedna funkce najednou
3. Stylizace a doladeni
4. Zpracovani chyb
5. Testovani

4. Kontrolujte vygenerovany kod

Vibecoding neznamena necist kod. Vzdy kontrolujte:

• Bezpecnost: politiky RLS, validace vstupu, sanitizace dat.
• Vykon: dotazy N+1, zbytecne klientske komponenty.
• Osvedcene postupy: struktura projektu, konvence pojmenovani.

5. Pouzivejte Git strategicky

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

To vam umozni se vratit, pokud neco pojde spatne.

9. Naklady: Je to opravdu vse zdarma?

Zde je rozpad nakladu pro kazdou sluzbu:

Poznamka: Claude Code vyzaduje predplatne nebo API kredity, ale navratnost investice z hlediska rychlosti vyvoje je mimoradna. Pro demo nebo MVP je celkovy naklad v rozmezi $20.

Bezplatne alternativy AI

Pokud chcete udrzet naklady na absolutni nule, muzete pouzit:

• Cursor (bezplatna uroven s omezenimi).
• GitHub Copilot (zdarma pro studenty a open source).
• Codeium/Windsurf (stedra bezplatna uroven).

10. Od dema k produktu: Dalsi kroky

Jakmile je vase demo zive, zde je jak pokracovat:

1. Sbirejte zpetnou vazbu: sdiltte demo s potencialnimi uzivateli a sbirejte nazory.
2. Rychle iterujte: pouzijte vibecoding k implementaci pozadovanych zmen.
3. Monitorujte metriky: Vercel Analytics a Supabase Dashboard vam poskytuji zasadni data.
4. Skalujte, kdyz je to potreba: prejdete na placene plany az kdyz jste overili poptavku.

Zaver

Vibecoding s Claude Code, Supabase a Vercel predstavuje mocnou kombinaci pro stavbu dem a MVP v rekordnim case. Co drive trvalo tydny vyvoje, lze nyni zvladnout za pouhych par hodin s prekvapive vysokou urovni kvality.

Klicem je pristupovat k vibecoding se spravnym nastavenim mysli: nejde o to "neumet programovat", ale o zesilovani vasich schopnosti pomoci AI nastroju. Cim vice vite o zakladnich technologiich (React, SQL, autentizace, nasazeni), tim efektivneji budete ridit AI agenta smerem k pozadovanemu vysledku.

Budoucnost vyvoje softwaru je tady a naklady na zacatek nebyly nikdy nizsi. Vytvorte sve demo, overte ho s realnymi uzivateli a postavte dalsi skvely produkt.

Kontrolni seznam pro vase prvni demo:

• Claude Code nainstalovany a nakonfigurovany
• Supabase projekt vytvoren s databazovym schematem
• Next.js projekt inicializovan s shadcn/ui
• Autentizace nakonfigurovana
• Plny CRUD implementovan
• Moderni a responzivni UI
• Nasazeno na Vercel
• Sdilitelna URL pripravena pro zpetnou vazbu