Water logistics · 2026 · iOS + Android + Web
Tanker
Premium water by tanker, plus the Next.js console that runs Riyadh — live dispatch, fleet, orders, and EN/AR.
Technical Product Owner · Flutter & Next.js
Next.js
Riyadh control room
Live dispatch
Map, fleet, exceptions
EN / AR
App and dashboard
Operations dashboard
Click any screen to zoom
Customer app
Click any screen to zoom
01
Context
Tanker is two products on one operation. Households order potable water by tanker — address, volume, live tracking, reorder — in English and Arabic, priced in SAR. Riyadh Central runs the other half: a Next.js operations console for dispatch, fleet, customers, stations, and sales. Master data is synced from Alanazi Com. The console does not invent a second fleet.
02
My role
I owned
- Customer app: onboarding, order, track, reorder, and rating
- Next.js operations console for Riyadh Central
- Map-first dispatch and exception handling
- Alanazi Com sync for customers, drivers, tankers, stations, and water types
- EN / AR, including a right-to-left dashboard
The team owned
- Driver mobile app and GPS hardware
- Alanazi Com as the source system
- Payment capture and payout rails
03
The problem
Ordering a water tanker is still a phone call in many households. The customer cannot see the truck, and operations cannot see the exception. Orders, drivers, tankers, and stations lived in different tools. A premium water promise dies in that gap — on the doorstep and in the control room.
04
Discovery
The customer job is recurring: teach the promise (watch every mile, delivered with trust), then make reorder one tap. The operator job is different. Riyadh Central opens on a live control room — active deliveries, orders today, a fleet map — then drops into dispatch. Platform orders (the app) and Alanazi Com orders are the same board with a different source, not two products. Rating tags exist so a bad delivery becomes a reason, not a vague star.
05
Product decisions
Trust before the map
- The decision
- Customer onboarding leads with live tracking and verified drivers, handshake, and invoices — not a settings tour.
- Why
- People already know how to order water. They do not believe they will see the truck.
- The trade-off
- A longer first run. Skip is available so we do not trap anyone.
- The result
- The brand is set before the first Order water tap.
Order again is a first-class card
- The decision
- Home surfaces the last potable order as a one-tap repeat, next to a new order.
- Why
- Water is recurring. If reorder takes a full form, they will call instead.
- The trade-off
- New addresses and new volumes take a longer path. Repeat households are the volume.
- The result
- The habitual job is one tap. The exceptional job still exists.
Dispatch is a map, not a table
- The decision
- Live dispatch is map-first: pick a drop, see nearby drivers, assign in one move. Lanes sit beside the map — unassigned, waiting acceptance, active, scheduled, exceptions.
- Why
- A failed drop in Riyadh is a location problem. A spreadsheet hides the truck.
- The trade-off
- Orders and finance stay in tables. The dispatch job does not start there.
- The result
- Priority and “needs operator attention” sit next to the pin, with reassign on the order.
Sync master data, don’t retype it
- The decision
- Customers, drivers, tankers, water stations, water types, and the day’s sale orders come from Alanazi Com. Create them there, then sync. The dashboard will not pretend it is a second registry.
- Why
- Two systems of record is how a tanker exists in the app and not on the map.
- The trade-off
- Operators wait on a sync and see the last sync time. Instant local edits would drift.
- The result
- Platform and Alanazi Com stay labeled on the same screens. Fleet, stations, and customers stay one list.
06
UX / user flow
The customer app is photography-led onboarding, an EN/ع toggle, then a blue-and-white phone: order, order again, deliveries, a structured rating. The console is a dark operations shell — Riyadh Central, live badge, search across orders, drivers, and tankers. Overview is the control room and the fleet map. Dispatch splits the queue and the map. Orders, customers, drivers, tankers, stations, and sales each get a header with the numbers that matter, then the table or the cards. Arabic flips the whole shell, not just the strings.
07
Technical architecture
Flutter customer app and a Next.js (React, TypeScript) admin on shared order and fleet APIs. The order lifecycle is one sequence on both sides: confirmed, searching, assigned, accepted, en route, arrived, delivering, delivered. Alanazi Com is the source for customers, drivers, tankers, stations, and water types; the console imports and reconciles, it does not fork them. EN/AR includes RTL layout on the dashboard. Invoices, ratings, and reorder all hang off the same order.
08
What I built
- EN/AR customer onboarding, order, reorder, and delivery history
- Structured delivery rating with tags
- Admin sign-in for company operations accounts
- Live control room: deliveries, orders, fleet map, suggested actions
- Map-first dispatch with exception and reassign
- Orders, customers, drivers, tankers, and water stations
- Sales and income with export
- Alanazi Com sync and an Arabic (RTL) overview
09
Trade-offs
We did not build a public driver marketplace. The fleet stays the company’s, including third-party tankers assigned to stations. The household loop and the Riyadh console had to share one order before anything else was added.
10
Launch
Customer Flutter app for iOS and Android, and a Next.js operations console for Riyadh — SAR, English and Arabic, tanker photography on the customer side and a control-room shell for dispatch.
11
Outcome
Households can order potable water, follow a delivery, and rate a named driver. Operators can see the same order on a map, assign a tanker, and reconcile customers, fleet, and stations with Alanazi Com. Utilization figures stay with operations.
12
What I learned
A logistics product is won twice: reorder on the phone, and exceptions in the control room. I would have designed the sync states — last sync, nothing to import, station with no service area — at the same time as the happy-path map. A calm dashboard is mostly the unhappy path, labeled clearly.