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:

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:

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:

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