1 
2Il **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."_
3 
4In 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.
5 
6## 1. Cos'è il Vibecoding e perché è rivoluzionario
7 
8Il vibecoding rappresenta un cambio di paradigma fondamentale nello sviluppo software. Invece di scrivere codice riga per riga, il developer:
9 
101. **Descrive** cosa vuole in linguaggio naturale.
112. **L'agente AI** genera il codice completo.
123. **Il developer** rivede, testa e itera.
13 
14### Perché funziona
15 
16- **Velocità**: un progetto che richiederebbe giorni può essere costruito in ore.
17- **Accessibilità**: anche chi non è un developer esperto può costruire prodotti funzionanti.
18- **Iterazione rapida**: puoi testare idee e pivotare molto più velocemente.
19- **Focus sul prodotto**: ti concentri sul _cosa_ invece che sul _come_.
20 
21```mermaid
22flowchart LR
23    A[Idea] --> B[Prompt in linguaggio naturale]
24    B --> C[Claude Code genera il codice]
25    C --> D[Review e test]
26    D --> E[Iterazione]
27    E --> B
28    D --> F[Deploy su Vercel]
29```
30 
31### Quando usare il vibecoding
32 
33Il vibecoding è perfetto per:
34 
35- **Demo e MVP**: costruire rapidamente un prototipo per validare un'idea.
36- **Hackathon**: creare un prodotto funzionante in poche ore.
37- **Side project**: esplorare nuove tecnologie senza investire settimane.
38- **Proof of Concept**: dimostrare la fattibilità tecnica a stakeholder o investitori.
39 
40> **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.
41 
42## 2. Lo stack tecnologico: Claude Code + Supabase + Vercel
43 
44### Claude Code
45 
46Claude Code è l'agente di coding AI di Anthropic. Funziona direttamente nel tuo terminale e può:
47 
48- Leggere e comprendere l'intero codebase.
49- Creare, modificare e cancellare file.
50- Eseguire comandi nel terminale.
51- Interagire con API e servizi esterni.
52- Gestire il versionamento con Git.
53- Iterare autonomamente su errori e bug.
54 
55```bash
56# Installazione di Claude Code
57npm install -g @anthropic-ai/claude-code
58 
59# Avvio in una directory di progetto
60cd my-project
61claude
62```
63 
64### Supabase (Tier gratuito)
65 
66Supabase è un'alternativa open source a Firebase che offre:
67 
68- **Database PostgreSQL**: un database relazionale completo.
69- **Autenticazione**: login con email, Google, GitHub, ecc.
70- **API REST e Realtime**: generate automaticamente dal tuo schema.
71- **Storage**: per file e immagini.
72- **Edge Functions**: funzioni serverless.
73 
74Il tier gratuito include:
75 
76| Risorsa | Limite gratuito |
77|---------|----------------|
78| Database | 500 MB |
79| Storage | 1 GB |
80| Bandwidth | 5 GB |
81| Edge Function invocations | 500K/mese |
82| Utenti autenticati | Illimitati |
83| Progetti | 2 progetti attivi |
84 
85### Vercel (Tier gratuito)
86 
87Vercel è la piattaforma di deploy perfetta per applicazioni Next.js:
88 
89- **Deploy automatico** da GitHub.
90- **Preview deployments** per ogni branch e PR.
91- **CDN globale** per performance ottimali.
92- **Serverless Functions** incluse.
93- **Analytics** base gratuite.
94 
95Il tier gratuito include:
96 
97| Risorsa | Limite gratuito |
98|---------|----------------|
99| Bandwidth | 100 GB/mese |
100| Serverless Function execution | 100 GB-ore/mese |
101| Builds | 6.000 minuti/mese |
102| Progetti | Illimitati |
103| Deploy | Illimitati |
104 
105## 3. Setup iniziale: preparare l'ambiente
106 
107### Prerequisiti
108 
109Prima di iniziare, assicurati di avere:
110 
111- **Node.js 18+** installato.
112- **Git** configurato.
113- Un account **GitHub**.
114- Un account **Supabase** (gratuito su [supabase.com](https://supabase.com)).
115- Un account **Vercel** (gratuito su [vercel.com](https://vercel.com)).
116- **Claude Code** installato (`npm install -g @anthropic-ai/claude-code`).
117 
118### Step 1: Creare il progetto
119 
120Apri il terminale e avvia Claude Code:
121 
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126 
127Ora puoi iniziare a dare istruzioni a Claude Code in linguaggio naturale:
128 
129```
130Tu: Crea un progetto Next.js 15 con App Router, TypeScript, Tailwind CSS e
131shadcn/ui. Inizializza anche un repository Git.
132```
133 
134Claude Code eseguirà automaticamente:
135 
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141 
142### Step 2: Configurare Supabase
143 
1441. Vai su [supabase.com](https://supabase.com) e crea un nuovo progetto.
1452. Prendi nota di **Project URL** e **anon key** dalla sezione Settings > API.
1463. Torna al terminale con Claude Code:
147 
148```
149Tu: Aggiungi Supabase al progetto. Crea un file .env.local con le variabili
150NEXT_PUBLIC_SUPABASE_URL e NEXT_PUBLIC_SUPABASE_ANON_KEY. Configura il client
151Supabase con SSR support per Next.js App Router.
152```
153 
154Claude Code creerà la configurazione completa:
155 
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159 
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167 
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172 
173export async function createClient() {
174  const cookieStore = await cookies();
175 
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194 
195## 4. Costruire la demo: un'app di task management
196 
197Costruiamo una demo concreta: un'**app di task management** con autenticazione, CRUD completo e interfaccia moderna.
198 
199### Definire lo schema del database
200 
201Dai istruzioni a Claude Code per creare lo schema:
202 
203```
204Tu: Crea una migrazione SQL per Supabase con le seguenti tabelle:
205 
2061. profiles: id (uuid, FK a auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   a profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK a projects), assigned_to (uuid, FK a profiles), due_date (timestamp),
213   created_at, updated_at
214 
215Abilita Row Level Security su tutte le tabelle e crea le policy appropriate.
216```
217 
218Claude Code genererà una migrazione completa:
219 
220```sql
221-- Crea i tipi enum
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224 
225-- Tabella profiles
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232 
233-- Tabella projects
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241 
242-- Tabella tasks
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255 
256-- Abilita RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260 
261-- Policy per profiles
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266 
267-- Policy per projects
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276 
277-- Policy per tasks
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295 
296Puoi eseguire questa migrazione direttamente dalla dashboard di Supabase (SQL Editor) o tramite la CLI.
297 
298### Generare i tipi TypeScript
299 
300```
301Tu: Genera i tipi TypeScript dal database Supabase e salvali in src/types/database.ts
302```
303 
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307 
308### Costruire l'interfaccia utente
309 
310Ora viene la parte più potente del vibecoding. Dai istruzioni di alto livello a Claude Code:
311 
312```
313Tu: Crea una pagina dashboard per l'app di task management con:
314 
3151. Sidebar con navigazione tra progetti
3162. Vista Kanban con 3 colonne (Todo, In Progress, Done) con drag & drop
3173. Modal per creare/modificare task
3184. Header con avatar utente e logout
3195. Design moderno con shadcn/ui e Tailwind
320 
321Usa i dati da Supabase con React Server Components dove possibile
322e Client Components solo dove serve interattività.
323```
324 
325Claude Code costruirà l'intera interfaccia, componente per componente.
326 
327### Aggiungere l'autenticazione
328 
329```
330Tu: Aggiungi un sistema di autenticazione completo con:
331 
3321. Pagina di login con email/password e login con GitHub
3332. Pagina di registrazione
3343. Middleware per proteggere le rotte autenticate
3354. Redirect automatico per utenti non autenticati
3365. Creazione automatica del profilo dopo la registrazione
337```
338 
339Claude Code configurerà il middleware di Next.js e le pagine di auth:
340 
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345 
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348 
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369 
370  const { data: { user } } = await supabase.auth.getUser();
371 
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377 
378  return supabaseResponse;
379}
380 
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385 
386## 5. Pattern avanzati di vibecoding
387 
388### Il prompting iterativo
389 
390Il segreto del vibecoding efficace è l'**iterazione**. Non cercare di descrivere tutto in un singolo prompt. Procedi per step:
391 
392```
393Step 1: "Crea il layout base con header e sidebar"
394Step 2: "Aggiungi la lista dei progetti nella sidebar con un bottone per crearne di nuovi"
395Step 3: "Crea la vista Kanban nella main area"
396Step 4: "Aggiungi il drag & drop tra le colonne"
397Step 5: "Implementa il modal per creare nuovi task"
398Step 6: "Aggiungi le notifiche toast per feedback all'utente"
399```
400 
401> **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.
402 
403### Gestione degli errori
404 
405Quando qualcosa non funziona (e succederà), puoi semplicemente dire:
406 
407```
408Tu: Ho questo errore nella console: "TypeError: Cannot read property 'map' of undefined"
409nel componente TaskList. Fixalo.
410```
411 
412Claude Code analizzerà il codice, identificherà il problema e lo risolverà.
413 
414### Refactoring con AI
415 
416```
417Tu: Il componente Dashboard è diventato troppo grande. Dividilo in componenti
418più piccoli e riutilizzabili, mantenendo la stessa funzionalità.
419```
420 
421### Testing
422 
423```
424Tu: Aggiungi test con Vitest per le utility functions e test con Playwright
425per il flusso di autenticazione e creazione task.
426```
427 
428## 6. Deploy su Vercel: dal codice al mondo
429 
430### Step 1: Pushare su GitHub
431 
432```
433Tu: Crea un .gitignore appropriato, committa tutto e pusha su un nuovo
434repository GitHub chiamato "my-demo-app".
435```
436 
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442 
443### Step 2: Connettere Vercel
444 
4451. Vai su [vercel.com](https://vercel.com) e clicca "Add New Project".
4462. Importa il repository GitHub appena creato.
4473. Aggiungi le variabili d'ambiente:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Clicca "Deploy".
451 
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Deploy Automatico]
456    C --> D[URL Pubblico]
457    D --> E[CDN Globale]
458```
459 
460### Step 3: Configurare il dominio (opzionale)
461 
462Vercel fornisce un URL gratuito tipo `my-demo-app.vercel.app`. Per un dominio personalizzato:
463 
464```
465Tu: Aggiungi la configurazione per un dominio personalizzato in vercel.json
466```
467 
468### Preview Deployments
469 
470Ogni 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.
471 
472## 7. Ottimizzazioni per la demo
473 
474### Performance
475 
476```
477Tu: Ottimizza le performance dell'app:
4781. Aggiungi loading states con Suspense e skeleton
4792. Implementa caching con unstable_cache di Next.js
4803. Ottimizza le immagini con next/image
4814. Aggiungi metadata SEO per ogni pagina
482```
483 
484### Realtime con Supabase
485 
486Una feature che impressiona sempre nelle demo è il **realtime**:
487 
488```
489Tu: Aggiungi sincronizzazione realtime per i task usando Supabase Realtime.
490Quando un utente aggiorna un task, tutti gli altri utenti devono vedere
491il cambiamento in tempo reale senza refresh.
492```
493 
494```typescript
495'use client';
496 
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500 
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504 
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533 
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538 
539  return tasks;
540}
541```
542 
543### Dark mode
544 
545```
546Tu: Aggiungi supporto dark mode con toggle nell'header.
547Usa le classi dark di Tailwind e salva la preferenza in localStorage.
548```
549 
550## 8. Best practice per il vibecoding efficace
551 
552### 1. Sii specifico nei prompt
553 
554```
555❌ "Fai una pagina bella"
556✅ "Crea una landing page con hero section con gradiente viola-blu, una sezione
557   features con 3 card con icone, e una CTA con bottone arancione"
558```
559 
560### 2. Dai contesto
561 
562```
563❌ "Aggiungi autenticazione"
564✅ "Aggiungi autenticazione con Supabase Auth. Il progetto usa Next.js 15 App
565   Router con TypeScript. Voglio login con email/password e OAuth con GitHub.
566   Usa il pattern SSR con @supabase/ssr"
567```
568 
569### 3. Itera in piccoli step
570 
571Non cercare di costruire tutto in un singolo prompt. Procedi per incrementi:
572 
5731. Layout base
5742. Una feature alla volta
5753. Styling e polish
5764. Gestione errori
5775. Testing
578 
579### 4. Rivedi il codice generato
580 
581Il vibecoding non significa non leggere il codice. Rivedi sempre:
582 
583- **Sicurezza**: RLS policies, validazione input, sanitizzazione dati.
584- **Performance**: query N+1, componenti inutilmente client-side.
585- **Best practice**: struttura del progetto, naming conventions.
586 
587### 5. Usa Git strategicamente
588 
589```
590Tu: Committa le modifiche con un messaggio descrittivo dopo ogni feature completata.
591```
592 
593Questo ti permette di tornare indietro se qualcosa va storto.
594 
595## 9. Costi: tutto davvero gratis?
596 
597Ecco un riepilogo dei costi per ciascun servizio:
598 
599| Servizio | Piano gratuito | Quando si paga |
600|----------|---------------|----------------|
601| **Claude Code** | Richiede un piano Anthropic (a partire da $20/mese) oppure API key | Subito, ma il valore è enorme |
602| **Supabase** | Generoso free tier (2 progetti, 500MB DB) | Oltre i limiti del free tier |
603| **Vercel** | Free tier per progetti personali | Per team o uso commerciale |
604| **GitHub** | Gratuito per repo pubblici e privati | Features enterprise |
605 
606> **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.
607 
608### Alternative gratuite per l'AI
609 
610Se vuoi mantenere il costo a zero assoluto, puoi usare:
611 
612- **Cursor** (free tier con limitazioni).
613- **GitHub Copilot** (gratuito per studenti e open source).
614- **Codeium/Windsurf** (tier gratuito generoso).
615 
616## 10. Dalla demo al prodotto: prossimi step
617 
618Una volta che la tua demo è live, ecco come procedere:
619 
620```mermaid
621flowchart TD
622    A[Demo Live] --> B{Feedback Utenti}
623    B --> C[Iterazione sul Prodotto]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Dominio Personalizzato]
629```
630 
6311. **Raccogli feedback**: condividi la demo con potenziali utenti e raccogli opinioni.
6322. **Itera velocemente**: usa il vibecoding per implementare le modifiche richieste.
6333. **Monitora le metriche**: Vercel Analytics e Supabase Dashboard ti danno dati essenziali.
6344. **Scala quando serve**: passa ai piani a pagamento solo quando hai validato la domanda.
635 
636 
637## Conclusione
638 
639Il 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.
640 
641La 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.
642 
643Il 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.
644 
645> **Checklist per la tua prima demo:**
646>
647> - [x] Claude Code installato e configurato
648> - [x] Progetto Supabase creato con schema database
649> - [x] Progetto Next.js inizializzato con shadcn/ui
650> - [x] Autenticazione configurata
651> - [x] CRUD completo implementato
652> - [x] UI moderna e responsive
653> - [x] Deploy su Vercel effettuato
654> - [x] URL condivisibile pronto per il feedback
655