Real-Time Drone Fleet Monitoring Dashboard

Minimal but production-style reference project centered on realtime telemetry delivery, websocket architecture, Redis Pub/Sub fanout, and efficient frontend rendering.

Structure

• frontend: React, TypeScript, Vite, Tailwind, Zustand, React Leaflet
• backend: Node.js, TypeScript, Express, Socket.IO, Redis Pub/Sub
• docs: architecture, websocket flow, and scaling notes

Run locally

Start Redis:

docker compose up redis

Install dependencies:

cd backend && npm install
cd frontend && npm install

Run backend:

cd backend
npm run dev

Run frontend:

cd frontend
npm run dev

Test pub/sub simulation

The backend simulator can be controlled through simple API endpoints:

curl http://localhost:4000/api/simulator
curl -X POST http://localhost:4000/api/simulator/start
curl -X POST http://localhost:4000/api/simulator/stop
curl -X POST http://localhost:4000/api/simulator/tick

Useful for testing:

• set SIMULATOR_AUTOSTART=false if you want manual control
• call /api/simulator/tick to publish one telemetry cycle through Redis and websocket fanout
• call /api/simulator/start to resume scheduled movement every TELEMETRY_TICK_MS

Realtime design highlights

• simulator emits telemetry changes every 2 seconds
• backend publishes field-level patches through Redis
• websocket layer batches short bursts and fans out only to subscribed drone rooms
• frontend hydrates from one snapshot, then merges incremental updates into Zustand
• dashboard renders only selected drones and animates marker movement between updates

Docs

• docs/realtime-architecture.md
• docs/websocket-flow.md
• docs/scaling-notes.md