Crea un negozio online da zero con Coderblock

Cosa realizzerai

In questo tutorial creerai un negozio online responsive e completo, partendo da una semplice descrizione in chat.

Alla fine avrai:

• un catalogo con pagine di dettaglio dei prodotti
• ricerca, categorie e disponibilità
• un carrello
• account cliente e storico ordini protetto
• checkout Stripe in modalità di test
• un'area amministrativa per gestire prodotti e ordini
• un vero database Postgres con Row Level Security
• una versione pubblicata in produzione con SSL

Coderblock genera il frontend con React, Vite, TypeScript e Tailwind CSS, insieme al backend e al database. Tu gestisci il progetto attraverso una conversazione in linguaggio naturale, senza dover configurare manualmente route, migrazioni del database o webhook per i pagamenti.

---

1. Avvia un nuovo progetto per il tuo store

Apri Coderblock e crea un nuovo progetto. Puoi partire dal template dedicato ai negozi online oppure, se vuoi costruire lo store da zero, iniziare semplicemente descrivendo ciò che vuoi realizzare.

Ad esempio:

Crea un moderno negozio online di accessori sostenibili per la casa. Realizza una homepage responsive, un catalogo prodotti, filtri per categoria, pagine di dettaglio dei prodotti, un carrello, account cliente, checkout con Stripe, storico ordini e un'area di amministrazione per gestire prodotti e ordini. Usa una palette di colori neutri e caldi e rendi l'interfaccia accessibile sia da desktop sia da mobile.

Più informazioni dai all’agente sul tipo di prodotti, sullo stile che cerchi, sulle pagine importanti e sulle funzionalità necessarie, più la prima versione sarà vicina a ciò che hai in mente. Coderblock creerà frontend, backend e database e mostrerà il risultato nell’anteprima di sviluppo live, disponibile all’indirizzo .coderblock.dev del progetto. Puoi tenere aperte chat e anteprima contemporaneamente e vedere come cambia lo store mentre lavori.

---

2. Controlla e perfeziona lo store

Ora è il momento di esplorare quello che hai creato. Prova la navigazione, la homepage, il catalogo, le pagine prodotto e il carrello. Controlla il risultato sia su desktop sia sugli schermi più piccoli dei dispositivi mobili.

Il primo risultato è solo un punto di partenza. Puoi continuare a modificarlo direttamente dalla chat con richieste mirate.

Ad esempio:

• “Rendi l'header fisso e mantieni visibile il numero di articoli nel carrello.”
• “Mostra i prodotti in una griglia a quattro colonne su desktop e a una colonna su mobile.”
• “Aggiungi filtri per categoria, prezzo e disponibilità.”
• “Aggiungi uno stato per il carrello vuoto con un link per tornare al catalogo.”
• “Mostra i prodotti correlati sotto la descrizione di ogni prodotto.”
• “Aggiungi stati di caricamento, errore e nessun risultato.”

Le modifiche vengono mostrate nell’anteprima live in pochi secondi. Un buon approccio è procedere per piccoli blocchi: fai una o due richieste correlate alla volta, controlla il risultato e poi continua con la modifica successiva.

---

3. Crea il modello dati di prodotti e ordini

Una volta definita la struttura dello store, puoi chiedere all’agente di creare il modello dati necessario. Ad esempio:

Crea tabelle del database per prodotti, categorie, ordini e articoli degli ordini. Ogni prodotto deve avere nome, descrizione, prezzo, SKU, quantità disponibile, categoria, immagine, stato attivo e timestamp. Gli ordini devono essere associati ai clienti autenticati e includere stato del pagamento, stato di evasione, totale e righe dell'ordine.

Ogni applicazione web utilizza un progetto Supabase dedicato con Postgres. Coderblock progetta lo schema ed esegue le migrazioni necessarie. Puoi controllare il risultato direttamente dalla scheda Backend, dove trovi tabelle, utenti autenticati, storage e funzioni. A questo punto puoi anche aggiungere alcuni prodotti di esempio:

Aggiungi otto prodotti di esempio suddivisi in tre categorie, così posso testare lo store. Fai in modo che sia semplice sostituirli in seguito dall'area di amministrazione.

Se i tuoi prodotti hanno esigenze particolari, dichiarale subito. Puoi specificare, per esempio, la presenza di più immagini, taglie, colori o altre varianti. Puoi anche chiedere all’agente di utilizzare Supabase Storage per le immagini caricate e collegarle ai relativi prodotti.

---

4. Aggiungi autenticazione e sicurezza per i clienti

Ora puoi creare gli account cliente e proteggere le informazioni personali e gli ordini. Chiedi a Coderblock:

Aggiungi registrazione e accesso per i clienti, proteggi le pagine dell'account e dello storico ordini e assicurati che ogni cliente possa visualizzare solo i propri ordini. Aggiungi i ruoli amministratore e cliente.

L’agente configura Supabase Auth, comprese le pagine di registrazione e accesso, la gestione delle sessioni, le route protette e le policy del database. Ogni applicazione include già una tabella dei profili e una struttura di base per i ruoli. Coderblock applica inoltre la Row Level Security di Postgres collegata all’utente autenticato. In questo modo, ogni cliente può accedere esclusivamente ai propri dati, mentre gli amministratori possono ricevere i permessi necessari per gestire prodotti e ordini.

Non dovrai creare una tabella personalizzata per le password né scrivere manualmente codice per JWT o hashing delle password. Se vuoi aggiungere anche il social login, puoi chiedere:

Aggiungi l'accesso tramite social insieme all'autenticazione con email e password.

A questo punto verifica il comportamento usando account separati per cliente e amministratore. Assicurati che un cliente non possa aprire le pagine amministrative né visualizzare gli ordini di un altro cliente.

---

5. Crea il carrello e il checkout

Prima di configurare i pagamenti, assicurati che il carrello funzioni come previsto. Verifica che i clienti possano:

• aggiungere prodotti
• modificare le quantità
• rimuovere articoli
• visualizzare i totali aggiornati

Quando il carrello è pronto, puoi chiedere all’agente di aggiungere Stripe:

Consenti ai clienti di pagare il carrello con Stripe. Inizia in modalità di test, crea i prodotti e i prezzi necessari, salva gli ordini completati e mostra pagine chiare per il pagamento riuscito e quello annullato.

Per impostazione predefinita, Coderblock può creare un account Stripe gestito per il progetto. L’agente ti farà alcune semplici domande, ad esempio il Paese e il nome dell’attività. Non dovrai fornire chiavi API: Coderblock gestisce il webhook dei pagamenti e ti fornirà un link ospitato da Stripe per completare successivamente la configurazione dei pagamenti e la verifica dell’identità. Se preferisci utilizzare il tuo account Stripe, puoi richiedere l’opzione BYOK. L’agente ti chiederà STRIPE_SECRET_KEY tramite una richiesta sicura per le variabili d’ambiente. Il valore viene conservato nell’archivio dei segreti lato server del progetto e non viene inserito nel codice generato o nella normale chat. Il webhook viene registrato automaticamente. Inizia sempre dalla modalità di test.

Effettua alcuni acquisti di prova e verifica che i pagamenti riusciti creino correttamente gli ordini e le relative righe. Prova anche un pagamento annullato e uno non riuscito. Passa ai pagamenti reali solo quando l’intero flusso funziona come previsto.

---

6. Aggiungi l'area di amministrazione

Uno store ha bisogno anche di uno spazio dedicato a chi lo gestisce. Puoi chiedere all’agente:

Crea un pannello di amministrazione protetto in cui gli amministratori possano aggiungere, modificare, attivare e disattivare i prodotti, caricare immagini, aggiornare l'inventario, controllare gli ordini e modificarne lo stato di evasione. Includi schede riepilogative per ordini e ricavi.

Controlla ogni azione direttamente nell’anteprima. Verifica, per esempio, che una modifica a un prodotto venga immediatamente riflessa nello store e che un normale cliente non possa accedere alla dashboard amministrativa. Puoi anche aggiungere controlli per evitare errori:

Impedisci l'inserimento di prezzi e quantità negative, rendi obbligatori il nome e lo SKU del prodotto e chiedi conferma prima di disattivare un prodotto.

Puoi richiedere allo stesso modo stati vuoti chiari, messaggi di errore e finestre di conferma prima delle azioni distruttive.

---

7. Prova l'intero percorso di acquisto

Prima di pubblicare lo store, attraversa l’intero processo come farebbe un cliente.

1. Sfoglia e filtra i prodotti.
2. Apri la pagina di un prodotto.
3. Aggiungi articoli al carrello e modifica le quantità.
4. Crea un account o accedi.
5. Completa un pagamento di test con Stripe.
6. Apri la pagina dello storico ordini.
7. Accedi come amministratore e controlla l'ordine.
8. Aggiorna il suo stato di evasione.

Non fermarti al percorso ideale. Controlla anche lo store da mobile, prova cosa succede quando un prodotto non è disponibile e verifica che gli stati vuoti e i messaggi di errore siano comprensibili. Se trovi qualcosa che non funziona, non serve intervenire manualmente sul codice. Descrivi in chat ciò che vedi e il comportamento che vuoi ottenere.

---

8. Pubblica e collega un dominio

Quando hai completato tutti i test, puoi pubblicare lo store. Fai clic su Pubblica e Coderblock distribuirà l’applicazione in produzione su un indirizzo .coderblock.app, con SSL incluso. Le pubblicazioni successive possono essere effettuate tramite rapidi hot update.

Se vuoi utilizzare un dominio personalizzato, apri Impostazioni → Domini. Puoi collegare un dominio che possiedi già seguendo la procedura guidata per i record DNS oppure acquistarne uno direttamente in Coderblock tramite il checkout integrato. In quest’ultimo caso, DNS e SSL vengono configurati automaticamente. Prima di promuovere pubblicamente lo store, completa l’onboarding di Stripe e passa dalla modalità di test ai pagamenti reali. Fai anche un ultimo ordine reale e verifica che il relativo record venga registrato correttamente nel database.

Il tuo store è online

A questo punto hai trasformato una semplice descrizione in un vero negozio online full stack, con catalogo, account, carrello, pagamenti, database e area amministrativa. E soprattutto, il lavoro non finisce con la pubblicazione: puoi continuare a migliorare lo store attraverso la stessa chat, aggiungendo nuove funzionalità e perfezionando quelle esistenti senza interrompere il tuo flusso di lavoro.