StreamMingle

Inspiration

Our inspiration for StreamMingle came from noticing the limitations of existing platforms like Twitch’s Squad Stream and third-party apps like Discord. While these platforms allow some level of group interaction, they either limit the number of participants (Twitch Squad Stream caps at 4) or don’t offer a dedicated, seamless experience for interactive gaming rooms. We realized there was no popular, dedicated platform on Twitch that enables large, interactive rooms for gamers. This gap inspired us to create StreamMingle, a space that encourages active participation and fosters a sense of community by allowing more users to join and interact in a streaming environment.

What it does

StreamMingle provides a platform where viewers can join streams, interact in real-time, and participate in various collaborative activities. Users can create rooms and share a unique meeting code with others, who can then log in with their Twitch accounts and use the room code to join that specific room. StreamMingle also includes a messaging feature, allowing participants to communicate via pop-up messages, enhancing interaction and engagement within the stream. By blending interactivity with traditional streaming, StreamMingle elevates the user experience to foster closer connections between streamers and their audience.

How we built it

We built StreamMingle using a React frontend and a Node.js/Express backend. For real-time video and audio streaming, we integrated 100ms, which provided the foundation for creating interactive rooms where users can join and participate seamlessly. Additionally, we employed Twitch APIs for user login and streaming functionality, allowing users to authenticate via Twitch and directly connect their accounts to StreamMingle. Our backend architecture is modular, enabling efficient data exchange with secure CORS configuration to facilitate real-time interactions smoothly.

Challenges we ran into

One of the main challenges was ensuring smooth communication between the client and server, especially while handling real-time interactions. Integrating 100ms for video and audio functionality presented unique hurdles, as our initial attempts to stream both video and audio to Twitch failed. After multiple tests and adjustments, we successfully managed to rectify this issue, allowing video and audio to be transmitted effectively. Additionally, maintaining room states and managing asynchronous functions for real-time updates required careful frontend and backend data handling.

Accomplishments that we're proud of

We are proud to have created a cohesive and engaging platform that meets our initial vision. From implementing user-friendly interface components to handling real-time interactions seamlessly, we were able to overcome technical hurdles and deliver a product that reflects our goals. Successfully deploying the project for a hackathon was another milestone we're thrilled to have achieved.

What we learned

Through this project, we learned a great deal about full-stack development and the intricacies of integrating frontend and backend systems. Additionally, we gained valuable experience in real-time data handling, managing asynchronous functions, and debugging streaming issues, which significantly enhanced our technical skills.

What's next for StreamMingle

The next steps for StreamMingle include:

Scalability Enhancements: Upgrading our infrastructure to support more than 25 concurrent users per stream, ensuring stable performance with a growing user base.
Enhanced Customization: Adding more customization options for streams, enabling streamers to personalize their rooms and interactions further.
Mobile App Development: Launching a mobile app version to make StreamMingle accessible on various devices.
Improved Moderation Tools: Incorporating moderation features to maintain a positive and safe community environment.

We also aim to optimize the platform for future scalability, ensuring that it can handle larger audiences while maintaining performance and reliability.