FuelBuddy's expansion into the UAE B2B market required a dedicated web portal. Corporate clients needed fleet management, bulk ordering, and multi-location delivery scheduling rather than retail consumer flows. I built this portal from the initial repository through production, covering the frontend architecture and backend data APIs.
What I built
- Frontend architecture: Set up the application from scratch, including component architecture, client-side routing, and a consistent design system for corporate workflows.
- B2B workflows: Built multi-step order forms, bulk-fuel scheduling flows, and data-dense fleet dashboards with chart and table views for order and wallet history.
- Payments and onboarding: Integrated Stripe for wallet top-ups and order payments, and phone-based OTP registration for corporate accounts.
- End-to-end features: Built the CRUD APIs on Hasura GraphQL engine, connected them to UI state, shipped the app as an installable PWA, and handled business validation rules through production.
Why it mattered
Shipping the portal provided FuelBuddy with a dedicated web platform for corporate clients in Dubai, streamlining bulk fuel orders and supporting the company's regional business expansion.
What Actually Shipped
Bulk ordering and bulk shift-scheduling are real, working mutations against Hasura, not placeholder forms, alongside a dashboard that replaced an earlier legacy version (both still exist in the codebase, the newer one live). Auth runs through Hasura's own JWT claims (x-hasura-default-role read directly off the token) rather than a separate permissions layer bolted on afterward.
Payments and Onboarding, Not Just CRUD
Wallet top-ups and direct order payment both run through Stripe (@stripe/stripe-js, vue-stripe-js), with dedicated payment routes for standalone orders and wallet transactions. Registration runs through phone-based OTP verification (vue3-otp-input, with vue-tel-input handling international phone formatting), not a plain email/password form, which matches a portal built for corporate fleet accounts rather than casual sign-ups.
Installable, Not Just Responsive
The portal ships as an installable Progressive Web App via vite-plugin-pwa and Workbox, with autoUpdate service worker registration, so a fleet manager can add it to their home screen and get new deploys without a manual reinstall.
Data Model & Scale
- The generated GraphQL SDK (from schema codegen) runs over 31,000 lines, a genuinely large, typed API surface, not a handful of ad hoc queries.
- Data fetching goes through
graphql-requestdirectly against Hasura, no Apollo or urql client in between. - Fleet dashboards render through
vue3-easy-data-tableandvue-chart-3(Chart.js), built for tables and charts with real row counts, not a handful of summary cards.
Stack
Vue 3, Vite, Pinia for state, graphql-request with GraphQL Code Generator against Hasura, Stripe for payments, Firebase for auth, Chart.js for dashboards, vite-plugin-pwa with Workbox for offline/installable support, Playwright for tests.