Subathon Royale

Inspiration

Subathon Royale was born a few years ago.

I was watching a subathon, and the timer kept having issues. The streamer shared the app on Discord and asked the community for help. I was curious, so I started looking into the code and quickly fixed the problems. Then, I added some improvements and new features.

The app grew, and eventually, I decided to rewrite it as a web app to overcome the limitations of being a local app and to enable new features like "multiplayer" subathons. This marked the beginning of Subathon Royale. Over the following years, I continued adding features such as Streamlabs/StreamElements integration and, more recently, EventSub integration. EventSub powers functionalities like auto-pause, tracking the games played during a subathon, and a multiplier during hype trains.

This hackathon was the perfect opportunity to develop a Twitch extension — something I had wanted to do for a while but never got around to learning. One of my goals for the extension was to provide quick access to popular stats without needing to remember chat commands or leave the stream to check the website. Since cheers were already supported, adding bit support to the extension seemed like a natural next step.

What it does

The Subathon Royale Companion extension adds a panel to your Twitch page, working alongside the timer provided by the Subathon Royale website. It displays the current time, the lowest/highest time during the event, and the total contributions. It also includes leaderboards for each contribution type, allowing viewers to engage in friendly competition for the top 5 spots. Additionally, viewers can use bits to interact with the timer widget, such as changing the theme.

How we built it

The extension is built with Vue.js, Tailwind CSS, and DaisyUI—just like the Subathon Royale website—and it uses Vite for building and development.

Challenges, accomplishments, and learnings

Since this was my first Twitch extension, it was initially tricky to build it in a way that worked when hosted on Twitch, rather than just testing locally. However, after some trial and error, I managed to get it working.

Additionally, I used Vue 3 for the extension, while the website still runs on Vue 2. This gave me a great opportunity to get more familiar with Vue 3 before migrating the website.

What's next for Subathon Royale

I have many ideas for future features, but one current focus is supporting charity donations to add time, enabling charity subathons. Of course, I’m also planning more interactive features for the extension shop.