← Tutte le idee Strumenti online

SnapSplit

Fotografi lo scontrino e il conto si divide da solo

Cosa fa

Dopo una cena tra amici si fotografa lo scontrino: l'app legge le voci, ognuno segna cosa ha preso e l'app calcola quanto deve pagare ciascuno.

Come guadagna

Il progetto è presentato in vetrina su SideProjectors; come guadagna non è indicato pubblicamente.

Rendilo tuo

  • Link da mandare nel gruppo WhatsApp: ognuno apre e spunta i suoi piatti, senza scaricare niente.
  • Per le spese di viaggio di gruppo, non solo per la cena: chi deve quanto a chi alla fine della vacanza.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Paghi Tu?": dopo una cena tra amici si fotografa lo scontrino: l'app legge le voci, ognuno tocca cosa ha preso (anche a metà), e l'app calcola quanto deve ciascuno, mancia e coperto compresi. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: fotografa lo scontrino
2. Voci lette con prezzi modificabili
3. Assegnazione: tocca il tuo nome sulle voci, voci condivise divise in parti
4. Riepilogo: quanto deve ciascuno, con i link per pagare
5. Storico delle serate

Stile: allegro da serata: sfondo bianco, verde #22C55E, arancio #F97316, un colore per ogni amico, carattere "Nunito", voci dello scontrino come righe da toccare. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "serate": scontrino letto in JSON, partecipanti, assegnazioni, totale, collegate all'utente

Regole di sicurezza obbligatorie:
- ogni utente vede solo le sue serate
- la foto dello scontrino non si conserva dopo la lettura
- i crediti non si modificano dal browser

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Leggere lo scontrino

Si fotografa lo scontrino; la Edge Function "scontrino" (un credito) lo mostra a Claude, che restituisce in JSON le voci con quantità e prezzo, il coperto e il totale stampato. Il sito controlla che la somma delle voci corrisponda al totale: se non torna, evidenzia la differenza e chiede di correggere.

Si scrivono i nomi degli amici (o si scelgono dai gruppi salvati). Su ogni voce si toccano i nomi di chi l'ha presa: una pizza toccata da 2 persone si divide a metà. Il coperto si divide tra tutti; la mancia (percentuale o importo) in proporzione a quanto ha preso ognuno.

La foto non viene conservata: si salvano solo le voci.

4. Riepilogo e pagamenti

Il riepilogo mostra quanto deve ciascuno, con i centesimi distribuiti in modo che la somma dia esattamente il totale (codice nei Dettagli tecnici). Pulsante per condividere il riepilogo su WhatsApp e, per chi ha pagato, il proprio link di pagamento (es. il link PayPal.me o i dati per il bonifico istantaneo).

Storico delle serate e gruppi di amici salvati.

5. Pagamenti con Stripe

Aggiungi pacchetti di crediti: 10 scontrini a 1,99 €, 50 scontrini a 4,99 €. Ogni nuovo utente riceve 3 crediti gratis. Ogni scontrino letto costa un credito; la divisione a mano è gratis. Mostra sempre in alto quanti crediti restano e, quando finiscono, un riquadro per comprarne altri.

A pagamento riuscito il webhook aggiunge i crediti del pacchetto con la funzione aggiungi_crediti.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Centesimi: dividi 100 € tra 3 persone con voci uguali: i totali devono essere 33,34 + 33,33 + 33,33, che sommati danno esattamente 100 €.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Dividere il conto al centesimo

Divide ogni voce tra chi l'ha presa, il coperto tra tutti e la mancia in proporzione, lavorando in centesimi. I centesimi avanzati vanno a chi ha la parte decimale più grande (metodo del resto più grande).

type Voce = { nome: string; centesimi: number; di: string[] };   // di = chi l'ha presa

export function dividi(voci: Voce[], persone: string[], copertoTotale: number, manciaPercento: number) {
  const quota = new Map(persone.map((p) => [p, 0]));             // in centesimi, con decimali
  for (const v of voci) for (const p of v.di) quota.set(p, quota.get(p)! + v.centesimi / v.di.length);

  const consumato = [...quota.values()].reduce((a, b) => a + b, 0);
  for (const p of persone) {
    const parte = quota.get(p)!;
    quota.set(p, parte + copertoTotale / persone.length + (parte * manciaPercento) / 100);
  }

  // Totale esatto da raggiungere
  const totale = Math.round(consumato + copertoTotale + (consumato * manciaPercento) / 100);
  const arrotondate = persone.map((p) => ({ p, intero: Math.floor(quota.get(p)!), resto: quota.get(p)! % 1 }));
  let mancanti = totale - arrotondate.reduce((s, x) => s + x.intero, 0);
  for (const x of [...arrotondate].sort((a, b) => b.resto - a.resto)) {
    if (mancanti-- <= 0) break;
    x.intero += 1;                                               // il centesimo a chi è più vicino
  }
  return Object.fromEntries(arrotondate.map((x) => [x.p, x.intero]));   // centesimi per persona
}

Istruzioni per l'AI: scontrino

Le istruzioni fisse che la Edge Function "scontrino" dà a Claude, che risponde in JSON. Il resto della funzione (accesso, crediti, rimborso se l'AI rifiuta) è uguale per tutti i progetti: è nella guida "Chiamare l'AI dal server".

Leggi lo scontrino di un ristorante o bar nella foto. Elenca le voci consumate con quantità e prezzo totale della riga in centesimi; il coperto a parte; il totale stampato. Ignora IVA, metodo di pagamento e righe di servizio. Se una riga non è leggibile, mettila con "leggibile": false. Rispondi solo con JSON: {"voci": [{"nome", "quantita", "centesimi", "leggibile"}], "coperto_centesimi", "totale_centesimi"}.

Pezzi comuni a tutti i progetti

Glossario

JSONB
Un tipo di colonna che contiene dati strutturati flessibili, come un piccolo documento.
Metodo del resto più grande
Un modo giusto di distribuire i centesimi che avanzano negli arrotondamenti, dandoli a chi ci è più vicino.