FuelBuddy's UAE consumer site is more than a marketing page: it's where retail customers register, schedule a delivery, and pay. I built this app's frontend, both the public-facing marketing pages and the ordering flow behind them.
What I built
- Marketing pages: Built the public product and company pages (services, FAQs, careers) that introduce FuelBuddy's consumer offering.
- Ordering flow: Built registration, address entry, delivery-slot scheduling, payment, and order summary as one connected flow, plus account, wallet, and dashboard views.
- Installable web app: Configured the site as an installable PWA with a service worker and manifest.
Why it mattered
A real ordering flow on the public site, not just a lead-capture form, let FuelBuddy convert UAE consumer traffic directly into scheduled deliveries.
A Full Flow, Not a Landing Page
Register, address, delivery-slot scheduling, payment, and order summary are all real, connected views, not a marketing site with a "contact us" form bolted on. A second, older registration flow (RegisterOld) still sits alongside the current one, evidence this was iterated on rather than shipped once and left alone.
Built for Iteration, Not Just Shipped Once
Google Maps handles address selection during checkout, form validation runs through Vuelidate before an order ever reaches the API, and GTM wires up analytics across both the marketing pages and the ordering flow, so conversion tracking covers the whole funnel, not just the landing pages.
Data Model & Scale
- Storybook plus Chromatic are configured for visual regression testing on components, a real safeguard against unintended UI changes across a fairly large page count (marketing plus the full ordering flow).
vue-i18nis wired in at the framework level, ready for additional locales as FuelBuddy's UAE market expands.
Stack
Vue 3, Vite, Vuex, Google Maps for address selection, Storybook with Chromatic, Firebase, configured as an installable PWA.