ChatReward

Inspiration

I thought it would be funny to have videos/audio/images that play in certain scenarios, along with that, allowing chat to troll me when I play a game, or close my ide when I'm programming.

I wanted to customise quickly how rewards are handled. If i wanted to add a new reward mid-stream for example, I wouldn't want to mess around for ages setting it up, modifying obs and such. I want to add a title, cost, configure an image and a sound to play for example, then publish it and let chat have fun.

Most software for this is not easy to set up, especially when you find it tricky to understand things. I made sure for this reason, every little piece of functionality or ui has a small description and is easily understandable. They are also not easy to move from one software to another, for ex, all your rewards were configured on twitch, but now you want to use a another service, you can import all of those twitch rewards(or rewards created from other services) and handle them via ChatReward

What it does

Allows the streamer to create a reward then add "modules" to it, a module is a small piece of functionality like showing an image, video, moving the mouse and such. You can add them and customise them in different ways.

Allows you to import rewards from Twitch and set up modules which will be triggered upon redemption.

Streamers can assign their channel moderators as editors or managers, so that they can make adjustments Editors are able to add new rewards, update them, add new modules to them. Managers are able to do what Editors can, but they can also set mods as Editors. This would be the role of your channel manager, if you had a team for example.

It has a basic chat bot which allows chat to use text-to-speech commands, viewers can send "!! hello" for example, and it will be played. You can configure rewards to be redeemed via commands & add bit costs to them also.

How we built it

Using VueJS for the frontend, TailwindCSS for design, NodeJS/Express for the backend also using TypeScript on frontend/backend. We then hook into Twitch EventSub to receive notifications about events, like a reward being redeemed.

NodeJS was the main objective, it can be built out quick and quickly/easily expanded to use micro-service architecture when needed.

The main parts of the codebase work slightly separate from each other, but still on the same process for the hackathon.

Events come in from Twitch when a viewer redeems a reward, it will then get pushed into a queue, each streamer has their own event processing queue. From here, the client will handle the key presses, images, gifs and such that need to be processed for this redemption.

Electron was also utilised to create a desktop app, which is required if a streamer wants to use any keypress/mouse movement modules, this just runs the web-app, but also allows the more native os level control than you're allowed in the web environment

Challenges we ran into

Creating a simple solution to allowing for streamers to assign managers/editors to manage a streamers rewards, without major code changes.

Creating a system to process events per streamer, without requiring a bunch of server infrastructure, 3rd party reliance etc.

Accomplishments that we're proud of

I managed to write this without chat redeeming an ALT + F4 I've built a few similar versions in the past, they were all slow clunky, layered in tech-debt, not very configurable. This one is fast, simple and easily modifiable. The ui is simple, easy to use and quick.

What we learned

MongoDB and to not over-engineer things.

What's next for ChatReward

I think this platform could be expanded out to handle more than just channel point redemptions, it would be cool if for follows & subscriptions you could trigger things to happen, like moving your mouse, playing a random gif/audio Making these rewards/triggers able to be redeemed via a donation also, which would work as a monetisation method.