All work

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

FlutterNext.jsDispatchEN / AR

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.