MB.
Tutti i lavori

FantaF1

Web App · React · Formula 1 · Fantasy League · Predictions · Live Standings · PWA

FantaF1
FantaF1 è una web app/PWA dedicata a una fantasy league privata sulla Formula 1 2026. Il progetto permette a un gruppo ristretto di partecipanti di inviare pronostici prima di ogni weekend di gara, seguire l’andamento della stagione, consultare risultati, classifiche live, storico, highlights e analytics avanzate, trasformando un gioco tra appassionati in una piattaforma digitale completa e strutturata. L’app è progettata intorno al weekend di gara. Ogni round della stagione può includere gate differenti, come Qualifiche, Sprint e Gara. I giocatori inviano i propri pronostici prima del lock, mentre l’admin può gestire risultati, pronostici ricevuti offline, utenti, ruoli e weekend. Dopo l’inserimento dei risultati reali, FantaF1 calcola automaticamente i punteggi e aggiorna le classifiche della lega. La dashboard offre una vista completa sul campionato: calendario stagione, strip interattiva dei weekend, prossimo GP, countdown alla sessione successiva, Weekend Pulse, classifiche live, pronostici dei giocatori, regole di scoring e sezioni di approfondimento. Il Weekend Pulse mostra lo stato della sessione corrente, come prove libere, Sprint Quali, Sprint, Qualifiche o Gara, con countdown e progresso visivo. Una parte importante del progetto è la trasparenza verso i giocatori. Dopo il lock, la sezione “Pronostici dei giocatori” mostra chi ha pronosticato cosa, con fallback dedicato per chi non ha comunicato i pronostici. Le classifiche reali permettono di consultare risultati per weekend, per gate e cumulativi stagionali, mentre lo storico raccoglie i weekend conclusi e gli highlights valorizzano i momenti chiave della stagione. FantaF1 include anche una sezione analytics pensata per leggere l’andamento dei partecipanti nel tempo: medie, trend, gap dal leader e KPI per giocatore. L’obiettivo non è solo calcolare punti, ma rendere visibile l’evoluzione della lega e creare un’esperienza più coinvolgente per chi segue la Formula 1 durante tutta la stagione. La console admin consente di gestire i risultati per ogni gate, inserire manualmente pronostici ricevuti offline, bloccare i pronostici al momento corretto, amministrare utenti e ruoli e mantenere aggiornata la configurazione dei weekend. Le mutation admin sono protette lato server e non si fidano mai del solo client. Dal punto di vista UX, FantaF1 ha un’identità dark-mode-first ispirata al branding Formula 1: rosso F1, accenti oro, font racing custom, card glassmorphism, animazioni premium e layout mobile-first. La dashboard usa uno sfondo dinamico legato al GP selezionato, con crossfade al cambio circuito e overlay calibrato per mantenere leggibilità senza perdere l’impatto visuale. Il progetto include tema chiaro e scuro, preferenza salvata in locale, script anti-flash prima del primo paint, meta theme-color dinamico, sidebar desktop, header mobile, PWA installabile e un pulsante “torna in cima” personalizzato a forma di monoposto F1. Ogni dettaglio visuale è pensato per rendere l’esperienza coerente con il mondo racing. L’architettura tecnica è basata su TanStack Start, React 19, TypeScript, TanStack Router, TanStack Query e server functions. Il backend usa database PostgreSQL con Row Level Security, autenticazione tramite email e Google OAuth, ruoli gestiti in tabella dedicata e funzioni server protette per le operazioni admin. Il deploy è edge-oriented e l’app è progettata come PWA installabile su desktop, iOS e Android. FantaF1 rappresenta un progetto completo nel dominio sport/fantasy: unisce logiche di gioco, regole di scoring, dashboard realtime, admin console, dati persistenti, sicurezza, UI premium, PWA e una forte identità di prodotto. È uno dei progetti più riconoscibili del portfolio perché combina passione personale per la Formula 1, sviluppo full stack, cura UX e gestione di un caso d’uso reale.
Anno
2026
Stack
ReactTypeScriptTanStack StartTanStack RouterTanStack QueryViteTailwind CSSshadcn/uiRadix UISupabasePostgreSQLRLSCloudflare WorkersReact Hook FormZoddate-fnsPWA