Wheel Widget
Wheel Widget is a Twitch chat-integrated tool that lets viewers join and spin an interactive giveaway wheel live on stream.
Project Overview
Wheel Widget is a real-time Twitch integration that allows viewers to join an interactive giveaway wheel through chat commands. The system processes chat messages, manages participant entries, and synchronizes updates with a live browser overlay used in streaming software such as OBS. When the streamer spins the wheel on stream, viewers can watch in real time as the system randomly selects a winner from the participant pool.
Tech Stack
Frontend
Backend
Database
Other
Interactive Twitch Integration
Wheel Widget is an interactive streaming tool that allows Twitch viewers to participate in live giveaways or events directly through chat. Viewers can join a spinning wheel through a chat command, and the streamer can display the wheel live on their stream using a browser source. When the wheel spins, viewers can watch in real time as the winner is selected. The project originally began as a tool built for a specific streamer who wanted a simple way to run interactive giveaways with their audience. At the time, the streamer had a much smaller community, but the channel has since grown significantly and is now one of the larger communities on the platform. Building the tool early on required designing it in a way that could handle growth and increased participation over time. From the beginning, the main focus of the project was functionality and reliability rather than visual polish. The goal was to create a system that worked consistently during live broadcasts, even when large numbers of viewers attempted to join at the same time. The UI was intentionally kept simple so that most of the effort could be directed toward building a stable backend system and reliable real-time communication between chat, the backend service, and the browser overlay.
Twitch Chat Integration and Real-Time Communication
One of the first technical challenges was learning how to interact with Twitch chat programmatically. Twitch provides chat access through an IRC-based service, so I needed to learn how the IRC protocol works and how to connect to Twitch’s chat infrastructure. Using this system, the backend service listens for chat messages and processes commands used to join the wheel. When viewers type the join command in chat, the backend validates the message, prevents duplicate entries, and adds the user to the participant list. Because chat activity can increase rapidly during live events, the system also had to be designed to process these messages efficiently without causing delays. To ensure the on-stream wheel updated in real time, I also implemented WebSocket communication between the backend and the browser overlay. This allowed the overlay running in the streamer’s broadcasting software to receive updates instantly whenever a new participant joined the wheel. As a result, viewers could see their names appear on the wheel almost immediately after entering the command in chat. Learning how to work with both IRC-based chat systems and WebSocket communication was an important part of the project and significantly expanded my understanding of real-time networking and event-driven systems.
Backend System and Participant Management
The backend service is responsible for maintaining the participant pool and coordinating interactions between Twitch chat and the on-stream wheel overlay. Whenever a viewer enters the join command in chat, the backend processes the request and adds them to the current session. The system also includes safeguards to prevent users from entering multiple times or manipulating the process. Maintaining fairness was important because the wheel is often used for giveaways or community events where transparency matters. The backend also controls the logic behind the spinning process. When the streamer initiates a spin, the backend determines the final result and sends the outcome to the overlay. This ensures the selection process remains fair and synchronized with what viewers see on stream.
Stream Overlay and Wheel Animation
The frontend portion of the project is the visual wheel that appears on the streamer’s broadcast. The wheel runs inside a browser source so it can easily be integrated into streaming software such as OBS. When participants join the wheel, their names are added to the visual overlay through real-time updates from the backend. When the streamer triggers a spin, the wheel animates and lands on the selected participant. The spinning and animation logic itself is powered by an existing wheel animation library, which I integrated into the overlay and connected to the backend system that manages participants and determines the final result. While the visual design of the wheel is intentionally simple, the goal was to create an experience that feels responsive and engaging for viewers watching live. The animation provides a clear visual buildup to the final result while ensuring the selection itself remains random and synchronized with the backend selection logic.
Summary
Wheel Widget was designed to give streamers a simple but powerful way to run interactive events directly with their communities. The system combines Twitch chat integration, real-time backend processing, and a browser-based stream overlay to create a seamless viewer experience. Building this project required learning how to interact with Twitch’s IRC-based chat system, implementing real-time communication with WebSockets, and designing backend systems capable of handling large spikes in chat activity. What started as a tool built for a single streamer eventually became a scalable system capable of supporting much larger audiences. The project was a great opportunity to work with real-time systems and build software that directly interacts with live communities.