How wael-jaber/ev-fleet-telemetry-dashboard works
EV Fleet Telemetry Dashboard simulates fleet telemetry on the backend, streams updates over WebSockets, and presents live fleet status, analytics, and locations in a customizable React dashboard. The main path is simulation → telemetry broadcast → frontend state → dashboard views; connection status and notifications are a supporting path. Backend simulation internals and several UI capabilities are represented at the directory level because their implementations were not sampled.
Main entry points: Dashboard.tsx Dashboard shell · WebSocketHandler.tsx WebSocket handler · App.tsx React application · WebSocketManager.ts WebSocket manager
Components 24
Backend simulation
- HTTP server
backend/src/server/server.ts - Simulation manager
backend/src/simulations/simulationManager/simManager.ts - Fleet simulator
backend/src/simulations/fleet/fleet.ts - Vehicle model
backend/src/simulations/vehicle/vehicle.ts - Vehicle factory
backend/src/simulations/vehicleFactory/vehicleFactory.ts - Route data
backend/src/simulations/vehicleFactory/routes.ts
Telemetry transport
- WebSocket manager
backend/src/websocket/WebSocketManager.ts - WebSocket connection
- WebSocket handler
frontend/src/websocket/WebSocketHandler.tsx - Shared message types
shared/types/index.ts
Frontend state
- Redux store
frontend/src/redux/store/index.ts - Telemetry state
frontend/src/redux/store/slices/telemetrySlice/telemetrySlice.ts - Connection state
frontend/src/redux/store/slices/configSlice.ts - Notifications
frontend/src/hooks/useNotification.ts
Dashboard views
- React application
frontend/src/App.tsx - Dashboard shell
frontend/src/containers/Dashboard/Dashboard.tsx - Fleet overview
frontend/src/containers/FleetOverview/FleetOverview.tsx - Vehicle list
frontend/src/containers/VehicleList/VehicleList.tsx - Live map
frontend/src/containers/Panels/MapPanel/MapPanel.tsx - Battery analytics
frontend/src/containers/Panels/BatteryPanel/BatteryPanel.tsx - Custom panel layout
frontend/src/containers/DashboardGrid/DashboardGrid.tsx - Theme controls
frontend/src/theme/ThemeProvider.tsx - Language controls
frontend/src/containers/LanguageSwitcher/LanguageSwitcher.tsx
Other components
- Fleet operator
Connections 24
- Fleet operator → React application: views
- HTTP server → WebSocket manager: creates
- WebSocket manager → Simulation manager: starts
- Simulation manager → Fleet simulator: starts updates
- Fleet simulator → Vehicle model: collects telemetry
- Fleet simulator → Vehicle factory: creates vehicles
- Vehicle factory → Route data: uses routes
- Simulation manager → WebSocket manager: dispatches telemetry
- WebSocket manager → WebSocket connection: broadcasts updates
- WebSocket connection → WebSocket handler: delivers messages
- WebSocket handler → Telemetry state: dispatches updates
- WebSocket handler → Connection state: updates status
- WebSocket handler → Notifications: reports connection events
- React application → WebSocket handler: mounts
- React application → Dashboard shell: renders
- React application → Redux store: provides state
- Dashboard shell → Fleet overview: presents fleet stats
- Dashboard shell → Vehicle list: shows vehicles
- Dashboard shell → Live map: shows locations
- Dashboard shell → Battery analytics: shows battery analytics
- Dashboard shell → Custom panel layout: arranges panels
- Dashboard shell → Theme controls: supports themes
- Dashboard shell → Language controls: supports languages
- Redux store → Telemetry state: holds state