L'app cliente di FuelBuddy è nata come Progressive Web App. Funzionava su Android, ma su iOS incontrava limiti della piattaforma: vincoli del motore WebKit, installazione sulla home screen inaffidabile, storage limitato e capacità di notifiche push mancanti. Per FuelBuddy questo significava che la PWA non poteva servire in modo affidabile gli utenti iOS, ed era necessaria un'app nativa per garantire un'esperienza mobile stabile. Ho fatto parte del team di ingegneria che ha riscritto l'app in React Native.
Su cosa ho lavorato
- Da PWA a React Native: riscrittura dell'app come applicazione React Native compilata, raggiungendo il 100% di parità funzionale su 14 flussi utente in 8 settimane e garantendo una sensazione nativa coerente sia su iOS sia su Android.
- Lavoro trasversale sullo stack: focus sul frontend mobile, costruendo al contempo le API CRUD necessarie direttamente sul motore Hasura GraphQL, in modo che lo sviluppo delle funzionalità non fosse mai bloccato da dipendenze di backend.
- Rilascio in team: collaborazione stretta con frontend engineer e product manager per tradurre i requisiti in funzionalità testate e mantenere i cicli di rilascio in produzione secondo i tempi previsti.
Perché è stato importante
La migrazione a React Native ha stabilito un'unica codebase affidabile su iOS e Android. Il rilascio di 14 flussi utente con parità completa in 8 settimane ha permesso a FuelBuddy di servire l'intera base utenti mobile senza mantenere implementazioni separate per piattaforma.
Team e responsabilità
Sono stato uno degli ingegneri di questa riscrittura, lavorando insieme a frontend engineer e product manager per raggiungere la parità completa su tutti i 14 flussi nella finestra di 8 settimane fissata dal team per la migrazione.
Il livello GraphQL
Le API CRUD girano su Hasura, consumate tramite urql invece di Apollo, con GraphQL Codegen che genera operazioni tipizzate, 73 file .graphql distinti che coprono la vera superficie applicativa. Lo stato locale gira su Zustand, con MMKV come store chiave-valore veloce alle sue spalle, e Zod che valida i dati ai confini del sistema.
Localizzazione e pagamenti, non solo CRUD
Il tracciamento delle consegne si appoggia a react-native-maps, un servizio di geolocalizzazione dedicato e Turf.js per il calcolo geospaziale vero e proprio (distanze, bounding box, calcoli di instradamento), non solo un marcatore su una mappa. I pagamenti passano attraverso due gateway indipendenti: Easebuzz, integrato come pacchetto locale vendorizzato invece che come dipendenza da registry, e Axis Bank, la cui API richiede che ogni richiesta sia firmata con AES-256-CBC (chiave derivata via PBKDF2) e HMAC-SHA512, realizzato in un modulo nativo Android scritto a mano (NdpsAESLibrary, collegato a JS tramite NativeModules) invece che con una libreria crittografica JS, poiché il requisito di firma di un gateway di pagamento non è qualcosa che il livello RN può soddisfare in modo generico. Firebase copre sia l'autenticazione sia l'analytics.
Report, non solo una tabella
Il flusso di reportistica visualizza i dati di consegna e di business come grafici tramite Victory Native, per poi esportare gli stessi dati in CSV: codificati con json2csv, scritti su disco tramite la Scoped Storage API di Android (react-native-scoped-storage, richiesta da Android 10+ da quando le app hanno perso l'accesso diretto al filesystem) e condivisi tramite lo share sheet nativo.
Modello dati e scala
- 13-14 container di flusso distinti (indirizzo, asset, business, consegna, home, localizzazione, ordine, ritiro, report, impostazioni, supporto, utente, wallet) organizzano la navigazione dell'app, coerentemente con la cifra di "14 flussi utente".
- Un modulo nativo Android dedicato gestisce la firma delle richieste a livello bancario; tutto il resto dell'app resta in JS/TypeScript sopra il bridge di React Native.
Stack
React Native, urql con GraphQL Code Generator, Zustand per lo stato, MMKV per lo storage, Zod per la validazione, react-native-maps, Turf.js per i calcoli geospaziali, Easebuzz e Axis Bank per i pagamenti (quest'ultimo dietro un modulo nativo di firma AES/HMAC personalizzato), Victory Native per i grafici di reportistica, Firebase per autenticazione e analytics, su Hasura GraphQL.