FuelBuddys Expansion in den B2B-Markt der VAE erforderte ein eigenes Webportal. Firmenkunden brauchten Flottenmanagement, Sammelbestellungen und Lieferplanung über mehrere Standorte hinweg statt der Abläufe für Einzelkunden. Ich habe dieses Portal vom initialen Repository bis in die Produktion gebaut, sowohl die Frontend-Architektur als auch die Backend-Daten-APIs.
Was ich gebaut habe
- Frontend-Architektur: Die Anwendung von Grund auf aufgesetzt, inklusive Komponentenarchitektur, clientseitigem Routing und einem konsistenten Design-System für Firmenkunden-Workflows.
- B2B-Workflows: Mehrstufige Bestellformulare, Abläufe für die Planung von Sammel-Kraftstoffbestellungen und datendichte Flotten-Dashboards mit Diagramm- und Tabellenansichten für Bestell- und Wallet-Historie gebaut.
- Zahlungen und Onboarding: Stripe für Wallet-Aufladungen und Bestellzahlungen integriert, sowie telefonbasierte OTP-Registrierung für Firmenkonten.
- End-to-End-Features: Die CRUD-APIs auf der Hasura-GraphQL-Engine gebaut, sie mit dem UI-State verbunden, die App als installierbare PWA ausgeliefert und die Geschäftsvalidierungsregeln bis in die Produktion verantwortet.
Warum es wichtig war
Das Ausliefern des Portals gab FuelBuddy eine eigene Web-Plattform für Firmenkunden in Dubai, vereinfachte Sammelbestellungen für Kraftstoff und unterstützte die regionale Geschäftsexpansion des Unternehmens.
Was tatsächlich ausgeliefert wurde
Sammelbestellungen und die Sammelplanung von Schichten sind echte, funktionierende Mutations gegen Hasura, keine Platzhalterformulare, neben einem Dashboard, das eine ältere Legacy-Version ersetzt hat (beide existieren noch im Code, die neuere ist live). Die Authentifizierung läuft über Hasuras eigene JWT-Claims (x-hasura-default-role, direkt aus dem Token gelesen) statt über eine separat nachträglich angeflanschte Berechtigungsschicht.
Zahlungen und Onboarding, nicht nur CRUD
Wallet-Aufladungen und die direkte Bestellzahlung laufen beide über Stripe (@stripe/stripe-js, vue-stripe-js), mit dedizierten Zahlungsrouten für Einzelbestellungen und Wallet-Transaktionen. Die Registrierung läuft über telefonbasierte OTP-Verifizierung (vue3-otp-input, mit vue-tel-input für die internationale Telefonformatierung), nicht über ein einfaches E-Mail/Passwort-Formular, was zu einem Portal passt, das für Firmenflotten-Konten gebaut ist und nicht für beiläufige Anmeldungen.
Installierbar, nicht nur responsiv
Das Portal wird als installierbare Progressive Web App über vite-plugin-pwa und Workbox ausgeliefert, mit autoUpdate-Service-Worker-Registrierung, sodass ein Flottenmanager es zum Home-Bildschirm hinzufügen kann und neue Deploys erhält, ohne manuell neu installieren zu müssen.
Datenmodell & Skalierung
- Das generierte GraphQL-SDK (aus dem Schema-Codegen) umfasst über 31.000 Zeilen, eine wirklich große, typisierte API-Fläche, keine Handvoll Ad-hoc-Queries.
- Daten werden über
graphql-requestdirekt gegen Hasura abgefragt, ohne Apollo- oder urql-Client dazwischen. - Flotten-Dashboards rendern über
vue3-easy-data-tableundvue-chart-3(Chart.js), gebaut für Tabellen und Diagramme mit echten Zeilenzahlen, nicht für eine Handvoll Zusammenfassungskarten.
Stack
Vue 3, Vite, Pinia für den State, graphql-request mit GraphQL Code Generator gegen Hasura, Stripe für Zahlungen, Firebase für die Authentifizierung, Chart.js für Dashboards, vite-plugin-pwa mit Workbox für Offline-/Installierbarkeitsunterstützung, Playwright für Tests.