Come Creare una Demo con Claude Code: Vibecoding con Supabase e Vercel

Il vibecoding è un nuovo paradigma di sviluppo software in cui il programmatore guida un agente AI attraverso istruzioni in linguaggio naturale, lasciando che sia l'intelligenza artificiale a scrivere il codice effettivo. Il termine è stato coniato da Andrej Karpathy (co-founder di OpenAI e ex Director of AI di Tesla) in un celebre tweet del febbraio 2025: "C'è un nuovo tipo di coding che chiamo vibecoding, dove ti arrendi completamente alle vibes, abbracci gli esponenziali e dimentichi che il codice esiste."

In questo articolo vedremo come costruire una demo completa e funzionante usando Claude Code come agente AI, Supabase come backend (database, autenticazione, API) e Vercel per il deploy — il tutto sfruttando esclusivamente i tier gratuiti di questi servizi.

1. Cos'è il Vibecoding e perché è rivoluzionario

Il vibecoding rappresenta un cambio di paradigma fondamentale nello sviluppo software. Invece di scrivere codice riga per riga, il developer:

1. Descrive cosa vuole in linguaggio naturale.
2. L'agente AI genera il codice completo.
3. Il developer rivede, testa e itera.

Perché funziona

• Velocità: un progetto che richiederebbe giorni può essere costruito in ore.
• Accessibilità: anche chi non è un developer esperto può costruire prodotti funzionanti.
• Iterazione rapida: puoi testare idee e pivotare molto più velocemente.
• Focus sul prodotto: ti concentri sul cosa invece che sul come.

Quando usare il vibecoding

Il vibecoding è perfetto per:

• Demo e MVP: costruire rapidamente un prototipo per validare un'idea.
• Hackathon: creare un prodotto funzionante in poche ore.
• Side project: esplorare nuove tecnologie senza investire settimane.
• Proof of Concept: dimostrare la fattibilità tecnica a stakeholder o investitori.

Attenzione: Il vibecoding è eccellente per demo e prototipi. Per applicazioni production-grade con requisiti di sicurezza e scalabilità elevati, è comunque fondamentale una revisione approfondita del codice generato.

2. Lo stack tecnologico: Claude Code + Supabase + Vercel

Claude Code

Claude Code è l'agente di coding AI di Anthropic. Funziona direttamente nel tuo terminale e può:

• Leggere e comprendere l'intero codebase.
• Creare, modificare e cancellare file.
• Eseguire comandi nel terminale.
• Interagire con API e servizi esterni.
• Gestire il versionamento con Git.
• Iterare autonomamente su errori e bug.

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

# Avvio in una directory di progetto
cd my-project
claude

Supabase (Tier gratuito)

Supabase è un'alternativa open source a Firebase che offre:

• Database PostgreSQL: un database relazionale completo.
• Autenticazione: login con email, Google, GitHub, ecc.
• API REST e Realtime: generate automaticamente dal tuo schema.
• Storage: per file e immagini.
• Edge Functions: funzioni serverless.

Il tier gratuito include:

| Risorsa | Limite gratuito | |---------|----------------| | Database | 500 MB | | Storage | 1 GB | | Bandwidth | 5 GB | | Edge Function invocations | 500K/mese | | Utenti autenticati | Illimitati | | Progetti | 2 progetti attivi |

Vercel (Tier gratuito)

Vercel è la piattaforma di deploy perfetta per applicazioni Next.js:

• Deploy automatico da GitHub.
• Preview deployments per ogni branch e PR.
• CDN globale per performance ottimali.
• Serverless Functions incluse.
• Analytics base gratuite.

Il tier gratuito include:

| Risorsa | Limite gratuito | |---------|----------------| | Bandwidth | 100 GB/mese | | Serverless Function execution | 100 GB-ore/mese | | Builds | 6.000 minuti/mese | | Progetti | Illimitati | | Deploy | Illimitati |

3. Setup iniziale: preparare l'ambiente

Prerequisiti

Prima di iniziare, assicurati di avere:

• Node.js 18+ installato.
• Git configurato.
• Un account GitHub.
• Un account Supabase (gratuito su supabase.com).
• Un account Vercel (gratuito su vercel.com).
• Claude Code installato (npm install -g @anthropic-ai/claude-code).

Step 1: Creare il progetto

Apri il terminale e avvia Claude Code:

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

Ora puoi iniziare a dare istruzioni a Claude Code in linguaggio naturale:

Tu: Crea un progetto Next.js 15 con App Router, TypeScript, Tailwind CSS e
shadcn/ui. Inizializza anche un repository Git.

Claude Code eseguirà automaticamente:

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

Step 2: Configurare Supabase

1. Vai su supabase.com e crea un nuovo progetto.
2. Prendi nota di Project URL e anon key dalla sezione Settings > API.
3. Torna al terminale con Claude Code:

Tu: Aggiungi Supabase al progetto. Crea un file .env.local con le variabili
NEXT_PUBLIC_SUPABASE_URL e NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura il client
Supabase con SSR support per Next.js App Router.

Claude Code creerà la configurazione completa:

// 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. Costruire la demo: un'app di task management

Costruiamo una demo concreta: un'app di task management con autenticazione, CRUD completo e interfaccia moderna.

Definire lo schema del database

Dai istruzioni a Claude Code per creare lo schema:

Tu: Crea una migrazione SQL per Supabase con le seguenti tabelle:

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

Abilita Row Level Security su tutte le tabelle e crea le policy appropriate.

Claude Code genererà una migrazione completa:

-- Crea i tipi enum
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

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

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

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

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

-- Policy per 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);

-- Policy per 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);

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

Puoi eseguire questa migrazione direttamente dalla dashboard di Supabase (SQL Editor) o tramite la CLI.

Generare i tipi TypeScript

Tu: Genera i tipi TypeScript dal database Supabase e salvali in src/types/database.ts

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

Costruire l'interfaccia utente

Ora viene la parte più potente del vibecoding. Dai istruzioni di alto livello a Claude Code:

Tu: Crea una pagina dashboard per l'app di task management con:

1. Sidebar con navigazione tra progetti
2. Vista Kanban con 3 colonne (Todo, In Progress, Done) con drag & drop
3. Modal per creare/modificare task
4. Header con avatar utente e logout
5. Design moderno con shadcn/ui e Tailwind

Usa i dati da Supabase con React Server Components dove possibile
e Client Components solo dove serve interattività.

Claude Code costruirà l'intera interfaccia, componente per componente.

Aggiungere l'autenticazione

Tu: Aggiungi un sistema di autenticazione completo con:

1. Pagina di login con email/password e login con GitHub
2. Pagina di registrazione
3. Middleware per proteggere le rotte autenticate
4. Redirect automatico per utenti non autenticati
5. Creazione automatica del profilo dopo la registrazione

Claude Code configurerà il middleware di Next.js e le pagine di auth:

// 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. Pattern avanzati di vibecoding

Il prompting iterativo

Il segreto del vibecoding efficace è l'iterazione. Non cercare di descrivere tutto in un singolo prompt. Procedi per step:

Step 1: "Crea il layout base con header e sidebar"
Step 2: "Aggiungi la lista dei progetti nella sidebar con un bottone per crearne di nuovi"
Step 3: "Crea la vista Kanban nella main area"
Step 4: "Aggiungi il drag & drop tra le colonne"
Step 5: "Implementa il modal per creare nuovi task"
Step 6: "Aggiungi le notifiche toast per feedback all'utente"

Tip: Più il prompt è specifico e contestualizzato, migliore sarà il risultato. Claude Code ha accesso all'intero codebase, quindi può integrare nuove funzionalità in modo coerente.

Gestione degli errori

Quando qualcosa non funziona (e succederà), puoi semplicemente dire:

Tu: Ho questo errore nella console: "TypeError: Cannot read property 'map' of undefined"
nel componente TaskList. Fixalo.

Claude Code analizzerà il codice, identificherà il problema e lo risolverà.

Refactoring con AI

Tu: Il componente Dashboard è diventato troppo grande. Dividilo in componenti
più piccoli e riutilizzabili, mantenendo la stessa funzionalità.

Testing

Tu: Aggiungi test con Vitest per le utility functions e test con Playwright
per il flusso di autenticazione e creazione task.

6. Deploy su Vercel: dal codice al mondo

Step 1: Pushare su GitHub

Tu: Crea un .gitignore appropriato, committa tutto e pusha su un nuovo
repository GitHub chiamato "my-demo-app".

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

Step 2: Connettere Vercel

1. Vai su vercel.com e clicca "Add New Project".
2. Importa il repository GitHub appena creato.
3. Aggiungi le variabili d'ambiente:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Clicca "Deploy".

Step 3: Configurare il dominio (opzionale)

Vercel fornisce un URL gratuito tipo my-demo-app.vercel.app. Per un dominio personalizzato:

Tu: Aggiungi la configurazione per un dominio personalizzato in vercel.json

Preview Deployments

Ogni volta che apri una Pull Request su GitHub, Vercel creerà automaticamente un preview deployment con un URL unico. Perfetto per mostrare le modifiche prima del merge.

7. Ottimizzazioni per la demo

Performance

Tu: Ottimizza le performance dell'app:
1. Aggiungi loading states con Suspense e skeleton
2. Implementa caching con unstable_cache di Next.js
3. Ottimizza le immagini con next/image
4. Aggiungi metadata SEO per ogni pagina

Realtime con Supabase

Una feature che impressiona sempre nelle demo è il realtime:

Tu: Aggiungi sincronizzazione realtime per i task usando Supabase Realtime.
Quando un utente aggiorna un task, tutti gli altri utenti devono vedere
il cambiamento in tempo reale senza refresh.

'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

Tu: Aggiungi supporto dark mode con toggle nell'header.
Usa le classi dark di Tailwind e salva la preferenza in localStorage.

8. Best practice per il vibecoding efficace

1. Sii specifico nei prompt

❌ "Fai una pagina bella"
✅ "Crea una landing page con hero section con gradiente viola-blu, una sezione
   features con 3 card con icone, e una CTA con bottone arancione"

2. Dai contesto

❌ "Aggiungi autenticazione"
✅ "Aggiungi autenticazione con Supabase Auth. Il progetto usa Next.js 15 App
   Router con TypeScript. Voglio login con email/password e OAuth con GitHub.
   Usa il pattern SSR con @supabase/ssr"

3. Itera in piccoli step

Non cercare di costruire tutto in un singolo prompt. Procedi per incrementi:

1. Layout base
2. Una feature alla volta
3. Styling e polish
4. Gestione errori
5. Testing

4. Rivedi il codice generato

Il vibecoding non significa non leggere il codice. Rivedi sempre:

• Sicurezza: RLS policies, validazione input, sanitizzazione dati.
• Performance: query N+1, componenti inutilmente client-side.
• Best practice: struttura del progetto, naming conventions.

5. Usa Git strategicamente

Tu: Committa le modifiche con un messaggio descrittivo dopo ogni feature completata.

Questo ti permette di tornare indietro se qualcosa va storto.

9. Costi: tutto davvero gratis?

Ecco un riepilogo dei costi per ciascun servizio:

| Servizio | Piano gratuito | Quando si paga | |----------|---------------|----------------| | Claude Code | Richiede un piano Anthropic (a partire da $20/mese) oppure API key | Subito, ma il valore è enorme | | Supabase | Generoso free tier (2 progetti, 500MB DB) | Oltre i limiti del free tier | | Vercel | Free tier per progetti personali | Per team o uso commerciale | | GitHub | Gratuito per repo pubblici e privati | Features enterprise |

Nota: Claude Code richiede un abbonamento o crediti API, ma il ritorno sull'investimento in termini di velocità di sviluppo è straordinario. Per una demo o MVP, il costo totale è nell'ordine di $20.

Alternative gratuite per l'AI

Se vuoi mantenere il costo a zero assoluto, puoi usare:

• Cursor (free tier con limitazioni).
• GitHub Copilot (gratuito per studenti e open source).
• Codeium/Windsurf (tier gratuito generoso).

10. Dalla demo al prodotto: prossimi step

Una volta che la tua demo è live, ecco come procedere:

1. Raccogli feedback: condividi la demo con potenziali utenti e raccogli opinioni.
2. Itera velocemente: usa il vibecoding per implementare le modifiche richieste.
3. Monitora le metriche: Vercel Analytics e Supabase Dashboard ti danno dati essenziali.
4. Scala quando serve: passa ai piani a pagamento solo quando hai validato la domanda.

Conclusione

Il vibecoding con Claude Code, Supabase e Vercel rappresenta una combinazione potentissima per costruire demo e MVP in tempi record. Quello che prima richiedeva settimane di sviluppo ora può essere realizzato in poche ore, con un livello di qualità sorprendente.

La chiave è approcciare il vibecoding con la giusta mentalità: non si tratta di "non sapere programmare", ma di amplificare le tue capacità con strumenti AI. Più conosci le tecnologie sottostanti (React, SQL, autenticazione, deploy), più sarai efficace nel guidare l'agente AI verso il risultato desiderato.

Il futuro dello sviluppo software è qui, e il costo per iniziare non è mai stato così basso. Crea la tua demo, validala con utenti reali, e costruisci il prossimo grande prodotto.

Checklist per la tua prima demo:

• [x] Claude Code installato e configurato
• [x] Progetto Supabase creato con schema database
• [x] Progetto Next.js inizializzato con shadcn/ui
• [x] Autenticazione configurata
• [x] CRUD completo implementato
• [x] UI moderna e responsive
• [x] Deploy su Vercel effettuato
• [x] URL condivisibile pronto per il feedback