Progetto personale · Web app PWA · Full-stack + AI Vedi il progetto live →
CustomTCG: una web app full-stack, dallo scanner AI ai pagamenti
Cos'è
Una web app installabile (PWA) per collezionisti di carte, con modello freemium, oggi live e in uso. L'ho progettata, costruita e messa online di persona, dall'architettura al deploy.
La sfida
Non un foglio o un sito vetrina, ma un prodotto completo da zero: front-end, back-end, database, autenticazione, integrazioni esterne, pagamenti e AI, il tutto veloce e usabile da telefono.
Cosa ho costruito
- Architettura full-stack: front-end React/Vite + logica e back-end su Supabase (edge functions).
- Autenticazione utenti: registrazione, login e gestione account.
- Database: modellazione e gestione dati su Supabase.
- Integrazione API esterna con sync automatico: i prezzi Cardmarket si aggiornano da soli ogni giorno tramite job schedulati (GitHub Actions), con caching per non sforare i limiti.
- Pagamenti e coupon: Stripe per gli abbonamenti, gestione codici promo e gating tra free e premium.
- Integrazione AI: assistente a più personaggi che guida l'utente.
- Computer vision: scanner delle carte da fotocamera con riconoscimento automatico.
- Design e UI: interfaccia curata di persona.
- Ottimizzazione e deploy: PWA installabile, veloce su mobile, in produzione su Netlify.
Stack & integrazioni
- React + Vite (PWA)
- Supabase (auth, DB, edge functions)
- Stripe
- Cardmarket API
- GitHub Actions (sync giornaliero)
- OpenAI
- Google Cloud Vision
- Netlify
Sfide tecniche risolte
- Sync prezzi affidabile senza sforare i limiti API (job giornaliero + caching).
- Gating premium pulito, senza rovinare l'esperienza gratuita.
- Scanner affidabile su carte reali (luce, angolazione, varianti).
- PWA leggera e installabile, usabile come app nativa.
Stato
Live su customtcg.califfo.dev.