Sådan bygger du en demo med Claude Code: Vibecoding med Supabase og Vercel

Vibecoding er et nyt softwareudviklingsparadigme, hvor programmøren guider en AI-agent gennem instruktioner på naturligt sprog og lader den kunstige intelligens skrive den faktiske kode. Udtrykket blev opfundet af Andrej Karpathy (medstifter af OpenAI og tidligere Director of AI hos Tesla) i et berømt tweet fra februar 2025: "There's a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace the exponentials, and forget that the code even exists."

I denne artikel ser vi, hvordan man bygger en komplet, fungerende demo ved hjælp af Claude Code som AI-agent, Supabase som backend (database, autentificering, API) og Vercel til deployment - alt sammen udelukkende ved hjælp af de gratis niveauer af disse tjenester.

1. Hvad er vibecoding, og hvorfor er det revolutionerende

Vibecoding repræsenterer et fundamentalt paradigmeskift i softwareudvikling. I stedet for at skrive kode linje for linje:

1. Beskriver udvikleren, hvad de ønsker, på naturligt sprog.
2. AI-agenten genererer den komplette kode.
3. Udvikleren gennemgår, tester og itererer.

Hvorfor det virker

• Hastighed: et projekt, der ville tage dage, kan bygges på timer.
• Tilgængelighed: selv ikke-ekspert udviklere kan bygge fungerende produkter.
• Hurtig iteration: du kan teste idéer og pivotere meget hurtigere.
• Produktfokus: du koncentrerer dig om hvad i stedet for hvordan.

Hvornår skal man bruge vibecoding

Vibecoding er perfekt til:

• Demoer og MVPer: hurtigt at bygge en prototype for at validere en idé.
• Hackathons: at skabe et fungerende produkt på blot et par timer.
• Sideprojekter: at udforske nye teknologier uden at investere uger.
• Proof of Concept: at demonstrere teknisk gennemførlighed for interessenter eller investorer.

Advarsel: Vibecoding er fremragende til demoer og prototyper. For produktionsklare applikationer med høje sikkerheds- og skalerbarhedskrav er en grundig gennemgang af den genererede kode stadig essentiel.

2. Tech-stakken: Claude Code + Supabase + Vercel

Claude Code

Claude Code er Anthropics AI-kodningsagent. Den arbejder direkte i din terminal og kan:

• Læse og forstå hele kodebasen.
• Oprette, ændre og slette filer.
• Udføre terminalkommandoer.
• Interagere med APIer og eksterne tjenester.
• Håndtere versionering med Git.
• Autonomt iterere på fejl og bugs.

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

# Start i en projektmappe
cd my-project
claude

Supabase (Gratis niveau)

Supabase er et open source Firebase-alternativ, der tilbyder:

• PostgreSQL Database: en komplet relationel database.
• Autentificering: login med e-mail, Google, GitHub osv.
• REST og Realtime APIer: automatisk genereret fra dit skema.
• Storage: til filer og billeder.
• Edge Functions: serverless funktioner.

Det gratis niveau inkluderer:

Vercel (Gratis niveau)

Vercel er den perfekte deployment-platform for Next.js-applikationer:

• Automatisk deployment fra GitHub.
• Preview deployments for hver branch og PR.
• Global CDN for optimal ydeevne.
• Serverless Functions inkluderet.
• Grundlæggende analytics gratis.

Det gratis niveau inkluderer:

3. Indledende opsætning: Forberedelse af miljøet

Forudsætninger

Før du begynder, skal du sikre dig, at du har:

• Node.js 18+ installeret.
• Git konfigureret.
• En GitHub-konto.
• En Supabase-konto (gratis på supabase.com).
• En Vercel-konto (gratis på vercel.com).
• Claude Code installeret (npm install -g @anthropic-ai/claude-code).

Trin 1: Opret projektet

Åbn terminalen og start Claude Code:

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

Nu kan du begynde at give Claude Code instruktioner på naturligt sprog:

Du: Opret et Next.js 15-projekt med App Router, TypeScript, Tailwind CSS
og shadcn/ui. Initialiser også et Git-repository.

Claude Code vil automatisk udføre:

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

Trin 2: Konfigurer Supabase

1. Gå til supabase.com og opret et nyt projekt.
2. Notér Project URL og anon key fra Settings > API.
3. Gå tilbage til terminalen med Claude Code:

Du: Tilføj Supabase til projektet. Opret en .env.local-fil med variablerne
NEXT_PUBLIC_SUPABASE_URL og NEXT_PUBLIC_SUPABASE_ANON_KEY. Konfigurer
Supabase-klienten med SSR-understøttelse til Next.js App Router.

Claude Code vil oprette den komplette 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. Opbygning af demoen: En opgavestyringsapp

Lad os bygge en konkret demo: en opgavestyringsapp med autentificering, fuld CRUD og et moderne interface.

Definer databaseskemaet

Giv Claude Code instruktioner til at oprette skemaet:

Du: Opret en SQL-migration til Supabase med følgende tabeller:

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

Aktiver Row Level Security på alle tabeller og opret passende policies.

Claude Code vil generere en komplet migration:

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

Du kan køre denne migration direkte fra Supabase-dashboardet (SQL Editor) eller via CLI.

Generer TypeScript-typer

Du: Generer TypeScript-typer fra Supabase-databasen og gem dem i src/types/database.ts

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

Byg brugergrænsefladen

Nu kommer den mest kraftfulde del af vibecoding. Giv Claude Code instruktioner på højt niveau:

Du: Opret en dashboard-side til opgavestyringsappen med:

1. Sidebar med navigation mellem projekter
2. Kanban-visning med 3 kolonner (Todo, In Progress, Done) med drag & drop
3. Modal til at oprette/redigere opgaver
4. Header med brugeravatar og logout
5. Moderne design med shadcn/ui og Tailwind

Brug data fra Supabase med React Server Components hvor muligt
og Client Components kun hvor interaktivitet er nødvendig.

Claude Code vil bygge hele grænsefladen, komponent for komponent.

Tilføj autentificering

Du: Tilføj et komplet autentificeringssystem med:

1. Login-side med e-mail/adgangskode og GitHub-login
2. Registreringsside
3. Middleware til at beskytte autentificerede ruter
4. Automatisk omdirigering for uautentificerede brugere
5. Automatisk profiloprettelse efter registrering

Claude Code vil konfigurere Next.js middleware og auth-sider:

// 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. Avancerede vibecoding-mønstre

Iterativ prompting

Hemmeligheden bag effektiv vibecoding er iteration. Forsøg ikke at beskrive alt i en enkelt prompt. Fortsæt trinvist:

Trin 1: "Opret det grundlæggende layout med header og sidebar"
Trin 2: "Tilføj projektlisten i sidebaren med en knap til at oprette nye"
Trin 3: "Opret Kanban-visningen i hovedområdet"
Trin 4: "Tilføj drag & drop mellem kolonner"
Trin 5: "Implementer modalen til at oprette nye opgaver"
Trin 6: "Tilføj toast-notifikationer for brugerfeedback"

Tip: Jo mere specifik og kontekstualiseret prompten er, desto bedre er resultatet. Claude Code har adgang til hele kodebasen, så den kan integrere nye funktioner sammenhængende.

Fejlhåndtering

Når noget ikke virker (og det vil det), kan du simpelthen sige:

Du: Jeg får denne fejl i konsollen: "TypeError: Cannot read property
'map' of undefined" i TaskList-komponenten. Ret det.

Claude Code vil analysere koden, identificere problemet og rette det.

Refaktorering med AI

Du: Dashboard-komponenten er blevet for stor. Opdel den i mindre,
genanvendelige komponenter, mens den samme funktionalitet bevares.

Test

Du: Tilføj tests med Vitest til utility-funktioner og Playwright-tests til
autentificerings- og opgaveoprettelsesflowet.

6. Deploy til Vercel: Fra kode til verden

Trin 1: Push til GitHub

Du: Opret en passende .gitignore, commit alt, og push til et nyt
GitHub-repository kaldet "my-demo-app".

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

Trin 2: Forbind Vercel

1. Gå til vercel.com og klik "Add New Project."
2. Importér det GitHub-repository, du lige har oprettet.
3. Tilføj miljøvariabler:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klik "Deploy."

Trin 3: Konfigurer et brugerdefineret domæne (valgfrit)

Vercel giver en gratis URL som my-demo-app.vercel.app. For et brugerdefineret domæne:

Du: Tilføj konfigurationen for et brugerdefineret domæne i vercel.json

Preview Deployments

Hver gang du åbner en Pull Request på GitHub, vil Vercel automatisk oprette et preview deployment med en unik URL. Perfekt til at vise ændringer før merge.

7. Optimeringer til din demo

Ydeevne

Du: Optimer appens ydeevne:
1. Tilføj indlæsningstilstande med Suspense og skeletons
2. Implementer caching med Next.js unstable_cache
3. Optimer billeder med next/image
4. Tilføj SEO-metadata til hver side

Realtime med Supabase

En funktion, der altid imponerer i demoer, er realtime:

Du: Tilføj realtids-synkronisering for opgaver ved hjælp af Supabase Realtime.
Når en bruger opdaterer en opgave, skal alle andre brugere se ændringen
i realtid uden at genindlæse.

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

Mørk tilstand

Du: Tilføj understøttelse af mørk tilstand med en skifteknap i headeren.
Brug Tailwind dark-klasser og gem præferencen i localStorage.

8. Bedste praksis for effektiv vibecoding

1. Vær specifik i dine prompts

Nej: "Lav en pæn side"
Ja: "Opret en landingsside med en hero-sektion med en lilla-blå gradient,
   en funktions-sektion med 3 kort med ikoner og en orange CTA-knap"

2. Giv kontekst

Nej: "Tilføj autentificering"
Ja: "Tilføj autentificering med Supabase Auth. Projektet bruger Next.js 15 App
   Router med TypeScript. Jeg vil have e-mail/adgangskode-login og OAuth med GitHub.
   Brug SSR-mønsteret med @supabase/ssr"

3. Iterer i små trin

Forsøg ikke at bygge alt i en enkelt prompt. Fortsæt trinvist:

1. Grundlæggende layout
2. Én funktion ad gangen
3. Styling og finpudsning
4. Fejlhåndtering
5. Test

4. Gennemgå den genererede kode

Vibecoding betyder ikke, at man ikke læser koden. Gennemgå altid:

• Sikkerhed: RLS-politikker, inputvalidering, datasanering.
• Ydeevne: N+1-forespørgsler, unødvendigt klientside-komponenter.
• Bedste praksis: projektstruktur, navngivningskonventioner.

5. Brug Git strategisk

Du: Commit ændringerne med en beskrivende besked efter hver fuldført funktion.

Dette giver dig mulighed for at rulle tilbage, hvis noget går galt.

9. Omkostninger: Er det virkelig alt gratis?

Her er en omkostningsoversigt for hver tjeneste:

Bemærk: Claude Code kræver et abonnement eller API-kreditter, men afkastet i form af udviklingshastighed er ekstraordinært. For en demo eller MVP er de samlede omkostninger i området $20.

Gratis AI-alternativer

Hvis du vil holde omkostningerne på absolut nul, kan du bruge:

• Cursor (gratis niveau med begrænsninger).
• GitHub Copilot (gratis for studerende og open source).
• Codeium/Windsurf (generøst gratis niveau).

10. Fra demo til produkt: Næste trin

Når din demo er live, er her hvordan du fortsætter:

1. Indsaml feedback: del demoen med potentielle brugere og indsaml meninger.
2. Iterer hurtigt: brug vibecoding til at implementere de ønskede ændringer.
3. Overvåg metrics: Vercel Analytics og Supabase Dashboard giver dig essentielle data.
4. Skalér når nødvendigt: opgrader til betalte planer først, når du har valideret efterspørgslen.

Konklusion

Vibecoding med Claude Code, Supabase og Vercel repræsenterer en kraftfuld kombination til at bygge demoer og MVPer på rekordtid. Det, der plejede at tage uger af udvikling, kan nu opnås på blot et par timer med et overraskende højt kvalitetsniveau.

Nøglen er at nærme sig vibecoding med den rette tankegang: det handler ikke om "ikke at vide, hvordan man koder", men om at forstærke dine evner med AI-værktøjer. Jo mere du ved om de underliggende teknologier (React, SQL, autentificering, deployment), jo mere effektiv vil du være til at guide AI-agenten mod det ønskede resultat.

Fremtiden for softwareudvikling er her, og prisen for at komme i gang har aldrig været lavere. Opret din demo, validér den med rigtige brugere, og byg det næste store produkt.

Tjekliste til din første demo:

• Claude Code installeret og konfigureret
• Supabase-projekt oprettet med databaseskema
• Next.js-projekt initialiseret med shadcn/ui
• Autentificering konfigureret
• Fuld CRUD implementeret
• Moderne og responsiv UI
• Deployed til Vercel
• Delbar URL klar til feedback