Crea un negozio di illuminazione interattivo con l'IA (Supabase + Hostinger)

Claude Desktop

Claude Code gira al suo interno e personalizza il tuo negozio. Serve un piano Claude a pagamento.

Scarica Claude Desktop

https://claude.ai/download

Account GitHub

Gratuito. Qui vive la tua copia di LUMIÈRE, e Hostinger la distribuisce da qui.

Crea un account GitHub

https://github.com/signup

Hosting Hostinger

Il tuo negozio online gira qui. Scegli un piano nel Passaggio 2.

Non servono Node.js, un editor di codice o un terminale. Hostinger compila e gestisce il tuo negozio, e Claude fa le modifiche.

Guarda e copia LUMIÈRE

Prova prima il negozio finito: passa il mouse lungo il binario in ottone per accendere le lampade a sospensione, trascinale e clicca su una per aprire il suo dimmer. La demo non ha pannello admin né checkout.

Apri la demo dal vivo di LUMIÈRE

Il negozio finito, in esecuzione nel tuo browser.

https://lumiere-lighting-store.vercel.app/

Apri LUMIÈRE su GitHub

https://github.com/salhiworks/lumiere-lighting-store

Clicca su Use this template, poi su Create a new repository Dagli un nome e scegli Public o Private Clicca su Create repository

Controlla che sia la tua copia

L'indirizzo del repository inizia con github.com/ seguito dal tuo nome utente

Sotto il nome, GitHub indica che è stato generato da salhiworks/lumiere-lighting-store

D'ora in poi usi solo il tuo repository. Hostinger ne fa il deploy nel Passaggio 2 e Claude Desktop lo modifica nel Passaggio 3. Lo starter originale non viene mai toccato.

Ottieni un hosting Node.js

Prima pubblica, poi personalizza: in pochi minuti il tuo negozio è un vero sito web, e ogni modifica successiva si vede subito.

Scegli un piano Hostinger

Usa il piano Unlimited o un piano Cloud: LUMIÈRE viene distribuito come Node.js Web App, non come sito statico.

Importa il tuo repository

Hostinger Websites Create site Web App

Scegli un dominio temporaneo per iniziare: colleghi il tuo nel Passaggio 5 Seleziona Import Git Repository Autorizza GitHub e seleziona la tua copia di LUMIÈRE, quella che hai creato nel Passaggio 1, non lo starter originale

Configura ed esegui il deploy

Mantieni le impostazioni Next.js rilevate da Hostinger: compila e avvia il negozio da solo Scegli Node.js 22 Assicurati che lo script di build sia build, mai build:demo, che genera la demo bloccata

Prima di pubblicare, aggiungi l’indirizzo del tuo sito come variabile d’ambiente: l’indirizzo temporaneo che hai appena scelto. Non ti serve ancora il dominio definitivo — il Passaggio 5 lo sostituisce e ripubblica.

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Il tuo indirizzo temporaneo, che inizia con https://

È tutto ciò che serve al negozio. Supabase e Stripe sono entrambi facoltativi, quindi lasciali per dopo.

Clicca su Deploy e attendi che la build finisca Apri il tuo indirizzo temporaneo

Guarda il tuo negozio online

Il tuo indirizzo temporaneo apre il tuo negozio LUMIÈRE

Passando il mouse sul binario le lampade si accendono e tutte le foto si caricano

Il negozio e una pagina prodotto si aprono

Il tuo negozio è online. D'ora in poi, ogni modifica inviata al branch main del tuo repository viene ricompilata e pubblicata automaticamente da Hostinger.

Apri il tuo progetto in Claude Desktop

Claude Desktop Code Local

Avvia una sessione Local in una cartella come Documenti, aggiungi qui sotto l'indirizzo del tuo repository e invia:

Clona la tua copia

Scarica il tuo repository LUMIÈRE in una nuova sottocartella e verifica che Claude possa aggiornarlo.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

L'indirizzo del tuo repository

https://github.com/your-name/my-lighting-store

Apri la tua cartella LUMIÈRE

Avvia una nuova sessione Local Apri la cartella che Claude ha appena creato, quella che contiene README.md Se Claude Desktop lo chiede, considera attendibile la cartella

Claude modifica questa copia del tuo negozio e invia le modifiche al tuo repository GitHub. Poi Hostinger aggiorna il tuo sito online.

Descrivi il tuo negozio a Claude

Compila ciò che sai: lascia vuoto il resto e Claude mantiene la versione di LUMIÈRE. Poi invialo nella tua sessione LUMIÈRE:

Personalizza il mio negozio di illuminazione

Cambia nome, prodotti, testi e stile, e mantiene le animazioni delle lampade e le coppie di foto esattamente come sono.

This folder is my own copy of the LUMIÈRE lighting store. Before you change anything, read README.md, AGENTS.md, docs/ARCHITECTURE.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the store for my business. Store name: {{STORE_NAME}} What makes us different: {{STORE_STORY}} Visual identity: {{VISUAL_STYLE}} Products: {{PRODUCTS}} Photos: {{PHOTOS}} Where each change belongs: - Name, description and navigation: lib/site.ts and the wordmark in components/layout/wordmark.tsx - Products and collections: lib/catalog/demo-data.ts. Make the same changes in supabase/seed.sql, so a database I connect later starts with the same catalog. - Homepage and studio copy: components/home/ - Colours and fonts: app/globals.css and app/layout.tsx Keep these exactly as they are: - The Pendant Lamp Rail in components/ui/pendant-lamp-rail.tsx: brushing the rail to switch lamps on, dragging, the detail view with its dimmer, and every animation, timing and hit area - The paired photos: every product keeps one OFF and one ON photo of the same size, at /lamps/<product-id>-off.webp and /lamps/<product-id>-on.webp, following the rules in docs/ASSETS.md - The admin, checkout, Supabase migrations and environment variables - The dependencies: don't add new ones Prices are in cents, as the catalog already stores them ($240 = 24000). The store uses one currency, USD by default. First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server and don't push anything yet: I'll ask you to publish when I'm ready.

Nome del negozio

Atelier Nord

Cosa rende diverso il tuo studio di illuminazione?

Lampade a sospensione in ceramica e ottone in piccole serie, fatte a mano a Lisbona e spedite in tutta Europa.

Identità visiva

Le tue lampade, una per riga: nome, finitura, prezzo

Cupola in ceramica, Sabbia, $240 Cono in ottone, Spazzolato, $310

Foto delle lampade

Leggi il piano prima di approvarlo. Chiedi a Claude altre modifiche nella stessa sessione finché il negozio non ti rispecchia.

Usa le tue foto delle lampade

Sostituisci le foto demo prima di vendere

Le 16 foto demo delle lampade provengono dalla demo del componente originale e i loro diritti non sono verificati. Per un negozio reale, usa foto tue o di cui hai la licenza.

Ogni lampada ha bisogno di due foto: una spenta e una accesa. Il binario accende una lampada con una dissolvenza incrociata tra le due, quindi devono combaciare esattamente:

Stessa fotocamera, posizione e scala: cambia solo la luce

Sfondo trasparente, senza ombre incorporate

Il cavo parte dal bordo superiore, centrato

Verticale, con la stessa tela per ogni foto: la demo usa 557 × 900 px

Senza Supabase, metti ogni coppia in questa cartella del progetto, con il nome del prodotto — ad esempio dome-enamel-off.webp e dome-enamel-on.webp — poi chiedi a Claude di usarle e pubblicare. Con Supabase, invece, carichi le coppie nell'admin e lui le controlla per te.

public/lamps/

Pubblica le tue modifiche

Claude invia il tuo negozio personalizzato al tuo repository GitHub e Hostinger ricompila da lì il tuo sito online. Quando le modifiche ti vanno bene, invia:

Pubblica le mie modifiche

Controlla il negozio, poi fa il commit delle modifiche e le invia con push al branch main del tuo repository.

Publish my customized store. 1. Make sure npm run lint, npm run typecheck and npm run build all pass, and fix anything that fails. 2. Make sure .env.local and any other secrets are not committed. 3. Commit all my changes with a clear message and push them to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

Guarda le tue modifiche online

Aspetta qualche minuto che Hostinger ricompili il tuo negozio Ricarica il tuo indirizzo online Passa il mouse lungo il binario: ogni lampada si accende e il suo cavo tocca il binario Clicca su una lampada e muovi il suo dimmer: cambia solo la luce Apri il negozio e una pagina prodotto, e aggiungi una lampada al carrello

Dopo qualche minuto non è cambiato nulla? Apri Settings & Redeploy nella tua Web App e fai di nuovo il deploy. Qualcosa non torna? Descrivilo a Claude nella stessa sessione, chiedigli di sistemarlo senza toccare il binario di luci, poi pubblica di nuovo.

Vuoi vedere l'anteprima sul tuo computer? (Facoltativo)

Non sei obbligato. Se vuoi vedere le modifiche prima di pubblicarle, chiedi a Claude nella tua sessione: installa le dipendenze, avvia il server di sviluppo con npm run dev e dammi l'indirizzo locale. Serve Node.js 22 o più recente, e Claude ti avvisa se manca. Il tuo negozio online non dipende mai da questo.

Creare un progetto Supabase

Il tuo negozio online funziona già senza Supabase: passa al Passaggio 5 se ti basta. Collegalo per gestire prodotti, foto, scorte e ordini nel tuo admin su /admin.

Crea un account Supabase

https://supabase.link/r4gdwhi

Clicca su New project: va bene qualsiasi regione e il piano Free Conserva la password del database in un posto sicuro Quando il progetto è pronto, copia il suo Project ID

Supabase Project Settings General

Lascia che Claude raggiunga il tuo progetto

Così Claude può configurare il database per te. Nella tua sessione LUMIÈRE in Claude Desktop:

Apri Customize nella barra laterale, poi Connectors, e aggiungi Supabase — oppure clicca su + accanto alla casella del prompt e seleziona Add connectors Clicca su Connect e approva l'accesso nel browser, scegliendo l'organizzazione che contiene il tuo progetto Avvia una nuova sessione Local nella stessa cartella, così Claude rileva la connessione

Accedi tramite Supabase nel browser: nessuna chiave o password va in un prompt. La connessione può vedere tutti i progetti dell'organizzazione che approvi, quindi il prossimo prompt limita Claude al tuo progetto LUMIÈRE.

Non trovi il connettore Supabase o preferisci non usarlo? Salta il prossimo prompt e usa la configurazione manuale alla fine del Passaggio 4: gli stessi tre file SQL, senza connettore.

Chiedi a Claude di configurare il database

Configura LUMIÈRE su Supabase

Claude applica le migrazioni e i prodotti dello starter, controlla sicurezza e storage, poi ti dà i due valori pubblici per Hostinger.

Connect this LUMIÈRE store to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md ("Connect Supabase"), docs/SUPABASE.md and docs/ADMIN.md first, and follow them. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. How to reach Supabase: - Use the Supabase connection in this session if it is connected. - Otherwise, use the Supabase CLI if I'm signed in, with the commands in docs/SUPABASE.md. - If neither works, stop and tell me exactly what to do. Never ask me for a password, an access token or a Secret key. Tell me what each step does before you run it: 1. Apply supabase/migrations/20261101120000_catalog_and_admin.sql, then supabase/migrations/20261101150000_orders_checkout.sql, in that order. They create the tables, the Row Level Security policies and the lamp-photos storage bucket. 2. Run supabase/seed.sql to add the three collections and the eight pendants. 3. Verify the setup: Row Level Security is on for every table, the lamp-photos bucket exists, there are 8 products and 3 collections, and Supabase's security advisor shows no warnings. Fix nothing by hand: tell me what's wrong. 4. Read my Project URL and Publishable key from the project, and show them to me as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/ADMIN.md, check that the row exists, and tell me to sign in at /admin on my live store.

Il tuo Project ID di Supabase

abcdefghijklmnopqrst

Claude chiede prima di ogni azione: leggila, poi consentila. Si ferma quando tocca a te.

Crea il tuo account amministratore

Supabase Authentication Users

Clicca su Add user, poi su Create new user Inserisci la tua email e una password sicura Lascia selezionato Auto Confirm User e crea l'utente Comunica a Claude la tua email di amministratore, mai la password

Supabase Authentication Sign In / Providers

Disattiva Allow new users to sign up e salva: il negozio non ha account cliente

Nessuna connessione Supabase? Configura a mano

Nel tuo progetto Supabase, apri SQL Editor. Esegui questi tre file della tua cartella LUMIÈRE, in quest'ordine. Per ognuno, aprilo, copia tutto, incollalo in una nuova query e clicca su Run. Puoi eseguirli di nuovo senza rischi.

supabase/migrations/20261101120000_catalog_and_admin.sql

supabase/migrations/20261101150000_orders_checkout.sql

supabase/seed.sql

Copia la tua Project URL e la Publishable key da Connect in Hostinger, come mostrato nel prossimo passaggio. Dopo aver creato il tuo utente admin qui sopra, aggiungi la tua email qui sotto ed esegui questo nello SQL Editor:

Rendimi amministratore

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

La tua email di amministratore

you@example.com

Aggiungi le variabili Supabase su Hostinger

Il tuo negozio online legge Supabase tramite due valori pubblici. Nella dashboard della tua Web App, apri Environment Variables e aggiungi:

NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key di Supabase

Claude ti ha dato entrambi i valori. Li trovi anche in Connect.

Apri Connect

https://supabase.com/dashboard/project/_?showConnect=true

Solo valori pubblici

Non aggiungere mai qui la Secret key o la service_role key di Supabase. Tutto ciò che inizia con NEXT_PUBLIC_ è visibile nel browser.

Salva le variabili: Hostinger ricompila il tuo negozio con esse Non si è ricompilato? Rifai il deploy da Settings & Redeploy Apri /admin sul tuo indirizzo online e accedi con la tua email admin

Nel pannello admin aggiungi e modifichi prodotti, carichi coppie di foto OFF/ON e gestisci scorte e ordini. Ogni salvataggio aggiorna il binario, il negozio e le pagine prodotto.

Collega il tuo dominio

Hostinger Your Web App Connect domain

Inserisci il tuo dominio e segui i passaggi di connessione Dominio registrato altrove? Aggiungi presso il tuo registrar i record DNS mostrati da Hostinger Mantieni i record email esistenti Attendi che il dominio risulti collegato e che l'SSL sia attivo

Le modifiche DNS possono richiedere alcune ore per raggiungere tutti: fino a 24 ore.

Collega un dominio personalizzato al tuo sito web o alla tua Web App

La guida completa, inclusi i domini registrati altrove.

/video/connect-a-custom-domain-to-your-website-or-web-app

Passa al tuo dominio ed esegui di nuovo il deploy

Il tuo negozio genera i link, la sitemap e l'accesso sicuro al pannello admin a partire da questo unico indirizzo. Nella dashboard della tua Web App, apri Environment Variables e sostituiscilo con il tuo dominio:

NEXT_PUBLIC_SITE_URL

NEXT_PUBLIC_SITE_URL

Il tuo dominio, che inizia con https://

Salva la variabile Esegui di nuovo il deploy da Settings & Redeploy, così il nuovo indirizzo viene integrato Attendi la fine della build

Prova il tuo negozio online

Apri il tuo dominio e controlla:

L'indirizzo inizia con https:// e compare il lucchetto

Passando il mouse sul binario le lampade si accendono e tutte le foto si caricano

Il negozio e la pagina di un prodotto si aprono, e una lampada finisce nel carrello

Con Supabase: riesci ad accedere a /admin

Un indirizzo inventato, come /shop/no-such-lamp, mostra la pagina non trovata

Il tuo negozio di illuminazione è online sul tuo dominio. Per cambiarlo in seguito, modifica i prodotti nell'admin, oppure chiedi a Claude le modifiche al codice e di pubblicarle: Hostinger ricompila il tuo negozio a ogni push su main.