Inspiration
Every time a streamer hits a hype moment — a clutch play, a massive donation, a raid — chat explodes. But the streamer is often too focused on the game to feel it. We wanted to solve that. What if the overlay itself could pulse, react, and scream hype right alongside the audience?
KICK is building something special — a platform that puts creators first. The Easygo Mini Hackathon was the perfect push to build a tool that makes KICK streams more alive, more interactive, and more fun to watch.
What it does
A real-time stream companion overlay that plugs directly into OBS as a browser source. It listens to your KICK channel via Pusher WebSocket and computes a live Hype Score™ — a composite metric that reacts to chat speed, subscriptions, follows, and chat sentiment in real time.
How we built it
The stack is intentionally lean — no frameworks, no build steps, just Node.js on the backend and vanilla HTML/CSS/JS as the overlay.
Backend connects to KICK via:
OAuth 2.1 + PKCE for secure authentication through our own server Pusher WebSocket (chatrooms.{id}.v2) for zero-latency chat events KICK Public REST API for viewer count polling
Challenges we ran into
No browser dependency for real-time chat The most popular Node.js KICK library (kick-live-connector) uses Playwright under the hood to scrape the chatroom ID — requiring a full 300MB Chromium download just to get one number. We replaced it entirely with a direct HTTPS call to KICK's official API + a raw WebSocket to Pusher. Lighter, faster, and more reliable.
PKCE from scratch Implementing Authorization Code + PKCE without a library meant carefully handling base64url encoding, SHA-256 hashing, state validation, and token storage — all in plain Node.js crypto. Every detail matters in OAuth.
Alert queue timing When multiple events fire at once (a sub + gifted sub + follow in 2 seconds), naively showing all alerts simultaneously looked chaotic. Building a proper async queue with entrance/exit animations and 300ms gaps between cards took several iterations to feel right.
Sentiment scoring on a budget We wanted sentiment analysis without an ML model. A curated keyword dictionary with weighted scoring — combined with the rolling 60-second window — gives surprisingly good signal. It's not perfect, but it's instant and zero-cost.
Accomplishments that we're proud of
OAuth2 PKCE from pure Node.js — No libraries, no shortcuts. We implemented the full Authorization Code + PKCE handshake using only the built-in crypto module. The server generates a cryptographically random code_verifier, computes SHA-256(verifier) as the challenge, validates state on callback, and exchanges the code for a token — all in ~150 lines of clean, readable code.
Zero-dependency real-time connection — Ditching Playwright entirely and going raw WebSocket to Pusher cut our runtime footprint from ~300MB to essentially nothing. The connection is faster, more stable, and works on any machine.
The Hype Score™ actually works — Watching the gauge spike in real time during a sub burst or chat explosion genuinely feels satisfying. The exponential smoothing makes it feel alive, not mechanical.
OBS-ready in one URL — No installs, no configuration on the streaming PC. One browser source URL and the overlay is live. That's the kind of frictionless UX that actually gets adopted.
Full demo mode — Anyone can evaluate the overlay without a live stream or API keys. The judges can see everything working in 30 seconds flat.
What we learned
KICK's OAuth 2.1 PKCE flow is clean and well-documented — implementing the code verifier/challenge handshake from scratch deepened our understanding of modern auth security. Pusher WebSocket is surprisingly easy to use raw — no SDK needed, just a WebSocket connection and a JSON subscribe message. Exponential smoothing makes real-time metrics feel alive rather than jittery — a small formula with a big UX impact. Building an OBS-compatible browser source requires thinking in 1920×1080 with a transparent background — very different from normal web design.
What's next for Hype Tracker
Clip Trigger Integration When the Hype Score crosses a threshold, automatically trigger a clip via KICK's API. Never miss a highlight moment again.
Webhook Support Add official KICK webhook delivery as a parallel event source alongside Pusher — more reliable, officially supported, and opens the door to events Pusher doesn't cover.
Multi-streamer Mode Track hype across multiple channels simultaneously — useful for co-streams, tournaments, and events.
Donation & Tip Alerts Integrate StreamElements and DeStream APIs to pull tip events into the hype calculation and display themed tip alerts.
AI Sentiment Replace keyword scoring with a lightweight on-device transformer model for accurate, multilingual sentiment — so international KICK communities get the same quality signal.
Mobile Dashboard A companion mobile view showing the streamer's live hype stats, top chatters, and alert history — glanceable without looking at the stream.
Customizable Themes Let streamers brand the overlay with their own colors, fonts, and widget layouts through the setup UI — no code required.
KICK Marketplace Package Hype Tracker as a one-click installable app on KICK's developer ecosystem — making it accessible to every streamer on the platform.
Log in or sign up for Devpost to join the conversation.