OverFight

• 

  Thumbnail

Inspiration

A small Twitch community can be incredibly active, but raw audience size often decides who wins a community challenge. I wanted to turn that around.

What if 200 engaged viewers could beat 20,000 passive ones?

Overfight turns that question into a visual battle between two streamers and their communities.

What it does

Each community reveals its streamer’s logo over the opponent’s facecam, one grid cell at a time. Fully cover the rival’s facecam to win.

Viewers choose their role through chat:

• Talk to attack: a normal message contributes to covering the opposing facecam.
• Type !shield to defend: remove cells from your own streamer’s facecam.
• Participation beats spam: each viewer counts once within a rolling ten-second window. Their latest message determines their action.
• Audience size is normalized: power depends on participation relative to the live viewer count, with safeguards for small streams and delayed counts.
• Money has limits: subscriptions, gifts and Bits trigger visible bursts, capped per event and per team. Financial bursts cannot place the final cell.

The reveal spirals inward, keeping the streamer’s face visible until the final moments. The finishing participant gets the spotlight, the mosaic explodes, contributors appear, and the overlay clears.

How I built it with Codex

I built Overfight with Codex in one continuous conversation, from the initial concept through the submission video.

We first challenged the rules and wrote a PRD. Then we built the project in stages: a deterministic game engine, automated tests, a playable simulation, transparent Canvas overlays, administrator protection, and Twitch integration.

The stack uses TypeScript, NestJS with Fastify, WebSockets and Sharp, with plain HTML, CSS and Canvas for OBS compatibility.

The server owns the match state. Twitch OAuth authorizes broadcasters, EventSub delivers chat and supported financial events, and Get Streams supplies viewer counts. Tokens stay on the server; overlays are read-only.

Codex also helped create the original avatars, refine the visual design, investigate live behavior, and write the FFmpeg scripts used to edit the demonstration video.

Codex Session ID : 01a19933-eceb-7ec1-9bc5-6c3dbf65f19a

Challenges and lessons learned

The biggest challenge was making fairness understandable and visible. Normalizing participation, preventing duplicate contributions, locking team membership and limiting financial bonuses all needed explicit rules and tests.

Another challenge was preserving logo detail: the gameplay grid is a reveal mask, rather than a low-resolution replacement for the uploaded image.

Testing alone also taught me to separate implementation from evidence. A single real participant produces a subtle visual change, so the video combines a magnified live test with a clearly labeled simulated duel.

What is verified

A real Twitch broadcast and a separate participant account verified chat reception, accepted attack and shield actions, and increasing target coverage. The full duel, financial bursts and finale are demonstrated with synthetic inputs through the same game engine.

A complete duel between two simultaneous real broadcasts and real paid events remain unverified. The account-free demo makes the complete experience reproducible.

Small chat. Big fight. Your community is your power.

Built With

• codex
• css3
• eventsub
• fastify
• ffmpeg
• html5
• nestjs
• node.js
• obs
• python
• twitchapi
• typescript
• websockets