Skip to content
AbuubkarPublic

About

HOS-compliant truck trip planner: route map, required stops and auto-drawn ELD daily log sheets. Django + React.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

7 Commits

Folders and files

Repository files navigation

RoadLog logo

RoadLog

Hours-of-Service trip planner & ELD daily log generator for truck drivers

Enter a trip and get the route, every legally required stop, and filled-out Drivers Daily Log sheets for each day on the road.

CI Deploy Django React TypeScript License: MIT

Live demo · Live API · API docs · HOS model · Architecture


RoadLog trip overview: trip bar, KPI strip, route map, HOS clocks and duty status timeline

Screenshots

Daily logs (ELD view) Paper log sheet (printable)
Daily log graph, events table, day totals, 70-hour recap and form-and-manner checklist Generated FMCSA Drivers Daily Log paper form with duty status line, totals, remarks and recap

Sample trip: Chicago, IL → Indianapolis, IN (pickup) → Los Angeles, CA, with 20 h of cycle used. The live app opens with this sample loaded. Change the inputs and click Plan trip to plan your own.

Features

  • Trip inputs: current, pickup and drop-off locations (with address autocomplete), plus current cycle hours used and departure time.
  • Fleet-console UI: a sidebar for switching between Overview, Route & stops, Daily logs and Directions, plus a one-row trip bar and a KPI summary strip. It opens with a sample trip already loaded. The design follows fleet-compliance tools like Motive and Samsara.
  • Route map: the full route on a muted Esri basemap (with a satellite option), plus markers for pickup, drop-off, fuel stops, 30-minute breaks, 10-hour rests and 34-hour restarts.
  • Live HOS clocks: drag along the whole-trip duty-status timeline to move the truck on the map. The until-break, drive, shift and cycle clocks and the upcoming stops update as you go.
  • HOS-compliant schedule: enforces the 11-hour driving limit, the 14-hour window, the 30-minute break, the 70 h / 8-day cycle, fueling every 1,000 mi, and 1 h pickup/drop-off.
  • Daily logs: one per calendar day. Each has an ELD-style graph, an events table, day totals, the 70-hour recap and a form-and-manner checklist. A Paper form toggle draws the FMCSA paper log sheet, with the grid line, totals that sum to 24, remarks and the recap.
  • Itinerary & directions: a day-by-day timeline and turn-by-turn instructions for each leg.
  • Print-ready: print every sheet, or save them as a PDF, one landscape page per day.

Tech stack

Layer Choice
Frontend React 19, TypeScript, Vite, Tailwind CSS v4, React Leaflet, Lucide icons
Backend Django 5.2, Django REST Framework, django-cors-headers
Map services OSRM routing, Photon / Nominatim geocoding, OpenStreetMap tiles, GeoNames places. All free, no API keys
Hosting GitHub Pages (frontend) · PythonAnywhere (API)
Quality Django test suite, Ruff, Oxlint, strict TypeScript, GitHub Actions CI

Project structure

roadlog/
├── backend/                     Django REST API
│   ├── config/                  settings, urls, wsgi
│   ├── trips/
│   │   ├── services/
│   │   │   ├── hos.py           HOS rules engine (pure, unit-tested)
│   │   │   ├── logs.py          activities → daily log sheets
│   │   │   ├── geo.py           OSRM / Photon / Nominatim clients
│   │   │   ├── places.py        offline nearest-town lookup
│   │   │   └── planner.py       orchestration
│   │   ├── data/us_places.csv   GeoNames US places (CC BY 4.0)
│   │   ├── tests/               HOS compliance + API tests
│   │   ├── serializers.py
│   │   └── views.py
│   ├── deploy/                  PythonAnywhere WSGI template
│   └── requirements.txt
├── frontend/                    React + Vite SPA
│   └── src/
│       ├── api/                 HTTP client
│       ├── components/
│       │   ├── layout/          sidebar, page header & tabs
│       │   ├── trip-form/       trip bar & address autocomplete
│       │   ├── summary/         KPI strip
│       │   ├── map/             Leaflet route map
│       │   ├── hos/             HOS clocks & upcoming stops
│       │   ├── timeline/        whole-trip duty status scrubber
│       │   ├── logs/            log graph, events, paper form
│       │   ├── itinerary/       stops table & directions
│       │   └── ui/              shared primitives
│       ├── hooks/ · lib/ · types/
├── docs/
│   ├── assessment/              original brief, FMCSA guide, video transcript
│   ├── images/                  README screenshots
│   ├── api.md · architecture.md · hos-rules.md · deployment.md
└── .github/workflows/           CI + GitHub Pages deploy

Getting started

Prerequisites: Python 3.11+ and Node 20+.

API

cd backend
python -m venv .venv && source .venv/bin/activate
pip install -r requirements-dev.txt
cp .env.example .env            # DJANGO_DEBUG=true is enough locally
python manage.py runserver      # http://localhost:8000

Web app

cd frontend
npm install
npm run dev                     # http://localhost:5173

The app opens with a bundled sample trip (Chicago → Indianapolis → Los Angeles), so it shows data without calling the API. New trip clears it, and Load sample trip brings it back.

Tests & linting

cd backend && python manage.py test && ruff check .
cd frontend && npm run lint && npm run build

How the planner works

  1. Geocode the three locations and request one OSRM route through them.
  2. Simulate the trip against the HOS limits. Whenever the next limit would be hit, insert the stop that clears it (break, rest, fuel or restart).
  3. Map each stop to a point on the route and the nearest town.
  4. Split the timeline at midnight into daily log sheets.

The full rule table and modelling assumptions are in docs/hos-rules.md.

Deployment

Full steps are in docs/deployment.md.

  • Frontend: every push to main builds and publishes to GitHub Pages via deploy-pages.yml.
  • API: runs on PythonAnywhere using the WSGI template in backend/deploy/.

License

MIT. Place data © GeoNames (CC BY 4.0); map data © OpenStreetMap contributors.

About

HOS-compliant truck trip planner: route map, required stops and auto-drawn ELD daily log sheets. Django + React.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages