Dentro l’architettura delle anteprime istantanee Fly.io di Coderblock

Una buona anteprima di sviluppo non dovrebbe limitarsi a mostrare come potrebbe apparire un’app. Dovrebbe permetterti di usarla davvero mentre la realizzi: navigare tra le pagine, creare un account, salvare dati, caricare file, elaborare pagamenti e testare la logica backend.

È esattamente ciò che fa l’anteprima istantanea di Coderblock.

Dopo aver descritto un’applicazione, oppure aver scelto uno dei template disponibili, il progetto diventa accessibile a un indirizzo dedicato. Grazie all’hot reload, ogni modifica successiva appare nell’anteprima in pochi secondi.

Dal punto di vista dell’utente, il processo è semplice: descrivi una funzionalità e guardala prendere forma. Dietro questa semplicità, però, c’è un’architettura che coordina codice frontend, servizi backend, autenticazione, database, storage, segreti e deployment dell’anteprima.

La chat è l’interfaccia di controllo

Con Coderblock, la chat diventa il punto di partenza dell’intero processo di sviluppo. Non devi iniziare configurando infrastruttura, repository o servizi frontend e backend separati. Descrivi in linguaggio naturale ciò che vuoi realizzare e l’agente trasforma la tua idea in un’applicazione funzionante.

Per esempio:

• “Crea una piattaforma di prenotazione per un centro fitness.”
• “Aggiungi il login e consenti agli iscritti di vedere solo le proprie prenotazioni.”
• “Crea una vista amministrativa con una tabella delle prenotazioni.”
• “Permetti ai clienti di pagare 9,99 € al mese.”
• “Rendi fissa la barra di navigazione sui dispositivi mobili.”

Una singola richiesta può quindi produrre modifiche su più livelli dello stack. Il frontend generato utilizza React, Vite, TypeScript e Tailwind CSS. Per una normale applicazione web, il backend viene eseguito su un progetto Supabase dedicato con Postgres, Supabase Auth, Storage e Deno Edge Functions.

Questo significa che l’anteprima non è una semplice rappresentazione visiva del prompt. È una vera applicazione full-stack. Un modulo può scrivere dati su Postgres. Una pagina protetta può utilizzare la sessione dell’utente autenticato. Un caricamento può salvare file nello Storage. La logica backend può essere eseguita tramite Edge Functions.

Per i progetti Enterprise Web Platform, Coderblock utilizza invece un backend Python e FastAPI con Neon Postgres. Il principio resta lo stesso: descrivi il comportamento desiderato, lascia che l’agente lo implementi e verifica subito il risultato nell’anteprima.

---

Dalla richiesta all’anteprima con l’hot reload

Il ciclo di sviluppo può essere suddiviso in cinque passaggi.

1. Descrivi ciò che vuoi realizzare

La richiesta può riguardare un singolo dettaglio dell’interfaccia oppure una funzionalità che coinvolge l’intero sistema. “Cambia il colore del pulsante” è soprattutto una modifica visiva. “Aggiungi account per team con spazi di lavoro privati” è molto diverso: può richiedere modifiche all’interfaccia, all’autenticazione, al database, ai permessi e alla logica dell’applicazione.

Con Coderblock, non devi trasformare la richiesta in un elenco di route, migrazioni, gestori di sessione e criteri di accesso. Descrivi il risultato che vuoi ottenere. L’agente si occupa dei dettagli necessari per realizzarlo.

2. L’app viene aggiornata end-to-end

Quando una funzionalità lo richiede, l’AI apporta modifiche coordinate ai diversi livelli dell’applicazione.

Se servono dati persistenti, può progettare ed eseguire la relativa migrazione dello schema Postgres. Se è necessaria l’autenticazione, può collegare l’interfaccia a Supabase Auth e applicare criteri di Row Level Security basati sull’utente corrente.

Ogni app include inoltre una tabella dei profili e una struttura di base per la gestione dei ruoli. In questo modo, l’agente dispone di fondamenta coerenti per creare funzionalità come dashboard personali, aree private e viste amministrative, senza dover reinventare ogni volta il sistema di autenticazione.

3. Il backend resta parte dell’app

Un’anteprima veloce è davvero utile solo se tutto ciò che si trova dietro l’interfaccia continua a funzionare. Per questo Coderblock mantiene l’app collegata al database, all’autenticazione, allo storage e alle funzioni backend. Dalla scheda Backend puoi visualizzare le tabelle del progetto, gli utenti autenticati, lo storage e le funzioni disponibili.

Il vantaggio è che ogni iterazione si basa su quella precedente.

Aggiungere una tabella non significa creare una simulazione temporanea, ma modificare il modello dati dell’app. La richiesta successiva potrà quindi sfruttare la stessa struttura per aggiungere filtri, dashboard, relazioni o permessi.

4. L’anteprima si aggiorna in tempo reale

Il progetto viene distribuito al suo indirizzo di anteprima dedicato, <app>.coderblock.dev. Quando l’app cambia, l’hot reload distribuisce rapidamente gli aggiornamenti e li rende visibili nell’ambiente in esecuzione.

Il punto non è soltanto la velocità, ma la continuità durante l’intero processo.

Non devi creare una nuova demo per ogni iterazione né passare continuamente da un ambiente all’altro. Puoi muoverti senza interruzioni tra chat, anteprima e backend, lavorando sempre sulla stessa applicazione.

Il livello di anteprima Fly.io fa parte di questo processo di deployment, ma l’esperienza rimane semplice: ogni progetto dispone di un ambiente di sviluppo accessibile, gli aggiornamenti vengono distribuiti rapidamente e l’anteprima resta collegata ai servizi full-stack dell’app.

Non devi configurare server di anteprima o pipeline di deployment prima di testare ciò che hai appena realizzato.

5. Testa, correggi, continua

È qui che entra in gioco il vero valore dell’anteprima. Puoi navigare nell’app, verificarne il comportamento responsive, creare account, inviare moduli, controllare i permessi e testare le funzionalità associate ai diversi ruoli.

Se qualcosa non funziona come previsto, non devi tornare al codice per capire cosa modificare. Puoi semplicemente descrivere la correzione successiva.

Descrivi → genera → visualizza l’anteprima → testa → perfeziona

È proprio per questo che la velocità di Coderblock non deriva soltanto dalla generazione del codice. L’intero processo di sviluppo rimane all’interno dello stesso flusso di lavoro.

I segreti restano fuori dal codice

Un ambiente di sviluppo veloce non dovrebbe mai richiedere compromessi sulla sicurezza.

Quando un’integrazione richiede un segreto, Coderblock lo gestisce tramite una richiesta dedicata per le variabili d’ambiente. Il valore viene conservato nell’archivio dei segreti lato server del progetto, senza essere inserito nel codice generato o nella normale conversazione.

Stripe è un ottimo esempio di questo approccio.

Nella modalità gestita predefinita, l’agente raccoglie le informazioni necessarie, come il Paese e il nome dell’attività, e crea un account Stripe gestito per il progetto. Non devi occuparti direttamente delle chiavi API e Coderblock gestisce anche la configurazione dei webhook.

La configurazione dei pagamenti e la verifica KYC possono quindi essere completate tramite il link di onboarding ospitato da Stripe.

In modalità BYOK, l’agente richiede in modo sicuro STRIPE_SECRET_KEY, la conserva lato server e configura automaticamente il webhook. In entrambi i casi, Coderblock può creare i prodotti e i prezzi Stripe necessari, configurare il checkout e collegare i vari componenti all’applicazione. Puoi eseguire test prima di abilitare i pagamenti reali.

Anteprima e produzione sono due cose diverse

L’anteprima serve per creare e sperimentare. La produzione serve per pubblicare. Sono due fasi distinte e Coderblock le mantiene separate.

Quando l’app è pronta, puoi selezionare Publish per distribuirla su <app>.coderblock.app. SSL è incluso e le versioni successive utilizzano rapidi aggiornamenti hot.

In questo modo, una modifica sperimentale apportata tramite chat non diventa automaticamente una release di produzione. Puoi anche collegare un dominio personalizzato da Settings → Domains, seguendo le istruzioni per configurare i record DNS. In alternativa, puoi acquistare il dominio direttamente tramite Coderblock: in questo caso, DNS e SSL vengono configurati automaticamente.

Il risultato è un percorso chiaro:

Chat → Anteprima → Test → Pubblicazione

La chat guida lo sviluppo, l’anteprima permette di vedere e testare il risultato, il backend assicura che l’app sia realmente funzionante e la pubblicazione porta online la versione approvata.

Un’architettura progettata per l’iterazione

Il vero valore di un sistema di anteprima istantanea non risiede in un singolo componente dell’infrastruttura. Risiede nella capacità dell’intero sistema di tenere il passo con il processo creativo. Con Coderblock, frontend, database, autenticazione, storage, funzioni, segreti e ambiente di anteprima fanno tutti parte dello stesso flusso di lavoro. Puoi iniziare con una frase, ottenere un’app full-stack funzionante, testarla immediatamente e continuare a modificarla attraverso la conversazione.

Senza configurare manualmente i server. Senza passare continuamente da uno strumento all’altro. Senza trasformare ogni modifica in un nuovo deployment.

L’infrastruttura rimane in gran parte invisibile. Puoi concentrarti su ciò che conta: creare, testare e iterare.