L'espansione di FuelBuddy nel mercato B2B degli Emirati Arabi Uniti richiedeva un portale web dedicato. I clienti aziendali avevano bisogno di gestione della flotta, ordini all'ingrosso e pianificazione delle consegne multi-sede, non dei flussi pensati per il consumatore retail. Ho costruito questo portale dal repository iniziale fino alla produzione, occupandomi sia dell'architettura frontend sia delle API dati di backend.
Cosa ho costruito
- Architettura frontend: impostazione dell'applicazione da zero, inclusa l'architettura dei componenti, il routing lato client e un design system coerente per i flussi di lavoro aziendali.
- Flussi B2B: costruzione di moduli d'ordine multi-step, flussi di pianificazione per rifornimenti di carburante all'ingrosso e dashboard di flotta dense di dati con viste a grafico e tabella per lo storico ordini e wallet.
- Pagamenti e onboarding: integrazione di Stripe per le ricariche wallet e i pagamenti degli ordini, e registrazione tramite OTP via telefono per gli account aziendali.
- Funzionalità end-to-end: costruzione delle API CRUD sul motore Hasura GraphQL, collegamento allo stato dell'interfaccia, rilascio dell'app come PWA installabile e gestione delle regole di validazione di business fino alla produzione.
Perché è stato importante
Il rilascio del portale ha fornito a FuelBuddy una piattaforma web dedicata per i clienti aziendali a Dubai, semplificando gli ordini di carburante all'ingrosso e supportando l'espansione regionale dell'azienda.
Cosa è stato effettivamente rilasciato
Gli ordini all'ingrosso e la pianificazione dei turni all'ingrosso sono mutation reali e funzionanti contro Hasura, non moduli segnaposto, insieme a una dashboard che ha sostituito una versione legacy precedente (entrambe esistono ancora nel codebase, quella più recente è quella in produzione). L'autenticazione passa attraverso i claim JWT nativi di Hasura (x-hasura-default-role letto direttamente dal token) invece di un livello di permessi separato aggiunto in un secondo momento.
Pagamenti e onboarding, non solo CRUD
Sia le ricariche wallet sia i pagamenti diretti degli ordini passano attraverso Stripe (@stripe/stripe-js, vue-stripe-js), con route di pagamento dedicate per gli ordini singoli e per le transazioni wallet. La registrazione avviene tramite verifica OTP via telefono (vue3-otp-input, con vue-tel-input che gestisce la formattazione dei numeri internazionali), non un semplice modulo email/password, il che è coerente con un portale costruito per account aziendali di flotta piuttosto che per iscrizioni occasionali.
Installabile, non solo responsivo
Il portale viene distribuito come Progressive Web App installabile tramite vite-plugin-pwa e Workbox, con registrazione del service worker in modalità autoUpdate, così un gestore di flotta può aggiungerlo alla schermata home e ricevere i nuovi rilasci senza dover reinstallare manualmente.
Modello dati e scala
- L'SDK GraphQL generato (da schema codegen) supera le 31.000 righe, una superficie API tipizzata genuinamente ampia, non una manciata di query ad hoc.
- Il recupero dati passa attraverso
graphql-requestdirettamente contro Hasura, senza alcun client Apollo o urql intermedio. - Le dashboard di flotta vengono renderizzate tramite
vue3-easy-data-tableevue-chart-3(Chart.js), pensate per tabelle e grafici con volumi di righe reali, non una manciata di card riassuntive.
Stack
Vue 3, Vite, Pinia per lo stato, graphql-request con GraphQL Code Generator contro Hasura, Stripe per i pagamenti, Firebase per l'autenticazione, Chart.js per le dashboard, vite-plugin-pwa con Workbox per il supporto offline/installabile, Playwright per i test.