https://github.com/arabacibahadir/pokitch

Pokitch - Interactive Twitch chat game
https://github.com/arabacibahadir/pokitch

chat-game game nextjs overlay supabase tmijs twitch twitch-overlay typescript

Last synced: 2 months ago
JSON representation

Pokitch - Interactive Twitch chat game

• Host: GitHub
• URL: https://github.com/arabacibahadir/pokitch
• Owner: arabacibahadir
• License: mit
• Created: 2022-12-13T10:24:22.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-19T13:52:01.000Z (over 1 year ago)
• Last Synced: 2024-05-01T14:11:48.371Z (8 months ago)
• Topics: chat-game, game, nextjs, overlay, supabase, tmijs, twitch, twitch-overlay, typescript
• Language: TypeScript
• Homepage: https://pokitch.app
• Size: 441 KB
• Stars: 22
• Watchers: 1
• Forks: 5
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Pokitch

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

Homepage: [pokitch.app](https://pokitch.app)

Online overlay demo: [pokitch.app/overlays/:id](https://pokitch.app/overlays/fc439c64-7a77-4808-99e8-ae35b075a394)

## Features

- Twitch Bot

- Stream overlay

## Demo video

https://user-images.githubusercontent.com/32988819/208307217-91159b3a-e0bf-4cfc-8a4c-c329b0cfa8a6.mp4

## Instructions

**Step 1: Copy the overlay url**

> Go to [homepage](https://pokitch.app) 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!**

https://user-images.githubusercontent.com/32988819/208307876-4d941a2d-2bbd-4ee9-ad81-4faee840a921.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](https://supabase.com/)

- [Nextjs](https://nextjs.org/)

- [Typescript](https://www.typescriptlang.org/)

- [tmi.js](https://tmijs.com)

- [Tailwind CSS](https://tailwindcss.com/)

- [CVA](https://github.com/joe-bell/cva)

- [React-Icons](https://react-icons.github.io/react-icons/)

## Work in progress

- [x] Inventory/Collection showcase

- [x] Support Trade/Gift system

- [ ] Store for Twitch channel loyalty points

- [ ] Brawl

- [ ] World Boss

* And more!