Tech Stack
One page per technology — what it does in this dashboard, where to find it, and what it constrains.
This section is a per-technology reference. Every page under stack/ documents one
library, runtime, or primitive that the R2-D2 dashboard depends on at runtime — what it
is, where it shows up in src/, what it constrains, and where it is not used.
The Components section answers "what does this feature do?". This section answers "what is this feature built on?". Every component page has a Built on subsection that cross-links into here.
How the dashboard is layered
flowchart TB
subgraph Edge["Edge (browser tab)"]
React["React 19 RSC + client"]
Tailwind["Tailwind v4"]
Zustand["zustand stores"]
TS["TanStack Table"]
HLS["hls.js"]
LL["Low-latency player engine (in-flight)"]
RG["reagraph"]
OGL["ogl (WebGL)"]
RGL["react-grid-layout"]
Monaco["@monaco-editor/react"]
Scalar["@scalar/api-reference-react"]
Fuma["fumadocs-ui (this site)"]
end
subgraph Server["Next.js server (route handlers)"]
Routes["/api/* route handlers"]
Jose["jose JWT verify"]
YAML["js-yaml config loader"]
end
subgraph Cluster["In-cluster services"]
TB["TrailBase (SQLite-as-API)"]
RS["Restreamer (datarhei/core)"]
RD["ReductStore (snapshot history)"]
KC["Keycloak"]
NB["Netbird overlay"]
end
React --> Routes
Routes --> TB
Routes --> RS
Routes --> RD
Routes --> KC
Routes --> NB
Jose --> Routes
YAML --> RoutesThe split is not "React = thick client". The dashboard does as much on the server as possible — every list page is server-rendered, every mutation goes through a Next route handler, and the browser only owns the things that must live there: WebGL canvases (Galaxy Map, Prologue Crawl), HLS/wasm video, drag layouts, and live status overlays fed by zustand.
Pages in this section
| Page | What it covers |
|---|---|
| Next.js + React | App Router layout, RSC vs client components, dev:persist scripts, port 3210 invariant |
| Tailwind v4 | Token model, the HUD palette, JetBrains Mono, dark-only design |
| Zustand | Which stores exist, what each one owns, when to add a new one (don't) |
| TanStack Table | DataView + src/components/table/ primitives, never roll a <table> by hand |
| hls.js | Current HLS playback engine — latency profile, error recovery, snapshot poster fallback |
| Low-latency player | In-flight custom-chrome wrapper + @ffmpeg/ffmpeg engine for the public viewer (HUD + KLV demux) |
| reagraph | k8s stack graph rendering on the Force/Sense plane |
| ogl | WebGL primitives used by Prologue Crawl and Galaxy Map effects |
| react-grid-layout | Holoprojector layout editor — breakpoints, persistence, drag semantics |
| Monaco | Embedded editor for Node-RED flows and YAML/JSON configs |
| Scalar API Reference | The API explorer route |
| fumadocs | How this docs site is built and how to add a page |
This is a living section. Pages marked stub have the structure laid out but the technical depth is still being written; see the contributor guide for how to fill one in.