Project showcase

Enterprise Multi-Store
Commerce Solution

Warehouse operations, last-mile delivery, and COD settlement across a store network — web, customer app, picker, driver, admin, and one GraphQL API.

Web + appCustomer shop

Pick · till · driveFulfillment

One APIGraphQL

Customer shopping on web and in the kitchen

System

What this solution covers

Customers shop by store and slot. The warehouse picks into baskets. Till verifies. Drivers collect cash and return assets. One catalog, one order, every screen.

Shop

Web storefront and mobile app share the same journeys — store, home modules, catalog, cart, checkout, tracking.

Fulfill

Picker sessions, till verification, ready-to-dispatch, and driver collection — with physical baskets and paid bags.

Operate

Admin runs catalog, page composer, geo zones, slots, staff, vouchers, vehicles, and driver settlement.

How it works

One network, many roles

Customers place an order for a delivery slot. Pickers fill baskets, till verifies, drivers collect COD and return assets.

Multi-store catalog with per-store stock, price, fridge and freezer flags
Geo zones and delivery slots with per-zone order limits
Immutable original order plus live processing stages
Physical baskets and paid bags through till
Driver COD wallet and office settlement
Page composer for app and web homepages
Push topics for customer, driver, and picker

Surfaces

Every surface the solution touches

Customers shop on web and mobile. The store runs admin, picker, till, and driver. The platform is one GraphQL API and a media CDN.

Customer web

Desktop shop — same journeys as the app

Customer app

Browse, cart, checkout, orders

Admin

Catalog, composer, till, dispatch

Picker app

Session, baskets, substitutes

Driver app

Collect, COD, wallet, return

GraphQL API

Hapi + Apollo — one contract

Assets CDN

Uploads and WebP thumbs

Catalog

Types, brands, categories, tags

Vouchers

BOGO, tiered, min spend

Composer

Home, category, collection pages

Push

FCM topics and device tokens

Geo & slots

Polygons, copy-week slots

Driver geofence

Zone assign, area lock, live track

Vehicles

Capacity, zones, drivers

Payments

COD, card, online checkout

Banners

Store promotions on the shop

Till

Scan, bags, print, dispatch

Technology

The stack behind the solution

One GraphQL API. Docker Compose. Mongo and Redis. Sage and forest greens for the UI — not a consumer brand palette.

Admin

Next.js 15 · Ant Design 6

App Router, Apollo 4, Redux, Final Form.

Mobile

React Native CLI

Customer, picker, and driver apps.

Web shop

Desktop storefront

Same GraphQL journeys as the app.

API

Hapi · Apollo 4

Merged schema and resolvers per domain.

Data

Mongo · Redis

Mongoose 8. Sessions in Redis. JWT.

Events

Kafka

Auth and session event stream.

Push

Firebase Admin

Topics for client, driver, picker.

Maps

Google Maps

Zones, addresses, on-the-way coords.

Files

Sharp + CDN

Uploads, WebP thumbs, object buckets.

Auth

Secure accounts

Login, register, device tokens, roles.

Pay

COD · card · online

Checkout methods plus driver collection.

Deploy

Docker Compose

API, admin, assets, nginx, Prometheus.

Architecture

How the pieces run together

Every client talks GraphQL. Media is a separate Express service. Orders move through locks and stages — not a separate warehouse system.

Users

Web shop

Customer app

Admin

Picker

Driver

API

GraphQL

JWT + Redis session

30+ domain modules

FCM helpers

Ops logic

Cart → order

Picker sessions

Till shift

Delivery + wallet

Locks + activity log

Data

MongoDB

Redis

Kafka

Disk via assets

Business logic

Many warehouses, one central server

Each warehouse / store is its own fulfillment location — stock, staff, and storefront routing — on one GraphQL API.

Online store / app

One shop. Address and slot route the cart to the right warehouse / store.

HQ admin

Catalog, stores, composer, users, vouchers

API

Central server

GraphQL · MongoDB · Redis

Shared catalog

Per-store stock, price, and flags

Warehouse / store

North Hub

Picker Till Driver Manager

Warehouse / store

Riverside

Picker Till Driver Manager

Warehouse / store

Central Market

Picker Till Driver Manager

Business logic

Order in, cash back to the store

One order stays on one warehouse / store — from checkout through till, the rider, and COD settlement.

Incoming order

Cart + original order

Warehouse assigned

Zone + store on cart

Picking

Baskets + session lock

Till verification

Lines, bags, print

Dispatch

Ready to dispatch

Delivery

On the way → door

COD collected

Driver wallet

COD return

Settle at the store

Picking

Till

Delivery + COD

On the floor

Ayesha Khan picks into baskets. Sara Malik verifies at till and bags the order. Ali Raza collects, delivers, and takes cash.

COD return

Cash sits on the driver wallet until the store manager settles it and the baskets come back.

Fulfillment

From cart to completed

Every order carries a current stage. On the way is a live sub-status while the driver is delivering.

pending

Created from cart

picking

Locked to picker

picking-complete

Till queue

till_verification

Scan, bags, print

ready-to-dispatch

Await driver

delivering

Optional on_the_way

delivered

COD + signature

completed

Baskets + wallet

Locks

Picker selection, picking session, till, and driver — with expiry so work does not stall.

Cold chain flags

Normal, fridge, and freezer lines, plus items marked unfit for a standard basket.

Picking lock

Baskets

Fridge / freezer

Admin

Command center for the store

Today’s orders, till queue, drivers on the road, and the catalog — one console for managers and till staff.

Store dashboard — orders, revenue, till queue, and recent tickets in one view.

Store-scoped orders, till, and dispatch queues
Driver settlements and vehicles
Role permissions for catalog, orders, and till
Live KPIs for the shift in progress

Catalog

Products the warehouse can pick

Variations, barcodes, brands, per-store quantity and price, gallery, tax, and service fee on the order.

Dairy

Produce

Bakery

Pantry

Taxonomy

Category tree, brands, manufacturers, types, attributes, tags, and extra fields.

Store overlay

Status and stock per store — the same SKU, different aisle reality.

CMS

Composer pages

The same modules paint the customer app and the web shop. Page types: home, category, store, brand, product, collection, blank.

Product lists and groups
Category row layouts
Carousels, headings, video and script blocks
Publish and schedule windows
Store banners for the shop homepage

Till

Verify before it leaves the store

Open a shift, start from the barcode, verify each line, assign baskets, add bags, print the receipt, send it to dispatch.

Open shift and complete order verification
Missing, damaged, mismatch, or drop a line
Fridge, freezer, and unfit flags on items
Then the ready-to-dispatch queue

Customer app

Browse, checkout, and track

React Native. Composer home, categories, product, cart drawer, slot checkout, live tracking.

Picker & driver

Warehouse and last mile

The picker finishes at picking-complete. The driver works a geofenced area, locks the order, and the wallet tracks COD against the office deposit.

Last mile

Geofence, area lock, live track

Each driver is assigned through a vehicle to delivery polygons. An order locks to one rider. On the way streams location and ETA to the customer.

Dispatch map — polygons, assigned rider, live route, ETA.

Geofenced assignment — delivery polygons on the store; vehicles bind drivers to those zones so a rider only works their area.
Area / order lock — collect locks the ticket to that driver (with expiry). Another rider cannot take it. Only one order is on the way at a time.
Driver tracking — on the way records lat/lng, distance, and ETA; the customer is pushed; the route map follows the session.
Address verify writes a geo point so the next drop uses a confirmed pin.

Customer web

The same shop, on a desktop

The web storefront is the customer app laid out for a browser — header, rails, cart drawer, two-column checkout, account sidebar. One GraphQL contract.

Home

Catalog

Cart

Journey	App	Web
Store	Store picker before browse	Header “Deliver to …” picker
Home	Composer home page	Header + hero + rails / grid
Catalog / product	Category and product screens	Category and product grid
Cart	Right-drawer cart	Cart badge + right drawer + cart page
Checkout	Address + slot + voucher + pay	Two-column checkout, same steps
Orders	Orders tab + serial detail	Account sidebar + tracking stepper

Customer web

Home and catalog

Composer home on a wide canvas. Category sidebar, product grid, and Add — the aisle on a laptop.

Homepage — header, search, store, hero, category cards, product rail.

Catalog — sidebar categories, filters, product grid, Add.

Customer web

Cart drawer and checkout

Qty steppers in the drawer. Checkout collects address, slot, voucher, and payment, then places the order.

Right cart drawer — lines, subtotal, go to checkout.

Two-column checkout — address, slot, voucher, payment, invoice.

Customer web

Order tracking and account

The account sidebar holds profile, orders, and addresses. Tracking follows the same stages the warehouse uses.

Stages: pending → picking → till → dispatch → delivering → completed
On the way while the driver is on the road
Account: profile, orders, saved addresses
Favorites and shopping lists in the same account

Payments

How the order is paid

Checkout captures the method. Drivers collect cash on the doorstep. The wallet settles with the office.

App checkout

Web checkout

COD at the door

Cash on delivery

The default path. Driver records the amount, notes, and hands it into the COD wallet.

Card

On-site card at the door, or card on checkout — stored on the order with a transaction id.

Digital wallets

Online checkout for wallets and card — webhook-confirmed before the picker starts.

Platform

GraphQL modules

One schema for shop, admin, picker, and driver. Domain modules, not a separate REST catalog.

users

login, staff, device tokens

addresses / geo

zones, point-in-polygon

products

client + admin queries

carts

one cart per customer

orders

create, cancel, revert

delivery_slots

copy day, zone limits

staff_performance

picker till driver sessions

baskets / bags

physical assets

vouchers

BOGO + tiered

app_pages

Composer

value_pairs

system configs

admin_push

topic broadcasts

Integrations

What the solution is wired to

Maps for zones and the last mile. Push for every role. Files for the catalog. Events for auth sessions.

Google Maps

Store center, delivery addresses, geo polygons, driver on-the-way coordinates.

Firebase Cloud Messaging

Device tokens and topics for customer, driver, and picker — plus admin broadcasts.

Media pipeline

Sharp WebP thumbs on upload, CDN object URLs on the product and composer pages.

Mongo + Redis

Catalog, orders, and carts in Mongo. JWT sessions in Redis.

Kafka

Auth and session events so login and logout stay observable.

Payments

COD wallet, card, and online checkout with webhook confirmation.

Merchandising

Zones, slots, and vouchers

A pin on the map decides the store and the delivery polygon. A slot only appears if that zone still has capacity. Drivers are assigned to the same polygons.

Geo zones

Polygons around each store. Point-in-polygon decides the warehouse, the slot, and which drivers may take the drop.

Delivery slots

Copy a week, cap orders per zone, and show the customer only what is still open.

Vouchers

Percent, fixed, BOGO, and tiered rules — min spend, applies-to, and excludes.

The loop

One order, every role

The customer never sees a different product than the picker, the till, or the driver. The original order is frozen at checkout.

Customer

Picks a store, fills a cart, books a slot, pays, and watches the same stages on web or app.

Store

Picker, till, and dispatcher move the same lines through baskets, bags, and the print receipt.

Last mile

Driver collects, marks on the way, delivers, takes COD, returns baskets, and settles the wallet.

Project showcase