Navislane TMS
Comprehensive TMS Platform for Dispatcher Control, Route Optimization & Fleet Operations
01 / OVERVIEW
Project Brief
Navislane is a full-stack Transportation Management System (TMS) built to unify dispatch controls, HERE Maps route optimization, real-time driver GPS tracking, load management, and Stripe/PayPal payment settlements.
Operational Fragmentation
Logistics dispatchers operate on thin margins and struggle with fragmented workflows. Dispatchers use disconnected spreadsheets to check driver hours, calculate routes, query MC compliance registries, and draft customer bills, causing shipment delays and billing errors.
Unified Full-Stack Console
We engineered an integrated hybrid platform featuring a live Dispatcher Command Center, real-time vehicle speed and battery level overlays, route optimization curves calculated via HERE Maps APIs, and auto-generated PDFs for Stripe/PayPal payment settlements.
Dispatcher Command Center
Central dispatch deck tracking active loads, driver states, and billing sheets.
- Integrated timezone-aware indicators (IN, LA, CA) for cross-continental operations.
- Visualizes live fiscal year revenue/expense metrics using interactive bar graphs.
- Provides immediate drill-downs into active load assets and carrier status sheets.
HERE Maps Tracking
Live GPS driver positioning overlays showing vehicle statuses and route outlines.
- Integrates HERE Maps SDK with satellite toggle options for dispatchers.
- Displays driver-specific stats including current speed, device battery, and track durations.
- Generates unique sharing links to let customers inspect shipment tracks in real time.
Invoice & Billing System
Automated invoice manager tracking billing rates and client settlements.
- Computes loads rates, applicable tax multipliers, and total balances automatically.
- Connects Stripe and PayPal checkout pathways for driver settlements.
- Generates invoice files and load receipts in the client browser using html2pdf.js.
FMCSA Compliance Monitor
Compliance validation module querying federal motor carrier registries.
- Queries FMCSA compliance registries and safety histories using proxied API routes.
- Tracks truck odometer entries, MPG scores, and service reminders.
- Validates MC (Motor Carrier) numbers dynamically during carrier onboarding flows.
Frontend
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Mantine UI
- Radix UI
- ApexCharts
Backend
- Next.js API Routes
- Custom API Integration Layer
- Firebase Admin SDK
- Mistral AI
Database
- Firebase Firestore
- Cookie-based session state
Infrastructure
- HERE Maps API
- Google Maps Geocoding
- Stripe & PayPal SDKs
- FMCSA MC API
- React Beautiful DnD
04 / ARCHITECTURE
Design Decisions
Module-Based Route Segmentation
Structured administrative dashboards under /admin/[module] (TMS, Brokers, Carriers, Load Boards) controlled by user subscriptions.
Unified Data Contracts
Created a standardized Axios client gateway enforcing an IResponseFormat<T> contract across backend routes.
White-Label Theme Engine
Constructed dynamic CSS variable mapping interfaces with Mantine UI to customize fleet colors based on company preferences.
05 / RETROSPECTIVE
Key Learnings
- Commercial truck routes (height, weight, cargo constraints) require HERE Maps API routing configurations instead of standard consumer GPS API models.
- Proxying external compliance requests through Next.js API routes secures keys but requires query debouncers to limit latency spikes.