Hur Man Bygger en Demo med Claude Code: Vibecoding med Supabase och Vercel

Vibecoding är ett nytt mjukvaruutvecklingsparadigm där programmeraren guidar en AI-agent genom instruktioner på naturligt språk och låter den artificiella intelligensen skriva den faktiska koden. Termen myntades av Andrej Karpathy (medgrundare av OpenAI och tidigare Director of AI på Tesla) i en berömd tweet från februari 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 den här artikeln ser vi hur man bygger en komplett, fungerande demo med Claude Code som AI-agent, Supabase som backend (databas, autentisering, API) och Vercel för deployment - allt med uteslutande gratistjänster.

1. Vad Är Vibecoding och Varför Det Är Revolutionerande

Vibecoding representerar ett fundamentalt paradigmskifte inom mjukvaruutveckling. Istället för att skriva kod rad för rad gör utvecklaren:

1. Beskriver vad de vill ha på naturligt språk.
2. AI-agenten genererar den kompletta koden.
3. Utvecklaren granskar, testar och itererar.

Varför Det Fungerar

• Hastighet: ett projekt som skulle ta dagar kan byggas på timmar.
• Tillgänglighet: även icke-expert utvecklare kan bygga fungerande produkter.
• Snabb iteration: du kan testa idéer och pivotera mycket snabbare.
• Produktfokus: du koncentrerar dig på vad istället för hur.

När Ska Man Använda Vibecoding

Vibecoding är perfekt för:

• Demos och MVP:er: snabbt bygga en prototyp för att validera en idé.
• Hackathons: skapa en fungerande produkt på bara några timmar.
• Sidoprojekt: utforska nya teknologier utan att investera veckor.
• Proof of Concept: demonstrera teknisk genomförbarhet för intressenter eller investerare.

Varning: Vibecoding är utmärkt för demos och prototyper. För produktionsklara applikationer med höga säkerhets- och skalbarhetskrav är en noggrann granskning av den genererade koden fortfarande nödvändig.

2. Teknikstacken: Claude Code + Supabase + Vercel

Claude Code

Claude Code är Anthropics AI-kodningsagent. Den fungerar direkt i din terminal och kan:

• Läsa och förstå hela kodbasen.
• Skapa, ändra och ta bort filer.
• Köra terminalkommandon.
• Interagera med API:er och externa tjänster.
• Hantera versionshantering med Git.
• Autonomt iterera på fel och buggar.

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

# Start in a project directory
cd my-project
claude

Supabase (Gratis Tier)

Supabase är ett Firebase-alternativ med öppen källkod som erbjuder:

• PostgreSQL-databas: en komplett relationsdatabas.
• Autentisering: inloggning med e-post, Google, GitHub, etc.
• REST och Realtime API:er: automatiskt genererade från ditt schema.
• Lagring: för filer och bilder.
• Edge Functions: serverlösa funktioner.

Gratisnivån inkluderar:

Resurs	Gratis Gräns
Databas	500 MB
Lagring	1 GB
Bandbredd	5 GB
Edge Function-anrop	500K/månad
Autentiserade användare	Obegränsat
Projekt	2 aktiva projekt

Vercel (Gratis Tier)

Vercel är den perfekta deployment-plattformen för Next.js-applikationer:

• Automatisk deployment från GitHub.
• Preview deployments för varje branch och PR.
• Globalt CDN för optimal prestanda.
• Serverless Functions inkluderade.
• Grundläggande analytics gratis.

Gratisnivån inkluderar:

Resurs	Gratis Gräns
Bandbredd	100 GB/månad
Serverless Function-körning	100 GB-timmar/månad
Byggen	6 000 minuter/månad
Projekt	Obegränsat
Deployments	Obegränsat

3. Initial Setup: Förbereda Miljön

Förutsättningar

Innan du börjar, se till att du har:

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

Steg 1: Skapa Projektet

Öppna terminalen och starta Claude Code:

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

Nu kan du ge Claude Code instruktioner på naturligt språk:

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

Claude Code kommer automatiskt köra:

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

Steg 2: Konfigurera Supabase

1. Gå till supabase.com och skapa ett nytt projekt.
2. Notera Project URL och anon key från Settings > API.
3. Gå tillbaka till terminalen med 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 skapar den kompletta konfigurationen:

// 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. Bygga Demon: En Uppgiftshanteringsapp

Låt oss bygga en konkret demo: en uppgiftshanteringsapp med autentisering, fullständig CRUD och ett modernt gränssnitt.

Definiera Databasschemat

Ge Claude Code instruktioner för att skapa schemat:

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 genererar en komplett migrering:

-- 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öra denna migrering direkt från Supabase-dashboarden (SQL Editor) eller via CLI:n.

Generera TypeScript-typer

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

Bygg Användargränssnittet

Nu kommer den mest kraftfulla delen av vibecoding. Ge Claude Code instruktioner på hög nivå:

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 bygger hela gränssnittet, komponent för komponent.

Lägg Till Autentisering

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 konfigurerar Next.js middleware och auth-sidor:

// 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. Avancerade Vibecoding-mönster

Iterativ Prompting

Hemligheten bakom effektiv vibecoding är iteration. Försök inte beskriva allt i en enda prompt. Gå steg för steg:

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

Tips: Ju mer specifik och kontextualiserad prompten är, desto bättre blir resultatet. Claude Code har tillgång till hela kodbasen, så det kan integrera nya funktioner koherent.

Felhantering

När något inte fungerar (och det kommer att hända), kan du helt enkelt säga:

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

Claude Code analyserar koden, identifierar problemet och åtgärdar det.

Refaktorering med AI

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

Testning

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

6. Deploya till Vercel: Från Kod till Världen

Steg 1: Pusha till 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=.

Steg 2: Anslut Vercel

1. Gå till vercel.com och klicka på "Add New Project."
2. Importera GitHub-repot du just skapade.
3. Lägg till miljövariabler:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klicka på "Deploy."

Steg 3: Konfigurera en Egen Domän (Valfritt)

Vercel tillhandahåller en gratis URL som my-demo-app.vercel.app. För en egen domän:

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

Preview Deployments

Varje gång du öppnar en Pull Request på GitHub skapar Vercel automatiskt en preview deployment med en unik URL. Perfekt för att visa ändringar innan merge.

7. Optimeringar för Din Demo

Prestanda

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

Realtid med Supabase

En funktion som alltid imponerar i demos är realtid:

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

Mörkt Läge

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

8. Bästa Praxis för Effektiv Vibecoding

1. Var Specifik i Dina Prompter

Nej: "Make a nice page"
Ja: "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. Ge Kontext

Nej: "Add authentication"
Ja: "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. Iterera i Små Steg

Försök inte bygga allt i en enda prompt. Gå stegvis:

1. Grundlayout
2. En funktion i taget
3. Styling och finish
4. Felhantering
5. Testning

4. Granska Den Genererade Koden

Vibecoding betyder inte att man inte läser koden. Granska alltid:

• Säkerhet: RLS-policyer, indatavalidering, datasanering.
• Prestanda: N+1-frågor, onödigt klientsidiga komponenter.
• Bästa praxis: projektstruktur, namnkonventioner.

5. Använd Git Strategiskt

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

Detta låter dig återställa om något går fel.

9. Kostnader: Är Det Verkligen Helt Gratis?

Här är en kostnadsöversikt per tjänst:

Tjänst	Gratis Plan	När Du Betalar
Claude Code	Kräver en Anthropic-plan (från $20/månad) eller API-nyckel	Omedelbart, men värdet är enormt
Supabase	Generös gratisnivå (2 projekt, 500MB DB)	Utöver gratisgränserna
Vercel	Gratisnivå för personliga projekt	För team eller kommersiellt bruk
GitHub	Gratis för offentliga och privata repos	Enterprise-funktioner

Notera: Claude Code kräver en prenumeration eller API-kredit, men avkastningen i utvecklingshastighet är extraordinär. För en demo eller MVP ligger totalkostnaden runt $20.

Gratis AI-alternativ

Om du vill hålla kostnaderna på absolut noll kan du använda:

• Cursor (gratisnivå med begränsningar).
• GitHub Copilot (gratis för studenter och öppen källkod).
• Codeium/Windsurf (generös gratisnivå).

10. Från Demo till Produkt: Nästa Steg

När din demo är live, här är hur du går vidare:

1. Samla feedback: dela demon med potentiella användare och samla åsikter.
2. Iterera snabbt: använd vibecoding för att implementera begärda ändringar.
3. Övervaka mätvärden: Vercel Analytics och Supabase Dashboard ger dig väsentlig data.
4. Skala vid behov: uppgradera till betalplaner först när du har validerat efterfrågan.

Slutsats

Vibecoding med Claude Code, Supabase och Vercel representerar en kraftfull kombination för att bygga demos och MVP:er på rekordtid. Det som tidigare tog veckor av utveckling kan nu åstadkommas på bara några timmar, med en överraskande hög kvalitetsnivå.

Nyckeln är att närma sig vibecoding med rätt inställning: det handlar inte om att "inte kunna koda" utan om att förstärka dina förmågor med AI-verktyg. Ju mer du vet om de underliggande teknologierna (React, SQL, autentisering, deployment), desto effektivare blir du på att guida AI-agenten mot önskat resultat.

Framtiden för mjukvaruutveckling är här, och kostnaden för att komma igång har aldrig varit lägre. Skapa din demo, validera den med riktiga användare och bygg nästa fantastiska produkt.

Checklista för din första demo:

• Claude Code installerat och konfigurerat
• Supabase-projekt skapat med databasschema
• Next.js-projekt initierat med shadcn/ui
• Autentisering konfigurerad
• Fullständig CRUD implementerad
• Modern och responsiv UI
• Deployad till Vercel
• Delbar URL redo för feedback