arabacibahadir / pokitch

Pokitch - Interactive Twitch chat game

Pokitch

Pokitch is an interactive Twitch chat game that streamers can add as an overlay to their live streams.

Homepage: pokitch.app

Online overlay demo: pokitch.app/overlays/:id

Features

• Twitch Bot
• Stream overlay

Demo video

demo_pokitch.mp4

Instructions

Step 1: Copy the overlay url

Go to homepage and login. Copy the link we gave you after you signed in.

Step 2: Open your broadcasting tool

Open your broadcasting tool and add a new browser source. Paste the overlay link into the URL field.

Step 3: Set up the sizes

Width: 256, Height: 76. The dimensions should be set to 256x76.

Step 4: Assign as moderator role

In order to use the bot properly, you must assign it as a 'mod' role: /mod pokitch_bot

Step 5: And done!

demo_obs.mp4

Brief

How did we use Supabase Realtime function?

We used Supabase Realtime for inserts and updates of poke's in our database. We used the event:"UPDATE" to check the realtime data of the active poke on the Twitch channel and update the overlay in realtime when its health is low. We used the event:"INSERT" to check if the active poke has been caught and swapped with the new random poke, and update the overlay with if there is the new data.

How did we use Supabase Database?

Supabase Database is where we keep track of viewer poke collections and when on which Twitch channel they caught them.

Tech-Stack

• Supabase
• Nextjs
• Typescript
• tmi.js
• Tailwind CSS
• CVA
• React-Icons

Work in progress

• Inventory/Collection showcase
• Support Trade/Gift system
• Store for Twitch channel loyalty points
• Brawl
• World Boss

• And more!