Inspiration

We spent many hours trying to figure out how to build an integration that would improve the usage of channel points in a meaningful and useful way. We came up with the idea for PogPoints as a way to add an element of uncertainty and excitement to a stream by giving users the option to redeem channel points for tickets in a draw, and streamers the option to offer custom rewards to a winner. With PogPoints, viewers can use the channel points they earn immediately for a chance to win a reward that might be worth many times more points, and streamers have access to new ways to add flair to their broadcasts. Everybody wins!

What it does

PogPoints is an application that integrates with the Twitch Channel Points API to allow streamers to run draws or giveaways (PogPrizes).

Dashboard

A streamer can start a PogPrize within the desktop app, which will use the API to automatically create a custom reward, a single ticket entry for the draw.

Pogprize start

The application displays the information about the PogPrize, a countdown timer until the end of the giveaway, the total number of points spent by viewers, and a list of all the entries that have been made so far.

Pogprize screen

Upon ending the PogPrize, winners will be randomly selected from the entries and the custom reward will be deleted. An unfulfilled prize is added to the streamer's queue which is shown on the dashboard and stored in the database.

There are several windows that can be opened to display on the broadcast as sources for streaming software like OBS.

Intro window Queue window

How we built it

We used Electron to build a cross platform application and React as a frontend framework. A backend for the application was written with Node.js and Express and deployed onto Heroku. The data for the users, prizes, and draws are stored in a MongoDB database. The application authenticates a user with the Twitch implicit code flow and stores the access token. The backend is used to interface with the Twitch API to create and delete custom rewards, and also create a webhook that is used to log the new entries for the PogPrizes.

Challenges we ran into

Having never used Electron before, it was challenging to integrate our React code with native Electron functions such as ipcRenderer for opening new windows. Authentication flows and backend API management with MongoDB and Node.js was difficult to navigate and debug as we were unfamiliar with a ton of these processes. From creating the proper schemas for our database, to creating the APIs that would query, get, and update our database objects proved to be a massively time consuming aspect of our development.

Accomplishments that we're proud of

Creating an app integrating a backend API service, database, as well as a complex front-end solution using technologies we were largely unfamiliar with such as ElectronJS is a huge accomplishment that we're proud of being able to reach in such as short duration.

What we learned

This hackathon allowed us to familiarize ourselves with Twitch's Channel Points API as well as building end-to-end ElectronJS apps.

What's next for PogPoints

Currently, we are planning on creating another function of the PogPoints app named PogSpin. PogSpin will be a viewer-activated, Wheel-of-Fortune style integration where the audience can redeem spins using channel points. We also plan on broadening customization options with PogPrize, and stream overlays.

Built With

Share this project:

Updates