L'espansione di FuelBuddy negli Emirati Arabi Uniti richiedeva un'applicazione per franchisee dedicata, calibrata sui requisiti operativi regionali. Ho costruito la Dubai Franchise Application da zero, sia sul frontend sia sulle API dati.
Cosa ho costruito
- Frontend greenfield: costruzione del sistema di componenti e della struttura applicativa da zero, per un'interfaccia pulita e responsiva per le operazioni di franchising.
- API Hasura GraphQL: costruzione del livello dati di backend sul motore Hasura GraphQL, definendo le operazioni CRUD e i modelli dati richiesti dall'applicazione.
- Mappe, pianificazione ed esportazioni: integrazione di mappe in tempo reale, una vista di pianificazione calendario/Gantt e l'esportazione in foglio di calcolo/PDF per la reportistica dei franchisee.
- Autenticazione e sicurezza: configurazione dell'autenticazione basata su Firebase con controllo degli accessi basato sui ruoli, applicato tramite i claim JWT nativi di Hasura.
Perché è stato importante
Fornire una piattaforma dedicata ha dato agli operatori franchisee di FuelBuddy negli Emirati Arabi Uniti uno strumento costruito su misura per le operazioni regionali, su uno stack pensato per dati di mappa in tempo reale e reportistica pesante.
Il livello dati
Questa app recupera i dati tramite graphql-request contro un SDK tipizzato e generato via codegen, con gli store Pinia che mantengono lo stato del client, senza alcun TanStack Query nell'albero delle dipendenze. L'autenticazione gira su Firebase, e il controllo degli accessi basato sui ruoli proviene dai claim JWT personalizzati nativi di Hasura (x-hasura-default-role, x-hasura-user-id) invece di un sistema di permessi costruito separatamente.
Più di un semplice form builder
Questa è un'app genuinamente ricca di funzionalità per quello che avrebbe potuto essere un sottile strumento CRUD: Mapbox GL insieme a mapbox-gl-draw per disegnare e modificare le zone di franchising direttamente sulla mappa, FullCalendar abbinato a vue-ganttastic per la pianificazione in stile Gantt, Chart.js per le dashboard di reportistica, e una pipeline di esportazione completa (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image) in modo che i report dei franchisee escano dall'app come fogli di calcolo, PDF o immagini a seconda di ciò di cui l'operatore ha bisogno, non in un formato fisso.
Codegen, non query scritte a mano
Le operazioni GraphQL vengono generate al momento della build tramite vite-plugin-graphql-codegen contro codegen.yml, producendo un client src/sdk.ts tipizzato a partire dallo schema Hasura. Ogni query e mutation è tipizzata rispetto allo schema live invece che scritta a mano come stringa, con il rischio di disallineamento silenzioso quando il backend cambia.
Focus dei test
Playwright copre due flussi end to end: login e gestione ordini, il cancello dietro cui si trova ogni altra schermata e la transazione centrale per cui l'app esiste. Tutto ciò che sta a valle di questi due flussi (pianificazione, esportazioni, reportistica) è superficie applicativa più recente dei test, non una svista.
Stack
Vue 3, Vite, Pinia, graphql-request con GraphQL Code Generator contro Hasura, Firebase per l'autenticazione, Mapbox GL con mapbox-gl-draw, FullCalendar con vue-ganttastic, Chart.js per la reportistica, Playwright per i test.