How flytbaseailabs/flytbase-ahc-swe-qa-hackathon works
FlytBase Cockpit is a browser-based drone monitoring and control app backed by a simulated fleet. The main workflow is: the simulator advances drone and dock state and publishes typed telemetry; the backend relays it over Socket.IO; the cockpit subscribes, stores updates, and renders devices, map, telemetry, alerts, and video. A separate control panel routes simulation, flight, video, and fault operations through the backend. README capabilities supplement the sampled code; arrows for unsampled implementation details are omitted.
Main entry points: CockpitPage.tsx Cockpit page · server.ts Socket hub · app.ts HTTP application · router.ts Control API
Components 27
Cockpit UI
- Cockpit page
frontend/src/pages/CockpitPage.tsx - App routing
frontend/src/App.tsx - Device list
frontend/src/components/DeviceList.tsx - Map and tracks
frontend/src/components/CesiumMap.tsx - Telemetry panel
frontend/src/components/TelemetryPanel.tsx - Alert toasts
frontend/src/components/AlertToasts.tsx - Video tile
frontend/src/components/VideoTile.tsx - Device subscriptions
frontend/src/hooks/useDeviceSubscriptions.ts - Socket client
frontend/src/socket/socket-client.ts - Telemetry store
frontend/src/store/telemetry.store.ts - HTTP API client
frontend/src/api/client.ts
Backend services
- HTTP application
backend/src/app.ts - Socket hub
backend/src/socket/server.ts - Retained telemetry
backend/src/socket/retained.ts - Control API
backend/src/control/router.ts - Simulator client
backend/src/control/sim-client.ts - Fault controller
backend/src/control/faults.ts - Video controller
backend/src/control/video.ts
Fleet simulation
- Fleet world
simulator/src/world.ts - Drone state
simulator/src/drone.ts - Dock state
simulator/src/dock.ts - Simulator control API
simulator/src/control-server.ts - Telemetry publisher
simulator/src/publisher.ts
Shared protocol
- Topics and payloads
protocol/src/index.ts
Video delivery
- Media streaming service
Other components
- Pilot / browser
- Control panel user
Connections 31
- Pilot / browser → App routing: opens cockpit
- App routing → Cockpit page: routes to
- Cockpit page → HTTP API client: requests devices
- HTTP API client → HTTP application: HTTP requests
- HTTP application → Simulator client: queries devices
- Simulator client → Simulator control API: HTTP requests
- Cockpit page → Device subscriptions: subscribes devices
- Device subscriptions → Socket client: registers topics
- Socket client → Socket hub: Socket.IO subscriptions
- Socket hub → Retained telemetry: reads and stores
- Socket hub → Telemetry store: sends telemetry
- Device subscriptions → Telemetry store: applies payloads
- Cockpit page → Map and tracks: renders fleet
- Cockpit page → Telemetry panel: renders readings
- Cockpit page → Alert toasts: renders alerts
- Cockpit page → Video tile: renders video
- Video tile → Media streaming service: requests WHEP stream
- Control panel user → Control API: issues controls
- HTTP application → Control API: mounts routes
- Control API → Simulator client: forwards simulation and flight controls
- Control API → Video controller: starts or stops streams
- Control API → Fault controller: applies fault requests
- HTTP application → Socket hub: attaches Socket.IO
- Socket hub → Simulator client: forwards socket commands
- Simulator control API → Fleet world: controls fleet
- Fleet world → Drone state: advances drones
- Fleet world → Dock state: advances docks
- Fleet world → Telemetry publisher: produces telemetry
- Telemetry publisher → Socket hub: publishes telemetry
- HTTP application → Video controller: configures video
- Video controller → Media streaming service: manages streams