CollabCast

Inspiration

The growth of collaborative streaming highlighted a gap in seamless multi-stream viewing. We were inspired to create a platform that unifies streamers' content and communities, enhancing viewer engagement and interaction.

What it does

CollabCast brings together multiple Twitch streams into a single interface. It features side-by-side video embeds, a unified chat that merges messages from all streams, interactive real-time polls, and notifications to keep viewers engaged.

How we built it

We used React and Material-UI for a responsive frontend, and Node.js with Express for the backend. Real-time functionality is powered by Firebase Realtime Database. We integrated the Twitch API and tmi.js library for stream embeds and chat functionality.

Challenges we ran into

Managing real-time data synchronization across multiple streams and chats was complex. Handling Twitch API limitations and ensuring smooth user authentication were significant hurdles. Designing an intuitive UI that accommodates multiple streams also required careful planning.

Accomplishments that we're proud of

We're proud of successfully merging multiple live streams and chats into a cohesive experience. Implementing real-time collaborative polls and a unified chat enhanced viewer interaction. Overcoming technical challenges to deliver a seamless platform was a significant achievement.

What we learned

We deepened our understanding of real-time data handling, API integration, and React state management. We also learned about the importance of user-centric design and the complexities of synchronizing live content from multiple sources.

What's next for CollabCast

Future developments include expanding support to other streaming platforms, adding more interactive features like shared annotations, implementing user accounts for personalized experiences, and optimizing performance for larger audiences.

Built With

• axios
• express.js
• firebase
• javascript
• jest
• material-ui
• node.js
• react
• tmi.js
• twitch