Eine Demo mit Claude Code erstellen: Vibecoding mit Supabase und Vercel

Vibecoding ist ein neues Paradigma der Softwareentwicklung, bei dem der Programmierer einen KI-Agenten durch Anweisungen in natürlicher Sprache steuert und die künstliche Intelligenz den eigentlichen Code schreiben lässt. Der Begriff wurde von Andrej Karpathy (Co-Founder von OpenAI und ehemaliger Director of AI bei Tesla) in einem bekannten Tweet vom Februar 2025 geprägt: „Es gibt eine neue Art des Programmierens, die ich Vibecoding nenne, bei der man sich komplett den Vibes hingibt, die Exponentialkurven umarmt und vergisst, dass Code existiert."

In diesem Artikel zeigen wir, wie man eine vollständige und funktionsfähige Demo mit Claude Code als KI-Agent, Supabase als Backend (Datenbank, Authentifizierung, API) und Vercel für das Deployment erstellt – und dabei ausschließlich die kostenlosen Tarife dieser Dienste nutzt.

1. Was ist Vibecoding und warum ist es revolutionär

Vibecoding stellt einen grundlegenden Paradigmenwechsel in der Softwareentwicklung dar. Anstatt Code Zeile für Zeile zu schreiben, geht der Entwickler so vor:

1. Beschreiben, was gewünscht ist, in natürlicher Sprache.
2. Der KI-Agent generiert den vollständigen Code.
3. Der Entwickler überprüft, testet und iteriert.

Warum es funktioniert

• Geschwindigkeit: ein Projekt, das Tage dauern würde, kann in Stunden gebaut werden.
• Zugänglichkeit: auch wer kein erfahrener Entwickler ist, kann funktionierende Produkte bauen.
• Schnelle Iteration: du kannst Ideen testen und viel schneller pivotieren.
• Fokus auf das Produkt: du konzentrierst dich auf das Was statt auf das Wie.

Wann Vibecoding einsetzen

Vibecoding ist ideal für:

• Demos und MVPs: schnell einen Prototyp bauen, um eine Idee zu validieren.
• Hackathons: ein funktionierendes Produkt in wenigen Stunden erstellen.
• Nebenprojekte: neue Technologien erkunden, ohne Wochen zu investieren.
• Proof of Concept: die technische Machbarkeit gegenüber Stakeholdern oder Investoren demonstrieren.

Achtung: Vibecoding ist hervorragend für Demos und Prototypen. Für produktionsreife Anwendungen mit hohen Sicherheits- und Skalierbarkeitsanforderungen ist dennoch eine gründliche Überprüfung des generierten Codes unerlässlich.

2. Der Technologie-Stack: Claude Code + Supabase + Vercel

Claude Code

Claude Code ist der AI Coding Agent von Anthropic. Er funktioniert direkt in deinem Terminal und kann:

• Die gesamte Codebasis lesen und verstehen.
• Dateien erstellen, ändern und löschen.
• Befehle im Terminal ausführen.
• Mit APIs und externen Diensten interagieren.
• Versionierung mit Git verwalten.
• Autonom Fehler und Bugs iterativ beheben.

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

# Start in einem Projektverzeichnis
cd my-project
claude

Supabase (Kostenloser Tarif)

Supabase ist eine Open-Source-Alternative zu Firebase und bietet:

• PostgreSQL-Datenbank: eine vollständige relationale Datenbank.
• Authentifizierung: Login mit E-Mail, Google, GitHub usw.
• REST- und Realtime-API: automatisch aus deinem Schema generiert.
• Storage: für Dateien und Bilder.
• Edge Functions: serverlose Funktionen.

Der kostenlose Tarif umfasst:

| Ressource | Kostenloses Limit | |-----------|------------------| | Datenbank | 500 MB | | Storage | 1 GB | | Bandbreite | 5 GB | | Edge Function Aufrufe | 500K/Monat | | Authentifizierte Nutzer | Unbegrenzt | | Projekte | 2 aktive Projekte |

Vercel (Kostenloser Tarif)

Vercel ist die perfekte Deployment-Plattform für Next.js-Anwendungen:

• Automatisches Deployment von GitHub.
• Preview Deployments für jeden Branch und jede PR.
• Globales CDN für optimale Performance.
• Serverless Functions inklusive.
• Basis-Analytics kostenlos.

Der kostenlose Tarif umfasst:

| Ressource | Kostenloses Limit | |-----------|------------------| | Bandbreite | 100 GB/Monat | | Serverless Function Ausführung | 100 GB-Stunden/Monat | | Builds | 6.000 Minuten/Monat | | Projekte | Unbegrenzt | | Deployments | Unbegrenzt |

3. Initiales Setup: die Umgebung vorbereiten

Voraussetzungen

Bevor du loslegst, stelle sicher, dass du Folgendes hast:

• Node.js 18+ installiert.
• Git konfiguriert.
• Ein GitHub-Konto.
• Ein Supabase-Konto (kostenlos auf supabase.com).
• Ein Vercel-Konto (kostenlos auf vercel.com).
• Claude Code installiert (npm install -g @anthropic-ai/claude-code).

Schritt 1: Das Projekt erstellen

Öffne das Terminal und starte Claude Code:

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

Jetzt kannst du Claude Code Anweisungen in natürlicher Sprache geben:

Du: Erstelle ein Next.js 15 Projekt mit App Router, TypeScript, Tailwind CSS und
shadcn/ui. Initialisiere auch ein Git-Repository.

Claude Code wird automatisch ausführen:

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

Schritt 2: Supabase konfigurieren

1. Gehe auf supabase.com und erstelle ein neues Projekt.
2. Notiere dir Project URL und anon key aus dem Bereich Settings > API.
3. Kehre zum Terminal mit Claude Code zurück:

Du: Füge Supabase zum Projekt hinzu. Erstelle eine .env.local Datei mit den Variablen
NEXT_PUBLIC_SUPABASE_URL und NEXT_PUBLIC_SUPABASE_ANON_KEY. Konfiguriere den
Supabase-Client mit SSR-Support für Next.js App Router.

Claude Code erstellt die vollständige Konfiguration:

// 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. Die Demo bauen: eine Task-Management-App

Lass uns eine konkrete Demo erstellen: eine Task-Management-App mit Authentifizierung, vollständigem CRUD und moderner Benutzeroberfläche.

Das Datenbankschema definieren

Gib Claude Code die Anweisungen, das Schema zu erstellen:

Du: Erstelle eine SQL-Migration für Supabase mit folgenden Tabellen:

1. profiles: id (uuid, FK zu auth.users), username (text), avatar_url (text),
   created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
   zu 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 zu projects), assigned_to (uuid, FK zu profiles), due_date (timestamp),
   created_at, updated_at

Aktiviere Row Level Security für alle Tabellen und erstelle die entsprechenden Policies.

Claude Code generiert eine vollständige Migration:

-- Erstelle die Enum-Typen
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Tabelle profiles
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

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

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

-- Aktiviere RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Policies für profiles
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);

-- Policies für projects
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);

-- Policies für tasks
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())
  );

Du kannst diese Migration direkt über das Supabase-Dashboard (SQL Editor) oder über die CLI ausführen.

TypeScript-Typen generieren

Du: Generiere die TypeScript-Typen aus der Supabase-Datenbank und speichere sie in src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Die Benutzeroberfläche bauen

Jetzt kommt der mächtigste Teil des Vibecoding. Gib Claude Code Anweisungen auf hoher Ebene:

Du: Erstelle eine Dashboard-Seite für die Task-Management-App mit:

1. Sidebar mit Navigation zwischen Projekten
2. Kanban-Ansicht mit 3 Spalten (Todo, In Progress, Done) mit Drag & Drop
3. Modal zum Erstellen/Bearbeiten von Tasks
4. Header mit Benutzer-Avatar und Logout
5. Modernes Design mit shadcn/ui und Tailwind

Verwende Daten aus Supabase mit React Server Components wo möglich
und Client Components nur wo Interaktivität nötig ist.

Claude Code baut die gesamte Oberfläche Komponente für Komponente.

Authentifizierung hinzufügen

Du: Füge ein vollständiges Authentifizierungssystem hinzu mit:

1. Login-Seite mit E-Mail/Passwort und Login mit GitHub
2. Registrierungsseite
3. Middleware zum Schutz authentifizierter Routen
4. Automatische Weiterleitung für nicht authentifizierte Nutzer
5. Automatische Profilerstellung nach der Registrierung

Claude Code konfiguriert die Next.js-Middleware und die Auth-Seiten:

// 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. Fortgeschrittene Vibecoding-Patterns

Iteratives Prompting

Das Geheimnis effektiven Vibecoding ist die Iteration. Versuche nicht, alles in einem einzigen Prompt zu beschreiben. Gehe schrittweise vor:

Schritt 1: "Erstelle das Basis-Layout mit Header und Sidebar"
Schritt 2: "Füge die Projektliste in der Sidebar hinzu mit einem Button zum Erstellen neuer Projekte"
Schritt 3: "Erstelle die Kanban-Ansicht im Hauptbereich"
Schritt 4: "Füge Drag & Drop zwischen den Spalten hinzu"
Schritt 5: "Implementiere das Modal zum Erstellen neuer Tasks"
Schritt 6: "Füge Toast-Benachrichtigungen als Feedback für den Nutzer hinzu"

Tipp: Je spezifischer und kontextualisierter der Prompt, desto besser das Ergebnis. Claude Code hat Zugriff auf die gesamte Codebasis und kann neue Funktionen konsistent integrieren.

Fehlerbehandlung

Wenn etwas nicht funktioniert (und das wird passieren), kannst du einfach sagen:

Du: Ich habe diesen Fehler in der Konsole: "TypeError: Cannot read property 'map' of undefined"
in der TaskList-Komponente. Behebe ihn.

Claude Code analysiert den Code, identifiziert das Problem und behebt es.

Refactoring mit KI

Du: Die Dashboard-Komponente ist zu groß geworden. Teile sie in kleinere,
wiederverwendbare Komponenten auf und behalte die gleiche Funktionalität bei.

Testing

Du: Füge Tests mit Vitest für die Utility-Funktionen und Tests mit Playwright
für den Authentifizierungsfluss und die Task-Erstellung hinzu.

6. Deployment auf Vercel: vom Code in die Welt

Schritt 1: Auf GitHub pushen

Du: Erstelle eine passende .gitignore, committe alles und pushe auf ein neues
GitHub-Repository namens "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Schritt 2: Vercel verbinden

1. Gehe auf vercel.com und klicke auf „Add New Project".
2. Importiere das gerade erstellte GitHub-Repository.
3. Füge die Umgebungsvariablen hinzu:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klicke auf „Deploy".

Schritt 3: Domain konfigurieren (optional)

Vercel stellt eine kostenlose URL wie my-demo-app.vercel.app bereit. Für eine benutzerdefinierte Domain:

Du: Füge die Konfiguration für eine benutzerdefinierte Domain in vercel.json hinzu

Preview Deployments

Jedes Mal, wenn du einen Pull Request auf GitHub öffnest, erstellt Vercel automatisch ein Preview Deployment mit einer eindeutigen URL. Perfekt, um Änderungen vor dem Merge zu zeigen.

7. Optimierungen für die Demo

Performance

Du: Optimiere die Performance der App:
1. Füge Loading-States mit Suspense und Skeleton hinzu
2. Implementiere Caching mit unstable_cache von Next.js
3. Optimiere die Bilder mit next/image
4. Füge SEO-Metadaten für jede Seite hinzu

Realtime mit Supabase

Ein Feature, das bei Demos immer beeindruckt, ist Realtime:

Du: Füge Echtzeit-Synchronisation für Tasks mit Supabase Realtime hinzu.
Wenn ein Nutzer einen Task aktualisiert, sollen alle anderen Nutzer
die Änderung in Echtzeit sehen, ohne die Seite neu zu laden.

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

Dark Mode

Du: Füge Dark-Mode-Unterstützung mit Toggle im Header hinzu.
Verwende die Dark-Klassen von Tailwind und speichere die Präferenz im localStorage.

8. Best Practices für effektives Vibecoding

1. Sei spezifisch in deinen Prompts

❌ "Mach eine schöne Seite"
✅ "Erstelle eine Landing Page mit Hero-Section mit lila-blauem Farbverlauf, einer
   Features-Sektion mit 3 Karten mit Icons und einem CTA mit orangenem Button"

2. Gib Kontext

❌ "Füge Authentifizierung hinzu"
✅ "Füge Authentifizierung mit Supabase Auth hinzu. Das Projekt verwendet Next.js 15 App
   Router mit TypeScript. Ich möchte Login mit E-Mail/Passwort und OAuth mit GitHub.
   Verwende das SSR-Pattern mit @supabase/ssr"

3. Iteriere in kleinen Schritten

Versuche nicht, alles in einem einzigen Prompt zu bauen. Gehe inkrementell vor:

1. Basis-Layout
2. Ein Feature nach dem anderen
3. Styling und Feinschliff
4. Fehlerbehandlung
5. Testing

4. Überprüfe den generierten Code

Vibecoding bedeutet nicht, den Code nicht zu lesen. Überprüfe immer:

• Sicherheit: RLS Policies, Input-Validierung, Daten-Sanitisierung.
• Performance: N+1-Queries, unnötig client-seitige Komponenten.
• Best Practices: Projektstruktur, Naming Conventions.

5. Nutze Git strategisch

Du: Committe die Änderungen mit einer aussagekräftigen Nachricht nach jeder abgeschlossenen Feature.

Das ermöglicht es dir, zurückzugehen, wenn etwas schiefläuft.

9. Kosten: wirklich alles kostenlos?

Hier eine Kostenübersicht für jeden Dienst:

| Dienst | Kostenloser Plan | Wann wird bezahlt | |--------|-----------------|-------------------| | Claude Code | Erfordert einen Anthropic-Plan (ab 20 $/Monat) oder API-Key | Sofort, aber der Mehrwert ist enorm | | Supabase | Großzügiger Free Tier (2 Projekte, 500 MB DB) | Über die Free-Tier-Limits hinaus | | Vercel | Free Tier für persönliche Projekte | Für Teams oder kommerzielle Nutzung | | GitHub | Kostenlos für öffentliche und private Repos | Enterprise-Features |

Hinweis: Claude Code erfordert ein Abonnement oder API-Credits, aber die Rendite in Bezug auf Entwicklungsgeschwindigkeit ist außergewöhnlich. Für eine Demo oder ein MVP liegen die Gesamtkosten bei etwa 20 $.

Kostenlose Alternativen für KI

Wenn du die Kosten bei absolut null halten willst, kannst du verwenden:

• Cursor (Free Tier mit Einschränkungen).
• GitHub Copilot (kostenlos für Studierende und Open Source).
• Codeium/Windsurf (großzügiger kostenloser Tarif).

10. Von der Demo zum Produkt: nächste Schritte

Sobald deine Demo live ist, so geht es weiter:

1. Feedback sammeln: teile die Demo mit potenziellen Nutzern und sammle Meinungen.
2. Schnell iterieren: nutze Vibecoding, um die gewünschten Änderungen umzusetzen.
3. Kennzahlen überwachen: Vercel Analytics und das Supabase Dashboard liefern dir wesentliche Daten.
4. Skalieren, wenn nötig: wechsle erst zu den Bezahlplänen, wenn du die Nachfrage validiert hast.

Fazit

Vibecoding mit Claude Code, Supabase und Vercel ist eine äußerst leistungsfähige Kombination, um Demos und MVPs in Rekordzeit zu erstellen. Was früher Wochen an Entwicklungsarbeit erforderte, kann jetzt in wenigen Stunden realisiert werden – mit einem überraschend hohen Qualitätsniveau.

Der Schlüssel liegt darin, Vibecoding mit der richtigen Einstellung anzugehen: es geht nicht darum, „nicht programmieren zu können", sondern darum, deine Fähigkeiten mit KI-Tools zu verstärken. Je besser du die zugrundeliegenden Technologien kennst (React, SQL, Authentifizierung, Deployment), desto effektiver wirst du den KI-Agenten zum gewünschten Ergebnis führen.

Die Zukunft der Softwareentwicklung ist da, und die Einstiegskosten waren noch nie so niedrig. Erstelle deine Demo, validiere sie mit echten Nutzern und baue das nächste große Produkt.

Checkliste für deine erste Demo:

• [x] Claude Code installiert und konfiguriert
• [x] Supabase-Projekt mit Datenbankschema erstellt
• [x] Next.js-Projekt mit shadcn/ui initialisiert
• [x] Authentifizierung konfiguriert
• [x] Vollständiges CRUD implementiert
• [x] Moderne und responsive UI
• [x] Deployment auf Vercel durchgeführt
• [x] Teilbare URL bereit für Feedback