Twitch Party Games

Inspiration

• Inspired by Twitch’s community focus, we wanted to create an experience that lets viewers become active participants.
• The idea was to turn streams into interactive events where viewers can play, interact, and collaborate rather than just watch.

What it Does

• Twitch Party Games is an extension that brings viewers together in real-time through three games: Trivia, Drawing and Guessing, and Tic-Tac-Toe.
• It allows viewers to join games, chat, and interact with both each other and the streamer, enhancing the sense of community.

How We Built It

• Frontend built with React, backend with Node.js.
• Real-time messaging is handled by socket.io-client.
• Twitch API integration and Passport for secure authentication for streamers and viewers.
• Game data is stored in MongoDB to keep track of game states, player stats, and chat history.
• Each game is modular, allowing easy updates and new features.

Challenges We Ran Into

• Synchronizing real-time updates for viewers while keeping streamer and viewer experiences distinct was challenging.
• Ensuring instant player actions across all viewers required careful WebSocket connection management.
• Setting up dual authentication with the Twitch API involved a learning curve but was crucial for role-based access.

Accomplishments That We’re Proud Of

• Successfully created a responsive, community-driven Twitch extension that enhances viewer interaction.
• Achieved smooth, real-time player interactions and secure role-based access for both streamers and viewers.

What We Learned

• Gained experience with Twitch API integration, especially in role-based access and real-time WebSocket connections.
• Learned to use EventSub for tracking in-game events, adding interactivity to the extension.

What’s Next for Twitch Party Games

• Plan to add more games and interactive features to make Twitch even more engaging.
• Future updates will focus on enhancing community interaction and offering more options for streamers and viewers to connect.

Built With

• css
• express.js
• mongodb
• node.js
• passport
• react
• socket.io
• twitch
• websockets