WareTrack

Warehouse teams usually juggle spreadsheets, dock calendars and radio calls to answer simple questions: which truck is at which door, what's late, what's running low.

We wanted to show what an operations tool could feel like if all of that lived in one place, and if you could actually see it: a living model of the warehouses instead of another table.

We started with the data, not the visuals: sites, docks, trucks, forklifts, inventory and shipments, each linked to the others. The 3D scene is just another way to look at that same data, so the map and the lists can never disagree.

The camera works like a strategy game: tilt, pan, zoom and rotate around the network, fly between sites, or click any truck, forklift, dock or pallet to open a live inspector with its status and current shipment.

A KPI strip, a shipment timeline and filters ("delayed only", trucks by status) sit around the scene, and a cutaway mode lifts the roofs to show the racks inside.

Built with React, TypeScript and React Three Fiber. One Zustand store holds the whole operation, and a small simulation moves it forward every two seconds: trucks arrive, dock, load and leave, forklifts get assigned and recharge, stock levels change.

Racks, pallets, trees and road markings are instanced, so hundreds of objects render smoothly in the browser. Scene components only render; all business rules (KPIs, delays, filters) live in the data layer.

A dark industrial "night shift" theme with amber accents sits alongside the day theme, and the whole app ships as a static site on Cloudflare.