Fino a qualche anno fa, creare un’applicazione significava conoscere linguaggi di programmazione, framework, database, deployment e decine di altri concetti tecnici.

Oggi non è più necessariamente così.

Grazie al Vibe Coding è possibile descrivere un’idea in linguaggio naturale e lasciare che l’intelligenza artificiale generi gran parte del codice necessario.

In questo articolo vedremo come creare e pubblicare una vera applicazione web utilizzando:

• GitHub per gestire il codice
• Claude Code per sviluppare l’applicazione
• Vercel per pubblicarla online
• Clerk per autenticazione e login
• Supabase per database e backend

L’obiettivo? Passare da un’idea a un’app online in poche ore.

Indice

Step 1 – Creare un account e repository GitHub

GitHub è il luogo dove verrà conservato tutto il codice del progetto.

Se non possiedi un account:

• registrati su GitHub
• crea una nuova repository e chiamala con il nome che vuoi.

Clonala in locale come indicato a questa guida. Sarà necessario installare Git Bash e un code editor (es. Visual Studio Code), se non hai mai sviluppato un’applicazione.

Step 2 – Creare la base del progetto

All’interno della cartella in locale crea un file Project.md.

Questo file contiene le istruzioni principali per Claude.

All’interno del file inserisci il prompt per l’applicazione che vuoi generare.

Descrivi quali sono le funzionalità principali, qual è lo scopo dell’app e lo stack tecnologico che vuoi utilizzare. Se non sei tecnico, lascia che sia l’AI a consigliarti sullo stack da usare.

Esempio:

Crea un’app chiamata XXX. 
L’app serve a ... 
Funzionalità: 
1. Descrizione della funzionalità 1 dell'app..
2. Descrizione della funzionalità 2 dell'app..
3. Descrizione della funzionalità 3 dell'app..
4. Descrizione della funzionalità 4 dell'app..
Stack tecnico: 
Code
-Next.js
-TypeScript
UI
- Tailwind CSS
- shadcn/ui
Database
- Supabase
Authentication
- Clerk
Hosting
- Vercel
Stile UI: 
- minimal 
- moderna 
- mobile first 
- stile pulito

Step 3 – Installare Claude Code

Claude Code è uno strumento che permette di sviluppare software direttamente dal terminale utilizzando il linguaggio naturale.

Scarica l’app di Claude e installala. Sarà necessario sottoscrivere un abbonamento Pro per utilizzare Claude Code. I prezzi, al momento della scrittura di questo articolo sono di 22 euro al mese o 220 euro all’anno.

Step 4 – Configurare Supabase

Ora serve un database.

Vai su Supabase e effettua il login con Github.

Crea un nuovo progetto.

Annotati la SUPABASE_URL e la SUPABASE_KEY.

Step 5 – Collegare Claude ai server MCP

Uno degli aspetti più interessanti del Vibe Coding è l’utilizzo dei server MCP.

MCP (Model Context Protocol) permette all’intelligenza artificiale di interagire con strumenti esterni.

Nel nostro caso collegheremo:

• GitHub MCP
• Supabase MCP
• Clerk MCP
• Vercel MCP

In questo modo Claude potrà creare tabelle nel database, effettuare deploy e modifiche senza dover copiare manualmente istruzioni da una piattaforma all’altra.

Per aggiungere i tuoi MCP, clicca su Connettori>Gestisci connettori su una sessione di Claude Code:

GitHub MCP:

Clicca collega su Integrazione Github e segui la procedura indicata:

Aggiungi anche il Github plugin dalla sezione Plugin:

Supabase MCP: clicca + e autorizza il collegamento a Claude.

Clerk MCP: esegui lo stesso passaggio anche per questo connettore.

Vercel MCP: esegui lo stesso passaggio anche per questo connettore.

Step 6 – Configurare Clerk

Clerk gestirà login e registrazione. Vai sul sito e registrati con Github.

Crea un’applicazione e scegli i mezzi con cui gli utenti si potranno autenticare. Vedrai la preview sulla destra:

Annotati le chiavi di clerk (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY) o in alternativa il comando da lanciare direttamente in Claude.

Step 7 – Creare il file .env.local

Qui inserisci tutte le variabili d’ambiente del progetto.

Ad esempio:

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

È buona pratica aggiungere il file .env.local al .gitignore, così le chiavi non verranno caricate su GitHub.

Step 8 – Chiedere a Claude di generare l’app

Ora arriva la parte divertente.

Apri Claude Code e scrivi qualcosa come:

Questo è l'url del mio progetto github: XXX.
Leggi PROJECT.md.
Genera l'intera applicazione.
Configura autenticazione con Clerk.
Configura database Supabase.
Crea schema database.
Prepara il progetto per il deploy su Vercel.

A questo punto Claude inizierà a creare:

• cartelle
• componenti
• pagine
• API
• schema database
• configurazioni

proprio come farebbe uno sviluppatore.

Se scegli come modalità di Claude ‘Piano’, questo ti sottoporrà la sua pianificazione di attività prima di agire.

Se scegli modalità ‘Auto’ prenderà le decisioni in autonomia.

Step 9 – Testing e iterazione

Prima di pubblicare testa quello che hai creato.

Se riscontri problemi o qualcosa non ti convince, puoi chiedere a Claude di intervenire.

Puoi anche usare Claude come tester, uno dei grandi vantaggi del Vibe Coding.

Step 10- Pubblicare con Vercel

Ora è il momento di mettere l’app online.

Se non l’hai già fatto collega il repository GitHub a Vercel.

Importa il progetto.

Configura le variabili d’ambiente:

CLERK_SECRET_KEY
CLERK_PUBLISHABLE_KEY
SUPABASE_URL
SUPABASE_ANON_KEY

Premi Deploy.

Dopo pochi minuti avrai un URL pubblico, ma puoi scegliere comunque che il tuo progetto rimanga privato.

Step 11 – Fai revisionare la tua applicazione prima di pubblicarla

Se sei arrivato fino a questo punto, probabilmente hai tra le mani una prima versione funzionante della tua applicazione. Prima di renderla disponibile al pubblico, però, ti consiglio di dedicare del tempo a una revisione finale.

Anche se strumenti come Claude Code permettono di sviluppare molto velocemente, è buona norma verificare alcuni aspetti fondamentali, come:

• la sicurezza dell’applicazione;
• la gestione dell’autenticazione e delle autorizzazioni;
• la struttura del database;
• le performance;
• la qualità e la manutenibilità del codice;
• l’esperienza utente e il flusso di navigazione.

Una revisione effettuata da uno sviluppatore esperto può aiutarti a individuare problemi che difficilmente emergono durante i test iniziali e a evitare inconvenienti una volta che l’app sarà utilizzata da utenti reali.

Se desideri un supporto professionale per una code review, effettuare modifiche complesse o vuoi semplicemente un confronto sul progetto, puoi contattare il tuo consulente qui: Angelo Falci.

Se nel primo contatto indicherai il codice LANZU25, potrai usufruire di uno sconto del 25% per la prima settimana di servizio.