← Back to Portfolio Fox Tranquility →

🚛 Clutch Transportation

React Native SaaS • Fleet Management & Logistics Platform

Quick Navigation

Feature Walkthrough Professional Summary Most Marketable Skills Architecture Key Achievements Full Tech Stack

✨ Feature Demonstrations

Multi-Role Dashboard System

Four distinct role-based dashboards — Driver, Dispatcher, Client, and Admin — each with a tailored interface, navigation, and feature set. Login automatically routes each user to their correct experience with no manual selection required.
Expo Router v6 Zustand Auth Store TypeScript RBAC

Role Routing Flow

  1. User authenticates via email/password or Apple Sign-In
  2. JWT token decoded — role extracted (driver / dispatcher / client / admin)
  3. Expo Router redirects to the correct route group: (driver), (dispatcher), (client), or (admin)
  4. Each group has its own tab layout, screens, and navigation stack
  5. Admin inherits all dispatcher capabilities plus full fleet oversight
Role-based routing is implemented via Expo Router layout groups. Each group's _layout.tsx checks the Zustand auth store and redirects unauthorized users back to (auth). This keeps role gating declarative at the navigation layer, not scattered across individual screens.

Real-Time Fleet Tracking

Dispatchers and admins see a live map of all active drivers, with color-coded markers indicating HOS status (Driving / On Duty / Off Duty / Sleeper Berth). GPS positions refresh every 30 seconds via background location tracking.
React Native Maps expo-location Expo Task Manager TanStack Query

Fleet Map Flow

  1. Driver app registers background location task via Expo Task Manager
  2. GPS coordinates posted to API every 30 seconds, even when app is backgrounded
  3. Dispatcher opens Fleet Map tab — all driver positions rendered as map markers
  4. Marker color encodes HOS status at a glance (green/yellow/red/blue)
  5. Tap any marker to view driver name, current load, and HOS summary
Background location is handled by Expo Task Manager's defineTaskAsync — this keeps GPS posting alive even when the app is minimized. The dispatcher map polls FleetPosition records via TanStack Query on a 30-second interval, showing stale-time indicators when a driver has gone offline.

HOS Compliance Engine

A full Hours of Service (HOS) compliance system tracking driving hours, on-duty time, 8-day cumulative hours, and mandatory break requirements — with real-time violation detection and alert notifications. The HOSBar component provides a visual hours-remaining indicator.
React Native expo-notifications TanStack Query TypeScript

HOS Tracking Flow

  1. Driver logs status changes (Driving / On Duty / Off Duty / Sleeper Berth)
  2. Server calculates running totals: daily driving, on-duty, 8-day cumulative
  3. HOSBar component visualizes hours consumed vs. remaining with color thresholds
  4. Push notification fires when driver approaches 11-hour driving limit
  5. Violation alert triggers if limits are exceeded — visible to driver and dispatcher
  6. 30-minute break requirement tracked and enforced after 8 hours on duty
HOS rules are enforced server-side on every status change, returning a HOSSummary object with current hours, violation flags, and next required action. The client HOSBar renders progress bars with threshold-based color coding (green → yellow → red) as hours accumulate.

Multi-Step Load Request Wizard

Clients submit load requests through a 5-step guided wizard: address entry with real-time geocoding validation, cargo type selection with dynamic pricing multipliers, weight and notes, route map preview, and submission. Pricing updates live as selections change.
expo-location (Geocoding) React Native Maps TypeScript Zod

Load Request Flow

  1. Client enters pickup and delivery addresses — geocoding validates and resolves coordinates
  2. Cargo type selected: Standard, Refrigerated (+15%), Oversized (+25%), Hazmat (+40%)
  3. Weight and special handling notes entered
  4. Route previewed on map with estimated mileage and calculated price shown
  5. Client confirms and submits — request enters dispatcher queue as Pending
Address validation uses expo-location's geocodeAsync to resolve text addresses to coordinates before allowing the user to advance. Dynamic pricing is computed client-side from base rate × distance × cargo multiplier, then re-validated server-side on submission to prevent tampering.

Dispatch & Load Management

Dispatchers manage the full load lifecycle from the moment a client submits a request through delivery. Load assignment, status transitions, Bill of Lading signature capture, and maintenance issue reporting with photo evidence are all handled in-app.
React Native Expo Camera Expo Image Picker TanStack Query

Load Lifecycle

  1. Client submits request → appears in dispatcher queue as Pending
  2. Dispatcher reviews, selects an available driver, and assigns load → Assigned
  3. Driver accepts and departs → status advances to InTransit
  4. Driver captures BOL signature on delivery → Delivered
  5. Dispatcher or admin can cancel at any stage with reason tracking
  6. Driver reports vehicle issues with severity (Low/Medium/High) + camera photo
The BOLSignature component uses a canvas-based touch gesture handler for signature capture, encoding the result as a base64 image attached to the load record. Maintenance photos are captured via expo-camera or selected from the gallery via expo-image-picker, then uploaded as multipart form data.

IFTA Reporting & Admin Oversight

Admins have full visibility into fleet operations: IFTA (International Fuel Tax Agreement) report generation, vehicle inventory management, maintenance ticket tracking, and comprehensive HOS monitoring across all drivers simultaneously.
React Native TanStack Query expo-file-system TypeScript

Admin Capabilities

  1. IFTA report generated from mileage and fuel data per jurisdiction per quarter
  2. Vehicle inventory managed with make, model, VIN, and maintenance history
  3. Maintenance tickets reviewed by severity — admin resolves or escalates
  4. Fleet-wide HOS dashboard shows all drivers' current compliance status
  5. Admin can modify any load, driver profile, or vehicle record directly
IFTA data is aggregated server-side by summing load distance records grouped by state/province boundary crossings and fuel purchase records. The admin panel is a 9-tab Expo Router layout, all gated by admin role check in the layout's useEffect, with a shared AdminDashboard component providing the overview summary.

📋 Professional Summary

Enterprise Fleet Management SaaS — React Native / Expo / TanStack Query Clutch Transportation is an enterprise-grade commercial trucking SaaS platform built for iOS, Android, and web. The app serves four distinct user roles — Driver, Dispatcher, Client, and Admin — each with a purpose-built interface, navigation stack, and feature set, all sharing a single React Native codebase.

The platform's core engineering challenges span multiple domains: real-time GPS fleet tracking via Expo Task Manager's background location API, a full Hours of Service compliance engine with violation detection and push notification alerts, a 5-step load request wizard with live geocoding and dynamic cargo pricing, Bill of Lading signature capture, and IFTA fuel tax report generation. TanStack Query v5 provides offline-first server state with background sync, while Zustand handles lightweight client auth state.

Role-based routing is enforced at the navigation layer via Expo Router layout groups, keeping authorization logic declarative and out of individual screens. The result is a production-ready, feature-complete logistics platform that demonstrates deep expertise in cross-platform mobile architecture, compliance engineering, real-time data, and enterprise business logic.

🎯 Most Marketable Skills

Mobile & Cross-Platform

  • React Native with Expo 54
  • Expo Router v6 (file-based routing)
  • EAS Build (cloud CI/CD)
  • Apple Sign-In (native OAuth)
  • iOS / Android / Web from one codebase

Real-Time & Maps

  • React Native Maps v1.20
  • expo-location + geocoding
  • Expo Task Manager (background GPS)
  • 30-second fleet position refresh
  • HOS status color-coded markers

State & Data

  • TanStack Query v5 (offline-first)
  • Zustand v5 auth store
  • Axios with secure token handling
  • expo-secure-store (credentials)
  • Background sync & stale-time management

Compliance & Business Logic

  • HOS engine (violation detection, break alerts)
  • IFTA fuel tax reporting
  • Dynamic pricing (cargo type multipliers)
  • BOL signature capture (canvas-based)
  • Maintenance ticket severity tracking

🏗️ Architecture

Client App

  • React Native 0.81 / React 19
  • Expo 54 SDK
  • TypeScript 5.9
  • Custom dark theme system
  • Shared component library

Navigation & Roles

  • Expo Router v6 (file-based)
  • Role groups: driver/dispatcher/client/admin
  • Layout-level RBAC guards
  • Auto-redirect on login
  • Stack + tab navigation

State Management

  • TanStack Query v5 (server state)
  • Zustand v5 (auth store)
  • Axios HTTP client
  • JWT token auth headers
  • Offline-first cache strategy

Native Services

  • expo-location (GPS + geocoding)
  • expo-notifications (push)
  • expo-camera + image-picker
  • expo-secure-store (tokens)
  • Expo Task Manager (background)

Admin & Compliance

  • 9-tab admin layout
  • HOS engine + violation alerts
  • IFTA report generation
  • Vehicle inventory mgmt
  • Fleet-wide HOS dashboard

🏆 Key Achievements

👥

Multi-Role Auth System

Four role-based Expo Router layouts with RBAC guards — Driver, Dispatcher, Client, Admin — each auto-routed on login from a single JWT token.

🗺️

Real-Time Fleet Map

Live GPS marker map with 30-second background location updates, HOS status color coding, and driver detail cards on tap.

⏱️

HOS Compliance Engine

Full Hours of Service tracking — driving hours, on-duty time, 8-day cumulative, break requirements, violation detection, and push alerts.

💰

Dynamic Pricing Wizard

5-step load request flow with live geocoding, route map preview, and real-time pricing — Standard, Refrigerated +15%, Oversized +25%, Hazmat +40%.

📡

Offline-First Data Layer

TanStack Query v5 with background sync and stale-time management — the app remains functional and informative even without a live connection.

🍎

Apple Sign-In

Native Apple OAuth authentication for iOS users via expo-apple-authentication — seamless single-tap login with secure token storage.

⚙️ Full Tech Stack

React Native 0.81 React 19 Expo 54 TypeScript 5.9 Expo Router v6 TanStack Query v5 Zustand v5 Axios React Native Maps expo-location Expo Task Manager expo-notifications expo-camera expo-secure-store Apple Sign-In EAS Build RBAC HOS Compliance IFTA Reporting Geocoding API
← Back to Portfolio