Logistics · pallets · Dashboards
Freightline
Every pallet, on the map
Scroll to explore ↓
01 · Logistics · pallets
Every shipment, on the map
Logistics app — map, lots, alerts, dock.
- 01
Live track
Select a lot — pin moves, ETA shows.
- 02
Ops filters
Delays, heavy loads — the queue tightens.
- 03
Dock
Simulated check-in, assigned dock, no tour Excel.
01b · Engineering
Technical sheet
Stack, shipping and my role on this build — for recruiters and tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Libraries & tools
- Map UI
- mock realtime
- Deployment
/play demo — simulated ops app, mock data
- Role
Data UX · dense UI · business components
- Context
Playable prototype — filters, states, navigation
02 · Inside the product
One scroll, one screen
Each section locks to the viewport — keep scrolling past the last screen to return to the brief.
Every shipment, on the map
Track a shipmentLive track
128 k€
Ops filters
98,2 %
Dock
14
Ops filters
Track a shipmentTrack a Freightline lot
Track a shipmentSélection
Every pallet, on the map
Map + queue · fictional data.
Activité
We see the Nantes delay before the client calls.
Yanis · dispatch
Heavy loads filter to dock B in one click.
Nora · warehouse
Back to the brief
You’ve left the demo screens — next: try it, then the craft notes.
03 · Ops & warehouses
Control tower fits on one screen
“We see the Nantes delay before the client calls.”
“Heavy loads filter to dock B in one click.”
04 · Ops demo
Track a Freightline lot
Map + queue · fictional data.
- →Hero + below-the-fold sections (not just a hook)
- →Visual hierarchy and primary CTA
- →Information density vs readability
05 · Same family
Other directions of the same type — to compare density and mood.
06 · What to look at
- 01Hero + below-the-fold sections (not just a hook)
- 02Visual hierarchy and primary CTA
- 03Information density vs readability
- 04Interactive states (hover, selection, feedback)