Real-Time Transport Dashboard Mapbox

I need a skilled React / Next.js developer to turn our transport control-center concept into a production-ready web dashboard. The heart of the application is live bus tracking and fleet monitoring, so every component must update in real time through WebSockets and reflect instantly on a Mapbox map.

Beyond the map, I want concise graphs and charts (Recharts, D3, or similar—your call) to surface key metrics such as on-time performance, vehicle health, and route load. Route management, trip scheduling, passenger analytics, and driver behavior modules will follow the same design language you establish for the core tracking views and pull all data from our existing REST and WebSocket APIs.

Essential tasks you will handle:
• Build responsive Next.js pages and shared components for tracking, fleet overview, and alerts.
• Configure Mapbox GL JS to show vehicle locations, routes, and geofenced areas with smooth animation.
• Wire up live data streams; handle disconnections gracefully.
• Design and code reusable graph/chart widgets that accept JSON and render instantly.
• Connect every UI action to backend endpoints—no stub data by delivery time.
• Package the project with clear environment variables and a short README so our DevOps team can deploy without friction.

Acceptance criteria:
1. Vehicles update on the map with sub-three-second latency using our test feed.
2. Graphs auto-refresh without page reload and match API numbers exactly.
3. Lighthouse performance score ≥ 90 on desktop.
4. Code passes our ESLint configuration and includes TypeScript typings.
5. A short handover call and repository walkthrough conclude the engagement.

If this aligns with your expertise in React, Next.js, Mapbox, WebSockets, and modern data-viz libraries, let’s move forward right away.