App collezione di energy drink

Scansioni ogni lattina di energy drink e la aggiungi alla collezione

Incasso mensile: 41 USD (fonte indicata nella scheda)

Cosa fa

App per iPhone che trasforma ogni energy drink scansionato in un pezzo da collezione, con rarità, classifiche e squadre, e tiene il conto della caffeina. Venduta per circa 1.000 $.

Come guadagna

Incasso annuo dichiarato di circa 490 $ nell'annuncio di vendita su Microns, che verifica i dati. Il nome del progetto non è pubblico.

Rendilo tuo

La stessa idea per birre artigianali, vini, caffè: collezionare i prodotti assaggiati.
Con un po' di gioco (rarità, classifiche) anche un'app semplice diventa coinvolgente.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Lattinario": trasforma ogni lattina di bibita scansionata (energy drink, bibite rare, edizioni limitate) in un pezzo da collezione, con rarità e classifiche, e tiene il conto della caffeina della giornata. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con l'album di esempio e il prezzo
2. Registrazione con conferma della maggiore età
3. Scanner del codice a barre con la fotocamera
4. Album della collezione per marca e rarità
5. Caffeina di oggi e classifica tra amici

Stile: energico e da collezione: sfondo nero #09090B, verde elettrico #84CC16, viola #A855F7 per le rare, oro per le leggendarie, carattere "Bungee" per i titoli e "Inter" per i testi. 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:
- "lattine": codice a barre, marca, nome, gusto, caffeina in mg, edizione limitata, rarità
- "collezione": lattine scansionate dall'utente con data e quante volte
- "proposte": nuove lattine segnalate dagli utenti, da approvare

Regole di sicurezza obbligatorie:
- il catalogo delle lattine è pubblico, lo modificano solo gli amministratori
- ogni utente vede solo la sua collezione; la classifica mostra solo nome e punti
- il piano non si modifica 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. Scansione e collezione

Lo scanner usa la fotocamera e legge il codice a barre (codice nei Dettagli tecnici, con la funzione BarcodeDetector del browser e una libreria di riserva per Safari). Se la lattina è nel catalogo, appare la carta con animazione e rarità; se no, l'utente la propone con foto, nome e caffeina, e un amministratore la approva.

Album della collezione per marca, con le lattine mancanti in grigio, percentuale di completamento e punti (comune 10, rara 50, leggendaria 200).

Il conto della caffeina somma le lattine "bevute oggi" e avvisa in arancione sopra i 200 mg e in rosso oltre i 400 mg al giorno (soglia indicata dall'EFSA per gli adulti), con il consiglio di non esagerare. App riservata ai maggiorenni.

4. Classifiche e scambi

Classifica tra amici con codice d'invito e classifica generale per punti. Sfide del mese ("Trova 3 edizioni limitate").

Pagina "Doppie": le lattine che l'utente ha più volte, per organizzare scambi tra collezionisti tramite messaggi interni.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca album illimitati, statistiche della caffeina e la pagina degli scambi.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

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. Caffeina: scansiona 5 lattine da 160 mg in un giorno: devono comparire l'avviso arancione e poi quello rosso.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Leggere il codice a barre con la fotocamera

Usa il lettore di codici a barre integrato nel browser dove c'è (Chrome, Android), e la libreria ZXing come riserva (Safari).

import { BrowserMultiFormatReader } from "@zxing/browser";

export async function leggiCodice(video: HTMLVideoElement): Promise<string> {
  // 1. Lettore integrato nel browser (veloce, senza librerie)
  if ("BarcodeDetector" in window) {
    const lettore = new (window as any).BarcodeDetector({ formats: ["ean_13", "ean_8", "upc_a"] });
    const flusso = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
    video.srcObject = flusso;
    await video.play();
    try {
      while (true) {
        const trovati = await lettore.detect(video);
        if (trovati.length) return trovati[0].rawValue as string;
        await new Promise((ok) => setTimeout(ok, 200));
      }
    } finally {
      flusso.getTracks().forEach((t) => t.stop());
    }
  }

  // 2. Riserva: libreria ZXing
  const zxing = new BrowserMultiFormatReader();
  const risultato = await zxing.decodeOnceFromVideoDevice(undefined, video);
  return risultato.getText();
}

Catalogo, collezione e caffeina di oggi

Il catalogo pubblico, la collezione dell'utente e la somma della caffeina bevuta oggi.

create table lattine (
  codice text primary key,               -- codice a barre EAN
  marca text not null,
  nome text not null,
  caffeina_mg int not null default 0,
  rarita text not null default 'comune' check (rarita in ('comune', 'rara', 'leggendaria'))
);
alter table lattine enable row level security;
create policy "catalogo pubblico" on lattine for select using (true);

create table scansioni (
  id bigint generated always as identity primary key,
  utente_id uuid not null references auth.users(id) on delete cascade,
  codice text not null references lattine(codice),
  bevuta boolean not null default false,
  scansionata_il timestamptz not null default now()
);
alter table scansioni enable row level security;
create policy "le mie righe" on scansioni
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

-- Caffeina bevuta oggi
select coalesce(sum(l.caffeina_mg), 0) as mg_oggi
from scansioni s join lattine l on l.codice = s.codice
where s.utente_id = auth.uid() and s.bevuta and s.scansionata_il >= date_trunc('day', now());

Pezzi comuni a tutti i progetti

Glossario

EAN: Il codice a barre stampato sui prodotti in vendita, uguale in tutti i negozi.