# flytbaseailabs/flytbase-ahc-swe-qa-hackathon architecture

> Architecture diagram of the GitHub repository flytbaseailabs/flytbase-ahc-swe-qa-hackathon, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon
- Repository: https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon

## Overview

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: [`frontend/src/pages/CockpitPage.tsx`](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/pages/CockpitPage.tsx) (Cockpit page), [`backend/src/socket/server.ts`](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/socket/server.ts) (Socket hub), [`backend/src/app.ts`](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/app.ts) (HTTP application), [`backend/src/control/router.ts`](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/router.ts) (Control API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Cockpit UI"]
  node_cockpit_page["Cockpit page<br/>[CockpitPage.tsx]"]
  node_app["App routing<br/>[App.tsx]"]
  node_device_list["Device list<br/>[DeviceList.tsx]"]
  node_map["Map and tracks<br/>[CesiumMap.tsx]"]
  node_telemetry_panel["Telemetry panel<br/>[TelemetryPanel.tsx]"]
  node_alerts["Alert toasts<br/>[AlertToasts.tsx]"]
  node_video_tile["Video tile<br/>[VideoTile.tsx]"]
  node_device_subscriptions["Device subscriptions"]
  node_socket_client["Socket client<br/>[socket-client.ts]"]
  node_telemetry_store[("Telemetry store<br/>[telemetry.store.ts]")]
  node_api_client["HTTP API client<br/>[client.ts]"]
end

subgraph group_backend["Backend services"]
  node_backend_app["HTTP application<br/>[app.ts]"]
  node_socket_server["Socket hub<br/>[server.ts]"]
  node_retained_store[("Retained telemetry<br/>[retained.ts]")]
  node_control_router["Control API<br/>[router.ts]"]
  node_sim_client["Simulator client<br/>[sim-client.ts]"]
  node_fault_controller["Fault controller<br/>[faults.ts]"]
  node_video_controller["Video controller<br/>[video.ts]"]
end

subgraph group_simulator["Fleet simulation"]
  node_sim_world["Fleet world<br/>[world.ts]"]
  node_sim_drone["Drone state<br/>[drone.ts]"]
  node_sim_dock["Dock state<br/>[dock.ts]"]
  node_sim_control["Simulator control API<br/>[control-server.ts]"]
  node_sim_publisher["Telemetry publisher<br/>[publisher.ts]"]
end

subgraph group_protocol["Shared protocol"]
  node_protocol_types["Topics and payloads<br/>[index.ts]"]
end

subgraph group_media["Video delivery"]
  node_video_service["Media streaming service"]
end

node_pilot(("Pilot / browser"))
node_control_operator(("Control panel user"))

node_pilot -->|"opens cockpit"| node_app
node_app -->|"routes to"| node_cockpit_page
node_cockpit_page -->|"requests devices"| node_api_client
node_api_client -->|"HTTP requests"| node_backend_app
node_backend_app -->|"queries devices"| node_sim_client
node_sim_client -->|"HTTP requests"| node_sim_control
node_cockpit_page -->|"subscribes devices"| node_device_subscriptions
node_device_subscriptions -->|"registers topics"| node_socket_client
node_socket_client -->|"Socket.IO subscriptions"| node_socket_server
node_socket_server -->|"reads and stores"| node_retained_store
node_socket_server -->|"sends telemetry"| node_telemetry_store
node_device_subscriptions -->|"applies payloads"| node_telemetry_store
node_cockpit_page -->|"renders fleet"| node_map
node_cockpit_page -->|"renders readings"| node_telemetry_panel
node_cockpit_page -->|"renders alerts"| node_alerts
node_cockpit_page -->|"renders video"| node_video_tile
node_video_tile -.->|"requests WHEP stream"| node_video_service
node_control_operator -->|"issues controls"| node_control_router
node_backend_app -->|"mounts routes"| node_control_router
node_control_router -->|"forwards simulation and flight controls"| node_sim_client
node_control_router -->|"starts or stops streams"| node_video_controller
node_control_router -->|"applies fault requests"| node_fault_controller
node_backend_app -->|"attaches Socket.IO"| node_socket_server
node_socket_server -->|"forwards socket commands"| node_sim_client
node_sim_control -->|"controls fleet"| node_sim_world
node_sim_world -->|"advances drones"| node_sim_drone
node_sim_world -->|"advances docks"| node_sim_dock
node_sim_world -->|"produces telemetry"| node_sim_publisher
node_sim_publisher -->|"publishes telemetry"| node_socket_server
node_backend_app -->|"configures video"| node_video_controller
node_video_controller -.->|"manages streams"| node_video_service

click node_cockpit_page "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/pages/CockpitPage.tsx"
click node_app "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/App.tsx"
click node_device_list "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/DeviceList.tsx"
click node_map "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/CesiumMap.tsx"
click node_telemetry_panel "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/TelemetryPanel.tsx"
click node_alerts "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/AlertToasts.tsx"
click node_video_tile "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/VideoTile.tsx"
click node_device_subscriptions "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/hooks/useDeviceSubscriptions.ts"
click node_socket_client "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/socket/socket-client.ts"
click node_telemetry_store "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/store/telemetry.store.ts"
click node_api_client "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/api/client.ts"
click node_backend_app "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/app.ts"
click node_socket_server "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/socket/server.ts"
click node_retained_store "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/socket/retained.ts"
click node_control_router "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/router.ts"
click node_sim_client "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/sim-client.ts"
click node_fault_controller "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/faults.ts"
click node_video_controller "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/video.ts"
click node_sim_world "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/world.ts"
click node_sim_drone "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/drone.ts"
click node_sim_dock "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/dock.ts"
click node_sim_control "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/control-server.ts"
click node_sim_publisher "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/publisher.ts"
click node_protocol_types "https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/protocol/src/index.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_cockpit_page,node_app,node_device_list,node_map,node_telemetry_panel,node_alerts,node_video_tile,node_device_subscriptions,node_socket_client,node_telemetry_store,node_api_client,node_pilot,node_control_operator toneBlue
class node_backend_app,node_socket_server,node_retained_store,node_control_router,node_sim_client,node_fault_controller,node_video_controller toneAmber
class node_sim_world,node_sim_drone,node_sim_dock,node_sim_control,node_sim_publisher toneMint
class node_protocol_types toneRose
class node_video_service toneIndigo
```

## Components

### Cockpit UI

- [Cockpit page](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/pages/CockpitPage.tsx): `frontend/src/pages/CockpitPage.tsx`
- [App routing](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Device list](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/DeviceList.tsx): `frontend/src/components/DeviceList.tsx`
- [Map and tracks](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/CesiumMap.tsx): `frontend/src/components/CesiumMap.tsx`
- [Telemetry panel](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/TelemetryPanel.tsx): `frontend/src/components/TelemetryPanel.tsx`
- [Alert toasts](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/AlertToasts.tsx): `frontend/src/components/AlertToasts.tsx`
- [Video tile](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/components/VideoTile.tsx): `frontend/src/components/VideoTile.tsx`
- [Device subscriptions](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/hooks/useDeviceSubscriptions.ts): `frontend/src/hooks/useDeviceSubscriptions.ts`
- [Socket client](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/socket/socket-client.ts): `frontend/src/socket/socket-client.ts`
- [Telemetry store](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/store/telemetry.store.ts): `frontend/src/store/telemetry.store.ts`
- [HTTP API client](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/frontend/src/api/client.ts): `frontend/src/api/client.ts`

### Backend services

- [HTTP application](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/app.ts): `backend/src/app.ts`
- [Socket hub](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/socket/server.ts): `backend/src/socket/server.ts`
- [Retained telemetry](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/socket/retained.ts): `backend/src/socket/retained.ts`
- [Control API](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/router.ts): `backend/src/control/router.ts`
- [Simulator client](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/sim-client.ts): `backend/src/control/sim-client.ts`
- [Fault controller](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/faults.ts): `backend/src/control/faults.ts`
- [Video controller](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/backend/src/control/video.ts): `backend/src/control/video.ts`

### Fleet simulation

- [Fleet world](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/world.ts): `simulator/src/world.ts`
- [Drone state](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/drone.ts): `simulator/src/drone.ts`
- [Dock state](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/dock.ts): `simulator/src/dock.ts`
- [Simulator control API](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/control-server.ts): `simulator/src/control-server.ts`
- [Telemetry publisher](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/simulator/src/publisher.ts): `simulator/src/publisher.ts`

### Shared protocol

- [Topics and payloads](https://github.com/flytbaseailabs/flytbase-ahc-swe-qa-hackathon/blob/main/protocol/src/index.ts): `protocol/src/index.ts`

### Video delivery

- **Media streaming service**

### Other components

- **Pilot / browser**
- **Control panel user**

## Connections

- 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