A full-stack real-time vehicle dashboard that simulates live telemetry data and streams updates to a frontend using WebSockets (Socket.IO). Built with a Node.js backend, MongoDB Atlas, and a Vite + React frontend.
A production-style full-stack system that simulates a real-time industrial vehicle dashboard.
Unlike static dashboards, this system continuously generates and streams telemetry data (RPM, power, battery, temperature) using an event-driven architecture powered by WebSockets.
The project demonstrates how to design and deploy a live, stateful system with real-time synchronization between backend simulation and frontend UI.
- Real-time, event-driven system (no polling; WebSocket-based updates)
- Stateful simulation engine that continuously evolves system data
- Bidirectional data flow (UI controls directly influence backend simulation loop)
- Fully deployed full-stack system (Vercel + Render + MongoDB Atlas)
- Clean separation between simulation logic, transport layer, and UI
Real-time dashboard with live telemetry updates and warning indicators
- Real-time vehicle telemetry updates via Socket.IO
- Simulated live data stream (speed, RPM, battery, engine status, warnings)
- Live dashboard UI updates without refresh
- Modular React component architecture
- MongoDB Atlas integration for data persistence
- Type-safe frontend and backend (TypeScript)
- Scalable event-driven backend design
Realtime Simulator (server)
↓
Socket.IO Server (Node.js + Express)
↓
WebSocket Events (dashboard:update)
↓
Frontend Client (React + Vite)
↓
Dashboard UI Components
↓
MongoDB Atlas (persistent storage)
┌────────────────────────────────────────────────────────────────────────────┐
│ SYSTEM ARCHITECTURE │
├────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────┐ ┌─────────────────────────┐ │
│ │ FRONTEND │ │ BACKEND │ │
│ │ (React + Vite) │ │ (Express + Node.js) │ │
│ ├─────────────────────────┤ ├─────────────────────────┤ │
│ │ │ │ │ │
│ │ ┌─────────────────┐ │ │ ┌─────────────────┐ │ │
│ │ │ Dashboard UI │ │────▶│ │ Express Server │ │ │
│ │ └────────┬────────┘ │ │ └────────┬────────┘ │ │
│ │ │ │ │ │ │ │
│ │ ┌────────┴────────┐ │ │ ┌────────┴────────┐ │ │
│ │ │ Components │ │ │ │ Dashboard │ │ │
│ │ │ Gauge │ │ │ │ Routes │ │ │
│ │ │ MetricTile │ │ │ └────────┬────────┘ │ │
│ │ │ WarningTile │ │ │ │ │ │
│ │ └────────┬────────┘ │ │ ▼ │ │
│ │ │ │ │ ┌─────────────────┐ │ │
│ │ ┌────────┴────────┐ │ │ │ Socket.IO │ │ │
│ │ │ Services │ │ │ └────────┬────────┘ │ │
│ │ │ API Service │ │ │ │ │ │
│ │ │ Socket Service │ │ │ ▼ │ │
│ │ └────────┬────────┘ │ │ ┌─────────────────┐ │ │
│ │ │ │ │ │ Real-time │ │ │
│ └───────────┼─────────────┘ │ │ Simulator │ │ │
│ │ │ └─────────────────┘ │ │
│ │ │ │ │ │
│ ▼ │ ▼ │ │
│ ┌─────────────────────────┐ │ ┌─────────────────┐ │ │
│ │ MongoDB Atlas │◀ ───│ │ Dashboard │ │ │
│ │ (Database) │ │ │ Model │ │ │
│ └─────────────────────────┘ │ └─────────────────┘ │ │
│ │ │ │
│ └─────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────────┘
- Simulator generates vehicle telemetry data
- Backend emits
dashboard:updatevia Socket.IO - Frontend listens and updates UI in real time
- MongoDB stores relevant dashboard state
┌─────────────────────────────────────────────────────────────────────────────┐
│ DATA FLOW │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ USER FRONTEND BACKEND DB │
│ │ │ │ │ │
│ │ Opens Dashboard │ │ │ │
│ │───────────────────────▶│ │ │ │
│ │ │ GET /api/dashboard │ │ │
│ │ │────────────────────▶│ │ │
│ │ │ │ findOne() │ │
│ │ │ │──────────────────▶│ │
│ │ │ │◀──────────────────│ │
│ │ │ │ │ │
│ │ │ JSON Response │ │ │
│ │ │◀────────────────────│ │ │
│ │ │ │ │ │
│ │ Display Dashboard │ │ │ │
│ │◀───────────────────────│ │ │ │
│ │ │ │ │ │
│ │ WebSocket Connection │ │ │
│ │ │ │ │ │
│ │ Real-time Updates │ │ │ │
│ │◀───────────────────────│◀────────────────────│ │ │
│ │ │ │ │ │
│ │ Change Speed │ │ │ │
│ │───────────────────────▶│ │ │ │
│ │ │ PUT /api/dashboard │ │ │
│ │ │ /speed │ │ │
│ │ │────────────────────▶│ │ │
│ │ │ │ findOneAndUpdate │ │
│ │ │ │──────────────────▶│ │
│ │ │ │◀──────────────────│ │
│ │ │ │ │ │
│ │ │ Updated Data │ │ │
│ │ │◀────────────────────│ │ │
│ │ │ │ │ │
└─────────────────────────────────────────────────────────────────────────────┘
- React (Vite)
- TypeScript
- TailwindCSS
- Socket.IO Client
- Node.js
- Express
- Socket.IO
- TypeScript
- MongoDB Atlas
- Mongoose
| Event | Direction | Description |
|---|---|---|
dashboard:update |
Server → Client | Live vehicle telemetry update |
git clone https://github.com/k1dlima/vehicle-dashboard.git
cd vehicle-dashboardCreate .env file:
MONGO_URI=<your_mongodb_connection_string>
PORT=5000cd server
npm install
npm run devCreate .env file:
VITE_API_URL=<your_backend_url>/apicd client
npm install
npm run dev- Real-time system design using WebSockets
- Event-driven backend architecture
- Separation of concerns (frontend / backend / simulation)
- Full-stack TypeScript application design
- Live UI synchronization without polling
- Socket.IO used for low-latency real-time communication
- Simulation logic isolated from transport layer
- MongoDB used for persistence
- Component-based frontend architecture for scalability
- Frontend (Vercel): https://vehicle-dashboard-omega.vercel.app/
- Backend API (Render): https://vehicle-dashboard-7757.onrender.com/api/dashboard
- Vehicle physics are simplified (no torque curves or real motor modeling)
- Battery drain and charging follow linear approximations
- Temperature is modeled as a function of power, not environment
- Single-vehicle system (no multi-tenant or multi-device architecture)
These tradeoffs were made to prioritize system design, real-time behavior, and full-stack integration over domain-level accuracy.
- Multi-vehicle support (room-based subscriptions)
- Authentication layer for users/vehicles
- Historical analytics dashboard
- Role-based access control
- Redis-based scaling for Socket.IO clustering
This project was built as a full-stack real-time system exercise to demonstrate event-driven architecture, WebSocket communication, and production-style frontend/backend separation.