Streamers are often asked the same questions about current customisations and options, which affects the viewing experience of those in the stream for extended periods.

Additionally, offers many stats that can showcase the streamer's games in a reliable, quantified manner. These stats have the potential to add to the viewing experience.

What it does

Tabs show the various customisation options being used by the streamer. Current session win/loss records are kept track of and is displayed. Links to more in-depth game statistics are available for each game.

How I built it

I harnessed our endpoints to pull data about the customisations used by the streamer in the latest game. React and the Dev Rig was leveraged to create the UI.

The backend that supports the extension makes use of Twitch's PubSub capabilities, and is written with Python and aiohttp for asynchronous data polling.

Challenges I ran into

The limitation of keeping the extension human-readable limited the use of frontend libraries ( itself makes extensive use of material-ui for instance). However, manual playing with CSS was sufficient here.

While the Dev Rig provided many useful conveniences, the React starter had an outdated version of babel, and updating that was a slightly complicated process.

Additionally, the JWT structures required were documented in varying places, and some of the documentation was unclear. Sometimes finding out JWT requirements was best done through entering the example bearer token into a JWT decoder such as

However, the fact that I've managed to figure out the endpoints to hit and the authorisation required without specific help from the community is testament to the somewhat-complete nature of the documentation (in what is an admittedly very quickly evolving process).

Accomplishments that I'm proud of

The user interface is clean and polished. It can answer many of the common viewer questions in a manner that is both intuitive and attractive. The extension backend's asynchronous data polling enables reasonable scaling capabilities.

What I learned

  • You don't need to leverage huge libraries for small projects: Although styling elements with CSS took a bit of getting used to (instead of leveraging the "good defaults" offered by libraries), it was entirely sufficient and may in fact be quicker. The enforced reduced-dependency approach may actually result in a more robust application.
  • Python can deal well with asynchronous network connections.

What's next for Calculator

Increased viewer-streamer interaction. I have ideas such as: Viewers gain points through viewing the stream, which can be redeemed to cheer the streamer on during games.

Share this project: