contact.exe
ATLAS

</atlas>

ATLAS

Real-time logistics analytics dashboard. Delivered under NDA.

8 weeks

wireframes → production handover

30+

vehicles tracked live

100+ hrs/yr

saved via automated reporting

SPECIFICATIONS

ROLESOLO BUILD
YEAR2025
TYPEWEB APP
STATUShanded off
STACKnext.js · typescript · d3.js · websockets · supabase · tailwind
LINKS
CLIENTLogistics client · Melbourne, AU
SOURCEhanded off to client — NDA

A Melbourne logistics company was running fleet and warehouse operations on spreadsheets and a legacy PHP dashboard that updated once a day.

A real-time analytics and monitoring dashboard built for a logistics client in Melbourne.js visualisations, role-based access control, and automated PDF report generation.Codebase handed off to client under NDA.

README.TXT — ATLAS (6 KB)[full readme →]

== WHAT IS THIS ==

────────────────────────────────────────

A real-time analytics and monitoring dashboard built for a logistics client in Melbourne. Live WebSocket data feeds, interactive D3.js visualisations, role-based access control, and automated PDF report generation. Codebase handed off to client under NDA.

== </the problem> ==

────────────────────────────────────────

A Melbourne logistics company was running fleet and warehouse operations on spreadsheets and a legacy PHP dashboard that updated once a day. The operations team was essentially flying blind during peak hours, weekly reporting was a manual 2+ hour job every Monday morning, and drivers, warehouse staff, and management all needed different views of the same data.

role & context

Solo freelance engagement for a Melbourne logistics company. I designed and built the entire product over 8 weeks. Codebase, design assets, and documentation handed off to the client’s internal team under NDA — architecture and outcomes described with client details generalized.

Codebase handed off to the client under NDA — architecture, process, and outcomes are described with client details generalized. No repository or internal screenshots are public.

== </my approach> ==

────────────────────────────────────────

I designed and built the entire product solo over 8 weeks, from wireframes through production deployment and handover. Next.js with TypeScript on the front, D3.js for every visualisation, WebSocket connections pushing live updates every 2 seconds, and Supabase with Row Level Security powering three role-based dashboard views over one dataset. The codebase, design assets, and documentation were transferred to the client's internal team under NDA.

== </the story> ==

────────────────────────────────────────

Atlas was a freelance engagement for a Melbourne-based logistics company that needed real-time visibility into their fleet and warehouse operations. The existing setup was spreadsheets and a legacy PHP dashboard that updated once a day. The operations team was essentially flying blind during peak hours.

The brief was clear: build a dashboard that shows what's happening right now, lets managers drill into the data, and generates end-of-week reports automatically. It needed role-based access so drivers, warehouse staff, and management each saw different views. The whole thing had to be deployable on their existing infrastructure with minimal DevOps overhead.

I designed and built the entire product solo over 8 weeks, from initial wireframes through to production deployment and client handover. The codebase, design assets, and documentation were transferred to the client's internal team under NDA.

== </architecture> ==

────────────────────────────────────────

The frontend is a Next.js app with TypeScript, using D3.js for all data visualisations: fleet map, throughput charts, delivery timeline, and warehouse heatmap. WebSocket connections to the backend push live updates every 2 seconds, so the dashboard reflects real-time state without polling.

The backend runs on Supabase with Row Level Security for role-based access. Three roles (driver, warehouse, admin) each get a different dashboard view powered by the same underlying data. Supabase Edge Functions handle PDF report generation on a weekly cron, compiling the previous 7 days of metrics into a formatted document and emailing it to the management distribution list.

Authentication uses Supabase Auth with magic link login. No passwords to manage, which was a requirement from the client's IT team. The entire stack deploys to Vercel (frontend) and Supabase (backend) with zero server management.

== </key features> ==

────────────────────────────────────────

Live fleet tracking

A real-time fleet map with vehicle trails covering 30+ vehicles. WebSockets push diffs only · position changes and status updates · keeping bandwidth and database load minimal.

Custom D3 visualisations

Warehouse heatmap updating in real time, a delivery timeline managers can scrub through, and throughput charts · views off-the-shelf chart components couldn't handle without heavy customisation.

Role-based views on one dataset

Driver, warehouse, and admin roles each get a different dashboard powered by the same underlying data, enforced with Row Level Security.

Automated weekly PDF reports

A Supabase Edge Function on a weekly cron compiles 7 days of metrics into a branded document and emails it to the management list · replacing a manual process the client estimated cost 100+ hours per year.

Passwordless auth

Magic link login via Supabase Auth · no passwords to manage, which was a requirement from the client's IT team.

Zero server management

Vercel for the frontend, Supabase for the backend · deployable on the client's terms with minimal DevOps overhead.

== </key decisions> ==

────────────────────────────────────────

DECISION 01

D3.js over a charting library like Recharts was the key technical decision. The client needed custom visualisations: a live fleet map with vehicle trails, a warehouse heatmap that updates in real-time, and a delivery timeline that managers could scrub through. Off-the-shelf chart components couldn't handle these without heavy customisation, so D3 gave full control at the cost of more implementation time.

DECISION 02

WebSockets over polling was non-negotiable for the fleet tracking view. At 30+ vehicles updating GPS coordinates, polling would have been both slower and more expensive on the database. The WebSocket approach pushes diffs only (position changes, status updates), keeping bandwidth minimal.

DECISION 03

The automated PDF reporting replaced a manual process that took the operations manager 2+ hours every Monday morning. The Supabase Edge Function pulls aggregated metrics, renders them into a branded template, and sends the PDF via Resend. The client estimated this alone saved 100+ hours per year.

== </what i learned> ==

────────────────────────────────────────
>

D3 over a charting library is the right call when the visualisations are the product. Full control cost more implementation time but was the only way to ship the fleet map, heatmap, and scrubbable timeline.

>

WebSockets pushing diffs beat polling decisively for live GPS at fleet scale · faster for users and cheaper on the database.

>

The automated PDF reporting had the clearest ROI of anything in the build. Sometimes the least glamorous feature saves the client the most hours.

next.js · typescript · d3.js · websockets · supabase · tailwind

handed off

[codebase handed off to client — NDA]