Betstatus è un’applicazione mobile multipiattaforma progettata per offrire agli utenti un modo semplice, veloce e moderno per gestire le proprie schedine di scommesse calcistiche. Partendo da una versione legacy ormai obsoleta, abbiamo realizzato un completo refactoring dell’interfaccia e dell’architettura tecnica, con l’obiettivo di costruire un prodotto performante, accessibile e in linea con gli standard attuali di usabilità mobile. L’app è disponibile su Android e iOS con un’unica codebase React Native.

Panoramica

Caratteristiche Principali

• Gestione completa delle schedine e dello storico delle scommesse
• Visualizzazione delle partite live, concluse e programmate
• Sistema di notifiche push configurabile
• Modalità chiara e scura per un’esperienza visiva ottimale
• Personalizzazione delle leghe seguite e delle preferenze di gioco

Obiettivi & Requisiti

L’obiettivo principale del progetto era trasformare un'app datata e con una UX poco chiara in un’esperienza mobile moderna, veloce e stabile. Era essenziale non solo aggiornare l’interfaccia grafica, ma anche ridefinire tutta l’infrastruttura backend, migliorare le performance, introdurre funzionalità moderne come le notifiche push e l’autenticazione multi-provider, e garantire una gestione fluida delle schedine anche durante eventi ad alto traffico.

Processo

Il processo ha previsto una prima fase di analisi della versione precedente per individuare le criticità in termini di performance, UX e struttura dati. Abbiamo quindi ridefinito i flussi di navigazione, riscritto completamente il backend, e implementato un’app React Native partendo da zero. Ogni nuova funzionalità è stata testata con feedback da parte degli utenti beta, per assicurare usabilità e stabilità. Le scelte architetturali sono state fatte con l’obiettivo di favorire la scalabilità, la manutenzione e il miglioramento continuo del prodotto.

Tecnologie Utilizzate

• Frontend mobile: React Native, NativeWind, React Hook Form, React Navigation, Tanstack Query, React Native Reanimated
• Backend: Fastify, Prisma, tRPC, Superjson, MongoDB, Firebase Admin SDK
• Altre integrazioni: Apple/Google/Facebook login, Firebase Auth, Notifiche push, Puppeteer, Yup
• Testing: Maestro (e2e), Vitest (integrazione backend)

Funzionalità

Dashboard Principale

La schermata principale dell’app offre una panoramica chiara e ordinata delle schedine attive, in programma e concluse. Ogni schedina è presentata con un riepilogo visivo intuitivo dello stato delle partite, dei pronostici inseriti e degli esiti già ottenuti. Il design modulare consente agli utenti di accedere velocemente ai dettagli che li interessano, mantenendo una perfetta leggibilità anche su dispositivi di piccole dimensioni.

Prossime Partite

Il calendario delle partite future consente di visualizzare rapidamente tutti gli eventi sportivi in programma, con la possibilità di filtrare per leghe preferite, data, stato e popolarità. Questa sezione è pensata per aiutare l’utente a pianificare le proprie schedine in modo efficace, grazie a un’interfaccia fluida e reattiva anche in presenza di molti dati.

Scelta delle Scommesse

Nella schermata di selezione scommesse, l’utente può comporre la propria schedina scegliendo tra decine di mercati disponibili per ogni match. Le categorie sono suddivise in maniera chiara e ordinata, con indicazioni visive per quota, probabilità e andamento. L’interazione è ottimizzata per minimizzare i passaggi necessari e rendere l’inserimento dei pronostici rapido e fluido.

Dettaglio Schedina

Questa schermata presenta un’analisi approfondita di ogni schedina, comprensiva degli esiti di ogni partita, delle performance complessive dell’utente, dell’andamento storico delle vincite e delle perdite. Il layout è stato studiato per offrire la massima chiarezza anche a chi consulta frequentemente lo storico delle scommesse.

Gestione Leghe Preferite

L’app consente agli utenti di configurare le leghe preferite, personalizzando le notifiche, il monitoraggio dei match e le partite visualizzate nel calendario. Questo sistema rende l’esperienza altamente personalizzabile, focalizzandosi sugli interessi reali di ciascun utente e migliorando il livello di coinvolgimento.

Caratteristiche software

API typesafe con tRPC

L’adozione di tRPC ha permesso l’implementazione di un sistema di comunicazione frontend-backend completamente type-safe, evitando errori di tipizzazione e migliorando la coerenza del codice. Grazie a Superjson, è stato possibile serializzare e deserializzare strutture dati complesse in modo trasparente.

Performance mobile ottimizzate

Le performance sono state ottimizzate tramite tecniche di virtualizzazione dei dati, caricamento lazy delle schermate secondarie e gestione dello stato asincrona con Tanstack Query. L’interfaccia mantiene una risposta fluida anche in condizioni di rete scarsa o con molti elementi da renderizzare.

Sicurezza dei dati e autenticazione

L’autenticazione avviene tramite Firebase e supporta Apple, Google e Facebook login, oltre alla modalità email/password. Le informazioni sensibili sono protette grazie all’uso di react-native-encrypted-storage, mentre i dati utente vengono validati tramite Yup e i token sono gestiti in modo sicuro con JWT.

Gestione notifiche push

Il backend integra Firebase Cloud Messaging per l’invio di notifiche push personalizzate. Ogni utente può scegliere quali eventi seguire e ricevere aggiornamenti in tempo reale sull’andamento delle schedine o l’inizio delle partite preferite.

Testing e qualità del codice

Per garantire stabilità e assenza di regressioni, l’app è testata con Maestro per gli end-to-end e Vitest per i test di integrazione del backend. Il processo di CI/CD prevede anche verifiche automatiche e deploy progressivi per limitare i rischi in fase di rilascio.