Dietro le quinte di Peddy: Architettura, Sicurezza e Performance in React Native


Ciao a tutti! Oggi voglio parlarvi di un progetto su cui ho lavorato intensamente negli ultimi mesi e che ho sviluppato interamente da sola: Peddy – Il Diario della Crescita.

L’app ha appena raggiunto la versione 1.3 ed è già valutata con 5.0 stelle sul Google Play Store. Peddy è un’applicazione mobile pensata per permettere ai genitori di monitorare la crescita, le vaccinazioni e i bilanci di salute dei propri figli in modo intuitivo.

Tuttavia, sotto una UI che ho cercato di rendere il più pulita possibile, c’è un’infrastruttura tecnica solida, nata per rispondere a una sfida ben precisa: gestire dati medici sensibili in modo efficiente e super sicuro. Ecco come ho strutturato il tutto.

Lo Stack Tecnologico: React Native, Expo e TypeScript

L’intera codebase è stata scritta utilizzando Expo e React Native, rigorosamente tipizzata in TypeScript in modalità strict. Per l’architettura frontend ho adottato:

  • Expo Router per la navigazione.
  • React Context API combinata a hook personalizzati per la gestione dello stato globale.
  • react-native-chart-kit e react-native-svg per renderizzare visivamente le curve di crescita e i percentili OMS.
  • Un design system centralizzato (gestito tramite il file theme/appTheme.ts) che mi ha permesso di evitare valori hardcoded e mantenere la UI sempre coerente.

Privacy by Design (Conformità al GDPR Art. 9)

La priorità assoluta di Peddy è la sicurezza.

Ho implementato un approccio “local-first”: i dati sensibili (profili, visite, anamnesi e tappe motorie) vengono salvati sul dispositivo dell’utente tramite react-native-encrypted-storage. Questa libreria garantisce una crittografia AES-256 appoggiandosi direttamente ai moduli nativi del sistema operativo, ovvero il Keystore su Android. L’app non condivide alcun dato con terze parti.

Il Backend Serverless: Firebase e Cloud Sync Ottimizzata

Per gli utenti Premium, ho implementato una funzionalità di sincronizzazione cloud sicura e backup multi-dispositivo. Qui è dove risiede l’architettura di backend, interamente affidata a Firebase:

  • Authentication: Accesso tramite Email/Password e Google OAuth 2.0.
  • Firestore Database: I dati sul server godono di crittografia AES-256 (at-rest) e sono protetti da rigide Security Rules che permettono a ciascun utente di accedere esclusivamente al proprio nodo.
  • Cloud Functions & Notifiche: Le notifiche push per i richiami vaccinali e le visite operano tramite FCM (Firebase Cloud Messaging). Vengono attivate tramite un job CRON giornaliero programmato per le 09:00, elaborato da funzioni distribuite nella region europe-west1 per abbattere la latenza.

La vera sfida: ottimizzare le chiamate a Firestore. Invece di adottare un classico e dispendioso sistema di polling, ho ingegnerizzato la logica nel ProfileContext con un pattern di “sync on change” associato a un debouncing di 3 secondi. I risultati in termini di performance sono stati incredibili:

  • Riduzione di circa il 90% delle chiamate a Firestore, limitando notevolmente i costi operativi.
  • Latenza della sincronizzazione abbattuta del 99,5%: da una media di 600 secondi a soli 3 secondi per vedere un aggiornamento su un altro dispositivo.
  • Nessun processo in background permanente, il che si traduce in un importante risparmio di batteria per l’utente.

Testing e Build

La logica applicativa è coperta da una suite di 32 test unitari sviluppati con Jest e @testing-library/react-native, con un focus particolare sulle funzioni crittografiche (StorageService) e di validazione form. In fase di prebuild nativa, sfrutto ProGuard per minimizzare e offuscare il codice. Il risultato è un pacchetto (APK Android) pronto per la produzione del peso di soli ~37 MB.

Se siete sviluppatori o genitori curiosi, vi lascio il link per saperne di più:

Scopri Peddy sul mio sito dedicato

Scarica l’app dal Google Play Store

Sarei felice di leggere i vostri feedback nei commenti!