01Overview
Unilever Fleet Flow monitors lorries and vans at ten warehouse loading bays. Existing camera software scans each vehicle's QR code at the bay; Fleet Flow matches every scan to a registered vehicle and works out, in real time, which truck is on which bay, how long it has been there against the expected time for its vehicle type, and how much time each bay sits idle.
Operations teams use a live dashboard, per-station views, full-screen dock displays at each bay and exportable shift reports, while supervisors claim and release stations so their time on the floor is recorded. The system runs on-premise on the client's network as an installable web app, with a NestJS API, a MySQL database and a Next.js frontend.
02My contributions
- 01
Built the NestJS 11 backend end to end — 13 feature modules and 81 REST endpoints under a versioned /api/v1, with Prisma on MySQL, Swagger/OpenAPI docs, request-ID logging, a global exception filter and environment validation.
- 02
Designed the data model (users, roles, vehicles, stations, expected durations per vehicle type, supervisor sessions, audit log, site settings, refresh tokens) and the live-data logic that derives bay occupancy, visit duration, overstay status and idle time from the camera scan tables without ever writing to them.
- 03
Implemented real-time updates with Socket.IO — a background watcher pushes bay changes to dashboard, station and dock-screen rooms, wired to RTK Query cache-tag invalidation so every screen stays in sync and elapsed time is driven by the server.
- 04
Built the Next.js 16 / React 19 frontend: live dashboard, station Gantt and visit timelines, vehicle registry with QR sticker generation, notifications with overstay alerts, settings, light/dark theming and an installable PWA in Unilever's brand colours.
- 05
Implemented security and onboarding: JWT access and refresh tokens, database-driven roles with a 15-permission tree and permission-filtered navigation, hashed one-time invite links instead of temporary passwords, password reset with backend rate limits, user status blocking, Helmet, a CORS allowlist and API throttling.
- 06
Built the supervisor workflow — claim, release and revert a station, with supervisor duration on the dashboard and a supervisor history report.
- 07
Delivered five report types (vehicle registry, visit history, station lost time, daily shift summary, supervisor history) with preview and export to PDF, Excel and CSV using PDFKit and ExcelJS.
- 08
Created a 3D digital twin with three.js / React Three Fiber — an interactive loading-bay view driven by live API data and a whole-site overview with animated trucks, optimised for smooth rendering.
- 09
Handled production delivery on the client PC: safe live-database setup scripts that leave camera data untouched, LAN access with a friendly hostname, and the API running 24/7 as a Windows service, plus written setup and technical documentation.
03Architecture highlights
04Key features
- Live loading-bay board for 10 stations
- Vehicle dwell time vs expected time (on time / warning / overdue)
- Station lost-time and idle-period breakdown
- Current-shift dashboard with vehicle-type averages
- Full-screen dock displays at each bay with auto-rotating slides
- Vehicle registry with QR sticker generation
- Supervisor station claim / release with history
- Overstay and arrival notifications
- Five reports exported to PDF, Excel and CSV
- User invites, password reset and profile photos
- Custom roles and per-permission access control
- 3D loading-bay digital twin and site overview
- Installable PWA with light and dark themes