Feeding Dragons With Channel Points

Creating custom rewards
Creating a diet
Viewing the custom rewards in chat
Opening the fridge
Selecting a meal
Choosing a way to redeem and feed the dragon
Animation after a dragon is fed

Inspiration

Existing users were the main source of inspiration. Streamers have been asking for Channel Points and the ability to feed their dragons for a while. This Hackathon was the perfect opportunity to build that.

What it does

Allows streamers to create a Diet plan for their pets. A dragon can be "Vegetarian" or "Meat Eater". A vegetarian dragon will gain more XP and Health when fed veggie foods. Same for a meat eater and meaty foods. Since dragons can talk, they will complain when fed the wrong foods!
Allows streamers to create custom rewards for different meals (Steak, Hambone, Apple, Carrot).
Viewers can redeem the rewards and feed the dragons using Channel Points (or Bits). They do so by visiting the "Fridge" in the Extension front-end and simply picking a meal.
When a reward is redeemed, an animation will play both in the Extension front-end and the Browser Source integration (on the stream overlay). The dragon will gain XP and Health.

How we built it

Used the EventSub and Channel Points APIs.

The Channel Points API was used to Create, Update, and Get custom rewards for a channel.
The EventSub API was used to subscribe to custom_reward_redemption events on a specific channel.

Challenges we ran into

Making sure user access tokens are not expired and dealing with 401 errors. A token can be expired any time we are communicating with the Channel Points API. The EBS has to be able to refresh, retry the request and then save the new token in the DB.
Revoking access tokens and deleting EventSub subscriptions. A streamer is always given the ability to revoke channel:manage:redemptions permissions. When they do, we need to make sure to delete the relevant subscription, and then re-create if they decide to authorize the application again in the future.

Accomplishments that we're proud of

Successfully integrated with both APIs and using them to provide value to live users.
Opened up a whole new world of interactions with the extension. Not everyone can afford to use Bits, but we still need some sort of investment from the user. Channel Points are perfect for that.
A clean extension UI both for streamers and viewers. A streamer should be able to create custom rewards through the Extension dashboard easily, while a viewer is given clear directions on how to use their Channel Points and redeem a reward.

What we learned

Don't be afraid of new APIs. Both EventSub and Channel Points were extremely easy to use and so powerful.

What's next for Feeding Dragons With Channel Points

We've only scratched the surface of the EventSub API. We will soon be using it to subscribe to a lot more events (follows, subs, cheers) making the dragons react and recognize viewers for supporting the stream. This is also something streamers have been asking for a while.

The same goes for Channel Points. Feeding is just the first action to come through. Streamers want their viewers to bathe, dance, make dragons hold emojis, wave, etc. All through Channel Points.