Hogyan epits demet Claude Code-dal: Vibecoding Supabase-szel es Vercel-lel

A Vibecoding egy uj szoftverfejlesztesi paradigma, ahol a programozo termeszetes nyelvu utasitasokkal iranyit egy AI agenst, hagyva, hogy a mesterseges intelligencia irja meg a tenyleges kodot. A kifejezest Andrej Karpathy alkotta meg (az OpenAI tarsalapitoja es a Tesla volt AI igazgatoja) egy hires 2025 februari tweetben: "Letezik az ujfajta programozas, amit vibecoding-nak hivok, ahol teljesen aatadod magad a vibrakcioknak, elfogadod az exponencialisokat, es elfelejted, hogy a kod egyaltalan letezik."

Ebben a cikkben megmutatjuk, hogyan epithetunk egy teljes, mukodo demet a Claude Code mint AI agens, a Supabase mint backend (adatbazis, hitlesites, API) es a Vercel mint telepitesi platform hasznalataval - mindent kizarolag a szolgaltatasok ingyenes szintjeit kihasznalva.

1. Mi az a Vibecoding es miert forradalmi

A Vibecoding fundamentalis paradigmavaltas a szoftverfejlesztesben. Ahelyett, hogy sorrol sorra irna a kodot, a fejleszto:

1. Leirja, mit szeretne termeszetes nyelven.
2. Az AI agens generalja a teljes kodot.
3. A fejleszto ellenorzi, teszteli es iteral.

Miert mukodik

• Sebesseg: egy napokba telo projekt orak alatt megepitheto.
• Hozzaferhetes: meg a kevesbe tapasztalt fejlesztok is epithetnek mukodo termekeket.
• Gyors iteracio: gyorsabban tesztelhetod az otleteket es valthatsz iranyt.
• Termekfokusz: a mit -re osszpontositasz a hogyan helyett.

Mikor hasznald a Vibecoding-ot

A Vibecoding tokeletes:

• Demokhoz es MVP-khez: prototipus gyors epitese egy otlet validalasahoz.
• Hackathonokhoz: mukodo termek letrehozasa csupan nehany ora alatt.
• Mellekprojektekhez: uj technologiak felfedezesehez hetek befektetese nelkul.
• Proof of Concept-hez: technikai megvalosithatosag bemutatasa erdekelt feleknek vagy befektetoknek.

Figyelmeztes: A Vibecoding kivalo demokhoz es prototipusokhoz. Produkcios szintu alkalmazasokhoz, amelyeknek magas biztonsagi es skalazhatosagi kovetelmenyek vannak, a generalt kod alapos felulvizsgalata meg mindig elengedhetetlen.

2. A technologiai stack: Claude Code + Supabase + Vercel

Claude Code

A Claude Code az Anthropic AI kodolo agense. Kozvetlenul a terminalodban mukodik es kepes:

• Olvasni es megerteni a teljes kodbaazist.
• Fajlokat letrehozni, modositani es torolni.
• Terminal parancsokat vegrehajtani.
• API-kkal es kulso szolgaltatasokkal kommunikalni.
• Verziokezelest kezelni Git-tel.
• Onalloan iteralni hibakon es bugokon.

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

# Start in a project directory
cd my-project
claude

Supabase (Ingyenes szint)

A Supabase egy nyilt forraskodu Firebase alternativa, ami a kovetkezoket kinalja:

• PostgreSQL adatbazis: teljes erteku relcios adatbazis.
• Hitlesites: bejelentkezes e-maillel, Google-lel, GitHub-bal stb.
• REST es Realtime API-k: automatikusan generalva a semadbol.
• Tarolas: fajlokhoz es kepekhez.
• Edge Functions: szerver nelkuli fuggvenyek.

Az ingyenes szint tartalmazza:

Eroforras	Ingyenes limit
Adatbazis	500 MB
Tarolas	1 GB
Savszelesseg	5 GB
Edge Function hivások	500K/ho
Hitelesitett felhasznalok	Korlatlan
Projektek	2 aktiv projekt

Vercel (Ingyenes szint)

A Vercel a tokeletes telepitesi platform Next.js alkalmazasokhoz:

• Automatikus telepites GitHub-bol.
• Elonezeti telepitesek minden branch-hez es PR-hez.
• Globalis CDN optimalis teljesitmenyert.
• Serverless Functions tartalmazva.
• Alap analitika ingyenesen.

Az ingyenes szint tartalmazza:

Eroforras	Ingyenes limit
Savszelesseg	100 GB/ho
Serverless Function vegrehajtas	100 GB-ora/ho
Build-ek	6.000 perc/ho
Projektek	Korlatlan
Telepitesek	Korlatlan

3. Kezdeti beallitas: A kornyezet elokeszitese

Elofeltetelek

Mielott elkezded, bizonyosodj meg rola, hogy rendelkezel:

• Node.js 18+ telepitve.
• Git konfigualva.
• GitHub fiok.
• Supabase fiok (ingyenes a supabase.com oldalon).
• Vercel fiok (ingyenes a vercel.com oldalon).
• Claude Code telepitve (npm install -g @anthropic-ai/claude-code).

1. lepes: Hozd letre a projektet

Nyisd meg a terminalt es inditsd el a Claude Code-ot:

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

Most mar elkezdhetsz termeszetes nyelvu utasitasokat adni a Claude Code-nak:

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

A Claude Code automatikusan vegrehajtja:

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. lepes: Konfigurad a Supabase-t

1. Menj a supabase.com oldalra es hozz letre egy uj projektet.
2. Jegyezd fel a Projekt URL-t es az anon kulcsot a Settings > API-bol.
3. Terj vissza a terminalba a Claude Code-dal:

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.

A Claude Code letrehozza a teljes konfiguraciot:

// 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. A demo epitese: Feladatkezelo alkalmazas

Epitsunk egy konkret demod: egy feladatkezelo alkalmazast hitelesitossel, teljes CRUD-dal es modern felulettel.

Adatbazis schema definialasa

Adj utasitasokat a Claude Code-nak a schema letrehozasahoz:

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.

A Claude Code teljes migraciot general:

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

Ezt a migraciot kozvetlenul a Supabase vezrlopultrol (SQL Editor) vagy a CLI-n keresztul futtathatod.

TypeScript tipusok generalasa

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

A felhasznaloi felulet epitese

Most jon a vibecoding legerosebb resze. Adj magas szintu utasitasokat a Claude Code-nak:

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.

A Claude Code felepiti a teljes feluletet, komponensrol komponensre.

Hitlesites hozzaadasa

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

A Claude Code konfiguralja a Next.js middleware-t es a hitelesitesi oldalakat:

// 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. Halado Vibecoding mintak

Iterativ prompting

A hatekony vibecoding titka az iteracio. Ne probald mindent egyetlen promptban leirni. Halaj lepesrol lepesre:

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

Tipp: Minel specifikasabb es kontextualizaltabb a prompt, annal jobb az eredmeny. A Claude Code hozzafer a teljes kodbazishoz, igy koherensen integrálhatja az uj funkcionalitasokat.

Hibakezelés

Ha valami nem mukodik (es elofordul), egyszeruen mondd:

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

A Claude Code elemzi a kodot, azonositja a problemat es javitja.

Refaktoralas AI-val

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

Teszteles

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

6. Telepites Vercelre: A kodtol a vilgaig

1. lepes: Push GitHubra

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. lepes: Csatlakoztasd a Vercelt

1. Menj a vercel.com oldalra es kattints az "Add New Project"-re.
2. Importald az imnt letrehozott GitHub repozitorit.
3. Add hozza a kornyezeti valtozokat:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Kattints a "Deploy"-ra.

3. lepes: Egyeni domain konfigurálása (Opcionalis)

A Vercel ingyenes URL-t biztosit, mint peldaul my-demo-app.vercel.app. Egyeni domainhoz:

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

Elonezeti telepitesek

Minden alkalommal, amikor Pull Requestet nyitsz GitHubon, a Vercel automatikusan letrehoz egy elonezeti telepitést egyedi URL-lel. Tokeletes a valtozasok bemuatasahoz merge elott.

7. Optimalizaciok a demodhoz

Teljesitmeny

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

Egy funkcio, ami mindig lenyugoz a demokban, az a 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;
}

Sotet mod

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

8. Bevalt gyakorlatok a hatekony Vibecoding-hoz

1. Legy specifikus a promptjaidban

❌ "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. Biztosits kontextust

❌ "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. Iteralj kis lepesekben

Ne probald mindent egyetlen promptban megepiteni. Haladj inkrementalisan:

1. Alap elrendezes
2. Egyszerre egy funkcio
3. Stilizalas es csiszerolas
4. Hibakezelesek
5. Teszteles

4. Nezd at a generalt kodot

A Vibecoding nem azt jelenti, hogy nem olvasod a kodot. Mindig ellenorizd:

• Biztonsag: RLS szabalyzatok, input validacio, adat szantialás.
• Teljesitmeny: N+1 lekerdezsek, felesleges kliens oldali komponensek.
• Bevalt gyakorlatok: projekt struktura, elnevezesi konvenciok.

5. Hasznald a Gitet strategikusa

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

Ez lehetove teszi a visszaallast, ha valami rosszul sil.

9. Koltsegek: Tenyleg minden ingyenes?

Ime a koltsegek reszletezse minden szolgaltatashoz:

Szolgaltatas	Ingyenes csomag	Mikor fizetsz
Claude Code	Anthropic csomagot igenyel ($ 20/hotol) vagy API kulcsot	Azonnal, de az erteke hatalmas
Supabase	Nagyvonalu ingyenes szint (2 projekt, 500MB DB)	Az ingyenes hataron tul
Vercel	Ingyenes szint szemelyes projektekhez	Csapatok vagy kereskedelmi hasznalat eseten
GitHub	Ingyenes publikus es privat repokhoz	Valllalati funkciok

Megjegyzes: A Claude Code elofizetesto vagy API krediteket igenyel, de a befektetes megterlese a fejlesztesi sebesseg szempontjabol rendkivuli. Egy demo vagy MVP eseten az osszköltseg $20 kornyeken van.

Ingyenes AI alternatival

Ha a koltsegeket abszolut nullan akarod tartani, hasznalhatod:

• Cursor (ingyenes szint korltozásokkal).
• GitHub Copilot (ingyenes diakok es nyilt forrás szamara).
• Codeium/Windsurf (nagylelku ingyenes szint).

10. Demotol a termekig: Kovetkezo lepesek

Amint a demod elo, igy folytasd:

1. Gyujts visszajelzest: oszd meg a demod potencialis felhasznalokkal es gyujts velemenyt.
2. Iteralj gyorsan: hasznald a vibecoding-ot a kert valtoztatások implementalasahoz.
3. Figyeld a metrikakat: a Vercel Analytics es a Supabase Dashboard nellkulozhetetlen adatokat ad.
4. Skalazz, amikor szukseges: csak akkor valts fizetős csomagra, amikor validaltad a keresletet.

Osszefoglalas

A Vibecoding Claude Code-dal, Supabase-szel es Vercel-lel hatalmas kombinaciot jelent demok es MVP-k rekordido alatti epitésehez. Ami korabban hetekbe telt, most csupan nehany ora alatt megvalositható, meglepoen magas minosegi szinten.

A kulcs az, hogy a vibecoding-ot a megfelelo hozzaallassal kozelitsd meg: nem arrol van szo, hogy "nem tudsz programozni", hanem arrol, hogy felerosited a kepessegeidet AI eszkozokkel. Minel tobbet tudsz az alapveto technologiakrol (React, SQL, hitlesites, telepites), annal hatekoynabban iranyithatod az AI agenst a kivant eredmeny fele.

A szoftverfejlesztes jovoje itt van, es az indulas koltsege meg soha nem volt ilyen alacsony. Hozd letre a demod, validald valodi felhasznalokkal, es epitsd meg a kovetkezo nagy termeked.

Ellenorzo lista az elso demodhoz:

• Claude Code telepitve es konfiguraálva
• Supabase projekt letrehozva adatbazis semaval
• Next.js projekt inicializalva shadcn/ui-val
• Hitlesites konfiguralva
• Teljes CRUD implementalva
• Modern es reszponziv UI
• Telepitve a Vercelre
• Megoszthato URL keszen a visszajelzesre