GIFTY — il regalo giusto, scelto per te

Il nome del sito si cambia in un solo punto, src/config/sito.ts; il logo (la volpe rossa) è in src/components/Illustrazioni.tsx e src/app/icon.svg.

Sito che sceglie il regalo al posto tuo. Descrivi il destinatario (relazione, età, occasione, budget, gusti, cosa non gli piace) e un motore AI propone 4 idee regalo concrete, con i link per cercarle su Amazon e Google Shopping nel paese di consegna.

• Multilingua: italiano e inglese (/it, /en), lingua dedotta dal browser.
• Paesi di consegna: Italia, Regno Unito, Germania, Francia, Spagna, Stati Uniti.
• Funziona come un'app di incontri, ma per i regali: dopo il modulo un quiz di domande da scorrere (sì / no) e qualche domanda aperta, poi le idee una alla volta (destra = mi piace, sinistra = scarta) e i Preferiti con i link per comprarle.
• Ogni generazione viene registrata in forma anonima per migliorare il motore.

La pagina principale (/) è Gifty (public/gifty.html), un gioco: 3 domande base (per chi, occasione, budget), il nome (resta sul telefono), poi due round di domande goliardiche da scorrere scritte dall'AI ("Lucrezia comprerebbe mai il tofu?": destra = sì, sinistra = no, su = non so) con una domanda aperta in mezzo, il Conosciometro (quanto conosci la persona, con ritratto e titoli da condividere) e infine le idee regalo con foto vere (Pexels) da scorrere (su = perfetto). L'AI passa dal nostro server (/api/ai): la chiave non arriva mai al browser. Senza chiave, o se l'AI non risponde, la pagina passa da sola in modalità demo con domande e idee di esempio. La versione precedente del sito (modulo + quiz) resta su /it e /en.

Scopo, fasi, struttura del database e decisioni tecniche sono in PROGETTO.md.

---

Indice

1. Cosa serve
2. Ottenere le chiavi
3. Creare le tabelle su Supabase
4. Avviare il sito sul tuo computer
5. Pubblicare su Vercel
6. Modifiche frequenti
7. Dove finiscono i dati
8. Importare il CSV degli scenari di test
9. Problemi comuni

---

1. Cosa serve

• Node.js 22 o più recente: https://nodejs.org (scegli la versione "LTS").
• Un account GitHub con il repository del progetto.
• Un account Anthropic (motore AI), Supabase (database) e Vercel (pubblicazione). Supabase e Vercel hanno un piano gratuito sufficiente per iniziare.

2. Ottenere le chiavi

Tutte le chiavi vanno nelle variabili d'ambiente (mai nel codice). L'elenco completo, con spiegazioni, è nel file .env.example.

Chiave Anthropic (ANTHROPIC_API_KEY)

1. Vai su https://platform.claude.com e accedi (o crea un account).
2. Aggiungi un metodo di pagamento o del credito nella sezione di fatturazione (Billing).
3. Apri API Keys → Create Key, dai un nome (es. "sito regali") e copia la chiave (inizia con sk-ant-). Viene mostrata una sola volta.
4. Consigliato: nella sezione dei limiti imposta un tetto di spesa mensile, come rete di sicurezza.

Costo indicativo: con claude-sonnet-5-5 una generazione costa circa 2–4 centesimi di dollaro (il costo esatto stimato di ognuna viene salvato nel database, colonna costo_stimato_usd).

Database Supabase (DATABASE_URL)

1. Vai su https://supabase.com → New project.
2. Scegli un nome, una password del database (salvala!) e una regione in Europa (es. Frankfurt), consigliata per il GDPR.
3. Quando il progetto è pronto, premi il pulsante Connect in alto.
4. Nella scheda delle stringhe di connessione scegli Transaction pooler (porta 6543) e copia la stringa, che ha questa forma:

   postgresql://postgres.abcdefghijkl:[YOUR-PASSWORD]@aws-0-eu-central-1.pooler.supabase.com:6543/postgres
   

5. Sostituisci [YOUR-PASSWORD] con la password del database: questa è la tua DATABASE_URL.

Usa proprio il Transaction pooler: la connessione "diretta" non funziona da Vercel. Se hai dimenticato la password: Project Settings → Database → Reset database password.

Tag di affiliazione Amazon (facoltativi)

Se partecipi al Programma di Affiliazione Amazon, ogni marketplace ha il suo tag (es. mionegozio-21): impostalo nella variabile corrispondente (AMAZON_TAG_IT, AMAZON_TAG_UK, AMAZON_TAG_DE, AMAZON_TAG_FR, AMAZON_TAG_ES, AMAZON_TAG_US). Quando un tag è presente, i link Amazon di quel paese lo includono e sotto le idee compare l'avviso di affiliazione richiesto da Amazon. Senza tag i link funzionano normalmente.

Verifica nelle regole del programma di ogni marketplace il testo esatto dell'avviso richiesto (i testi si cambiano in messages/it.json e messages/en.json, chiave idee.affiliazione).

3. Creare le tabelle su Supabase

1. Nel progetto Supabase apri SQL Editor → New query.
2. Apri il file supabase/fase1.sql, copia tutto il contenuto e incollalo.
3. Premi Run. Deve comparire "Success".
4. In Table Editor ora vedi le tabelle generazioni, idee, limiti_richieste e la vista riepilogo_giorni.

Il file si può rieseguire senza rischi: crea solo ciò che manca e non cancella dati. Le tabelle hanno la Row Level Security attiva e nessuna regola: l'API pubblica di Supabase non può leggerle; il sito vi accede solo dal server con la DATABASE_URL.

4. Avviare il sito sul tuo computer

# 1. Scarica il progetto e installa le dipendenze
git clone <indirizzo-del-repository>
cd sito-regali
npm install

# 2. Crea il file con le chiavi e compilalo
cp .env.example .env.local
#    apri .env.local e inserisci almeno ANTHROPIC_API_KEY e DATABASE_URL

# 3. Avvia
npm run dev

Apri http://localhost:3000: c'è Gifty. La versione precedente del sito è su /it e /en.

This is the beginning of the README. Read the rest at the original. Read the full README ↗