FuelBuddys Expansion in die VAE erforderte eine eigene Franchise-Anwendung, zugeschnitten auf regionale betriebliche Anforderungen. Ich habe die Dubai Franchise Application von Grund auf gebaut, sowohl das Frontend als auch die Daten-APIs.
Was ich gebaut habe
- Greenfield-Frontend: Das Komponentensystem und die Anwendungsstruktur von Grund auf gebaut und eine saubere, responsive Oberfläche für den Franchise-Betrieb geliefert.
- Hasura-GraphQL-APIs: Die Backend-Datenschicht auf der Hasura-GraphQL-Engine gebaut und dabei die CRUD-Operationen und Datenmodelle definiert, die die Anwendung braucht.
- Karten, Planung und Exporte: Live-Karten, eine Kalender-/Gantt-Planungsansicht sowie Tabellen-/PDF-Export für das Franchise-Reporting integriert.
- Authentifizierung und Sicherheit: Firebase-gestützte Authentifizierung konfiguriert, mit rollenbasiertem Zugriff, der über Hasuras eigene JWT-Claims durchgesetzt wird.
Warum es wichtig war
Das Liefern einer eigenen Plattform gab FuelBuddys Franchise-Betreibern in den VAE ein zweckgebautes Werkzeug für den regionalen Betrieb, auf einem Stack, der für Echtzeit-Kartendaten und umfangreiches Reporting gebaut ist.
Die Datenschicht
Diese App fragt über graphql-request gegen ein typisiertes, per Codegen erzeugtes SDK ab, wobei Pinia-Stores den Client-State halten, ohne TanStack Query irgendwo im Dependency-Baum. Die Authentifizierung läuft über Firebase, und der rollenbasierte Zugriff kommt aus Hasuras eigenen benutzerdefinierten JWT-Claims (x-hasura-default-role, x-hasura-user-id) statt aus einem separat gebauten Berechtigungssystem.
Mehr als ein Formular-Baukasten
Das ist eine wirklich feature-reiche App für etwas, das auch ein dünnes CRUD-Tool hätte sein können: Mapbox GL plus mapbox-gl-draw zum Zeichnen und Bearbeiten von Franchise-Zonen direkt auf der Karte, FullCalendar zusammen mit vue-ganttastic für Gantt-artige Planung, Chart.js für Reporting-Dashboards, und eine vollständige Export-Pipeline (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image), sodass Franchise-Reports die App als Tabellen, PDFs oder Bilder verlassen, je nachdem, was der Betreiber braucht, nicht in einem fest vorgegebenen Format.
Codegen statt handgeschriebener Queries
GraphQL-Operationen werden zur Build-Zeit über vite-plugin-graphql-codegen gegen codegen.yml generiert und erzeugen einen typisierten src/sdk.ts-Client aus dem Hasura-Schema. Jede Query und Mutation ist gegen das aktuelle Schema typisiert, statt handgeschriebener Strings, die still auseinanderdriften, wenn sich das Backend ändert.
Fokus beim Testen
Playwright deckt zwei Abläufe end to end ab: Login und Bestellverwaltung, das Tor, hinter dem jeder andere Bildschirm liegt, und die Kerntransaktion, für die die App eigentlich existiert. Alles, was diesen beiden nachgelagert ist (Planung, Exporte, Reporting), ist neuere Oberfläche als die Tests, kein Versehen.
Stack
Vue 3, Vite, Pinia, graphql-request mit GraphQL Code Generator gegen Hasura, Firebase für die Authentifizierung, Mapbox GL mit mapbox-gl-draw, FullCalendar mit vue-ganttastic, Chart.js für Reporting, Playwright für Tests.