FuelBuddy's UAE expansion required a dedicated franchise application tailored to regional operational requirements. I built the Dubai Franchise Application from scratch across both the frontend and the data APIs.
What I built
- Greenfield frontend: Built the component system and application structure from scratch, delivering a clean and responsive interface for franchise operations.
- Hasura GraphQL APIs: Built the backend data layer on Hasura GraphQL engine, defining the CRUD operations and data models needed by the application.
- Maps, scheduling, and exports: Integrated live maps, a calendar/Gantt scheduling view, and spreadsheet/PDF export for franchise reporting.
- Authentication and security: Configured Firebase-backed authentication with role-based access enforced through Hasura's own JWT claims.
Why it mattered
Delivering a dedicated platform gave FuelBuddy's UAE franchise operators a purpose-built tool for regional operations, on a stack built for real-time map data and heavy reporting.
The Data Layer
This app fetches through graphql-request against a typed, codegen'd SDK, with Pinia stores holding client state, no TanStack Query anywhere in the dependency tree. Auth runs on Firebase, and role-based access comes from Hasura's own JWT custom claims (x-hasura-default-role, x-hasura-user-id) rather than a separately built permissions system.
More Than a Form Builder
This is a genuinely feature-heavy app for what could have been a thin CRUD tool: Mapbox GL plus mapbox-gl-draw for drawing and editing franchise zones directly on the map, FullCalendar paired with vue-ganttastic for Gantt-style scheduling, Chart.js for reporting dashboards, and a full export pipeline (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image) so franchise reports leave the app as spreadsheets, PDFs, or images depending on what the operator needs, not one fixed format.
Codegen, Not Hand-Written Queries
GraphQL operations are generated at build time via vite-plugin-graphql-codegen against codegen.yml, producing a typed src/sdk.ts client from the Hasura schema. Every query and mutation is typed against the live schema instead of hand-written strings that drift silently when the backend changes.
Testing Focus
Playwright covers two flows end to end: login and order management, the gate every other screen sits behind and the core transaction the app exists to handle. Everything downstream of those two (scheduling, exports, reporting) is newer surface area than the tests, not an oversight.
Stack
Vue 3, Vite, Pinia, graphql-request with GraphQL Code Generator against Hasura, Firebase for auth, Mapbox GL with mapbox-gl-draw, FullCalendar with vue-ganttastic, Chart.js for reporting, Playwright for tests.