-
-
-
-
RaidRelay landing: the first 90 seconds, designed.
Inspiration
A Twitch raid should feel like two communities meeting, but it often arrives as a loud alert followed by an awkward pause. Incoming viewers lack context, the receiving streamer loses momentum, and the most important first 90 seconds are left to chance. RaidRelay turns that fragile moment into a synchronized, participatory broadcast ritual.
What it does
RaidRelay coordinates five server-authoritative phases:
- Landing — incoming and receiving communities meet through an OBS-ready overlay.
- Context — a “Now Card” explains the live activity, stakes, and one community norm.
- Choice & voting — both communities vote in Twitch chat with
!relay Aor!relay B; no arbitrary chat is rendered on stream. - Result — the broadcaster can approve, override, or skip the winning choice.
- Cooldown — the overlay dissolves back to transparent idle.
The broadcaster also has an instant panic-clear control. A deterministic Judge Demo Lab reproduces the complete experience at normal speed or 10× speed.
How we built it
- Deterministic state engine: phase timing, monotonic sequence numbers, tie-breaking, deduplication, and HMAC participation receipts.
- Fastify backend: OAuth routes, WebSockets, WebAssembly SQLite persistence, and EventGuard rejection of duplicate or stale Twitch events.
- Twitch: OAuth 2.0, EventSub WebSockets for
channel.raidandchannel.chat.message, plus Helix Send Chat Message. - React broadcast UI: broadcaster console, transparent 1920×1080 OBS overlay, and mobile-responsive judge lab.
- Privacy: ephemeral salted HMAC hashes enforce one-person-one-vote without persisting raw viewer IDs.
How OpenAI Codex was used
Codex Session ID: 93a16a2b-a2a0-461f-851b-7a1e342fe97f
Codex helped architect state invariants, implement verified vertical slices, diagnose race conditions, migrate persistence from a failing native module to sql.js, harden Twitch OAuth/EventSub boundaries, polish the UI, and build the automated verification pipeline.
Challenges we ran into
The hardest problem was making a live-audience feature expressive and safe. Rendering chat directly creates a hate-raid and injection risk, so RaidRelay accepts only two exact voting commands and renders numeric aggregates. OBS sources can reconnect at any moment, so state is server-authoritative and every overlay receives the latest versioned snapshot immediately.
We also isolated demo routes from authenticated broadcaster state, encrypted OAuth tokens at rest with AES-256-GCM, and fixed EventSub reconnect races with generation-aware socket ownership.
Accomplishments we are proud of
- 61/61 automated checks passed: 53 Vitest tests and 8 Playwright journeys.
- 0 Axe violations in tested states across desktop and mobile.
- 0 exposed secrets in the repository and Git history.
- Panic clear benchmark: 0.2 µs mean / 1.4 µs p99 for the in-memory transition over 1,000 iterations.
- Live broadcaster isolation, token lifecycle handling, reconnect watchdogs, and non-root Docker verification.
What we learned
Designing for live communities is not only a latency problem; it is a trust problem. The safest interaction has a deliberately small valid vocabulary, deterministic observable state, and immediate broadcaster control.
What’s next
Twitch Extension packaging, relay chains for charity marathons, and broadcaster-owned sound stings.
Links
Built With
- eventsub
- openai
- tailwind
- typescript
