Logistics, Engineering case study

Spotter ELD
Trip Planner.

A trip planner for US truck drivers. Three places and the hours already worked go in. Out comes a route that follows the federal Hours of Service rules, with every break, rest and fuel stop placed, and the FMCSA daily log sheet drawn for each day of the trip.

Role
Full stack: HOS engine, API and UI
Domain
US trucking compliance
Platform
Web app (live)
Tools
Django, React, Leaflet, Canvas

Scroll to watch it work. Or hold.

Feature 01Trip input
01 / Three places02 / Hours used03 / Coordinates
fields 0/3

A trip starts as three places.

Where the truck is now, where it loads and where it unloads. Suggestions come from OpenStreetMap after two letters.

Then the hours already worked.

A driver gets 70 on-duty hours in any 8 days. With 20 used, this trip has 50 to spend.

Each place becomes a point.

Nominatim turns the names into coordinates. When it is busy, a built-in table of 53 US cities answers instead.

Feature 02Route
01 / Two legs02 / Segments03 / Too long
0.0 mi routed

The road comes from OSRM, one leg at a time.

Chicago to Kansas City is 510 miles. Kansas City to Denver is 605 more.

The route becomes four segments.

Drive, load, drive, unload. Loading and unloading count as 1 hour on duty each.

Twenty hours at the wheel won't fit in a shift.

A driver may drive 11 hours per shift and must break after 8, so the plan needs stops nobody typed.

Feature 03HOS engine
01 / Four clocks02 / Break03 / Rest04 / Fuel
stops added 0/4

Four clocks run while the truck drives.

Driving, the 14-hour window, time since the last break and the 70-hour cycle. A fifth counts miles since fuel.

Eight hours in, a 30-minute break.

At 2:15 PM the break clock hits 8 hours. The engine stops the truck in Livingston County, Missouri.

At 11 hours of driving, the day ends.

After loading in Kansas City, driving hits 11 hours at 6:45 PM. Ten hours off follow, in the sleeper berth.

Every 1,000 miles, a fuel stop.

Day two fuels in Lincoln County, Colorado, takes one more break and unloads in Denver at 2:45 PM.

Feature 04Log sheet
01 / Ink02 / Remarks03 / Totals
inked 0.0/24 h

Every event becomes ink on the grid.

Four lines, one per duty status. The pen runs along the line the driver is on and drops to another at every change.

Each change gets a dot and a place.

Under the grid the app writes the time and the town of every change, the way drivers do it by hand.

Every sheet adds up to 24 hours.

Each line is totalled on the right. The four make 24.0, and the hours on duty get a circle of their own.

Feature 05Across midnight
01 / Midnight02 / Recap03 / Download
rest 0.00/10 h

A rest that crosses midnight lands on two sheets.

The 10-hour rest starts at 6:45 PM. Its first 5.25 hours close sheet one, the other 4.75 open sheet two.

Each sheet carries the cycle forward.

Hours on duty add up against the 70: 20 before the trip, 32.2 after day one, 43.0 after day two.

Each sheet downloads as a PNG.

The log is drawn on a canvas, so Download saves exactly what is on screen, one file per day.

Feature 06One screen
01 / Stops02 / Summary03 / Logs
stops 0/6

Every stop lands on the map and in the list.

Six stops in trip order: the two the driver asked for and the four the engine added, each with its start time and its length. The same letters mark the map.

The whole trip reads at a glance.

Four numbers sum it up: 1,115.2 miles, 34.0 hours from start to finish, 20.0 of them driving, and one log sheet per day.

Input to paperwork, one screen.

Three places go in at the top. Two log sheets come out at the bottom, each with its hours, its miles and its own Download button.

ProofThe live app
Spotter ELD results screen with the trip form, the route map with its legend and the four trip numbers
The live results screen: the trip form on the left, the route with its colour-coded legend on the right.
Spotter ELD stop list, trip numbers and a drawn FMCSA daily log for a Chicago to Nashville trip
Another trip, Chicago to Nashville: the stop list, the four numbers and the log sheet the app draws on a canvas.

The scenes above are rebuilt in the site's own palette from one real trip the app planned, Chicago to Kansas City to Denver with 20 hours already on the cycle. Every stop, time, mile and log line in them comes from the app's own response for that trip.

Read the full write-up
01Problem

Drivers plan routes and log hours by hand.

US truck drivers are bound by Hours-of-Service rules: limited drive time, mandatory breaks, and a 70-hour cycle. Most plan the trip in one place and fill out their daily log sheets separately, by hand. It is slow, easy to get wrong, and a wrong log is a compliance problem.

The design challenge

Take a dense regulatory task and make it feel like filling in three fields, without hiding the detail a driver actually needs to trust it.

02Goal

One input, a route, and the paperwork done.

The whole experience fits on a single screen. A driver enters current, pickup and dropoff locations plus hours already used, hits one button, and gets a mapped route with fuel, break and rest stops, plus daily log sheets generated for them.

03Empty state

Start with a calm, obvious first move.

Before any input, the screen guides rather than overwhelms: a simple prompt and a single clear call to action, so a first-time user knows exactly where to begin.

Spotter ELD landing and empty state
Empty state: one prompt, one action. No blank canvas anxiety.
04Interaction

Reduce friction at the point of input.

Location fields use autocomplete with a clear map-pin affordance and a live cycle-hours indicator, so the form fills fast and the driver can see their remaining hours update as they go.

Autocomplete location input with map pin
Autocomplete and a live hours indicator keep the form quick and legible.
05The hard part

A daily log that looks like the real thing.

The standout piece is the FMCSA daily log: a faithful, drawn-to-grid duty-status sheet, generated automatically from the planned route. Getting this to read like the paper form drivers already know was the difference between a toy and something they'd trust.

Auto-generated FMCSA daily log sheet
The auto-generated FMCSA log grid: the detail that makes the tool credible.
06Whole flow

Input to compliant trip, in one view.

Stops are listed chronologically and the route, stats and logs all update together, so the driver always sees the full picture without leaving the screen.

Full Spotter ELD overview
Everything in one place: route, stops, stats, and logs.
07Outcome

A live trip planner that draws its own FMCSA log sheets.

Spotter ELD is deployed and usable end to end, so it can be tried rather than just looked at. The rules live in a Django engine with its own tests, down to every sheet adding up to 24 hours. It's the project I point to when I want to show that I can take a genuinely complicated domain and make the interface feel simple.

Open the live app (opens in a new tab)

Outcome in numbers: 15 backend tests pin the break, rest, restart and fuel rules and the sheet totals, 24.0 hours on every daily sheet, with a rest split cleanly at midnight.

Next case study
Health Optimisation Platform