Royale Lobby Arena

Royale Lobby Arena lets streamers host private game lobbies directly on their Twitch page. Viewers jump in to compete with their favorite streamer or challenge rival streamer communities.

Comment

Royale Lobby Arena

Inspiration

I've run thousands of esports and casual events. The best events are those that bring communities together, and there are no better communities than those built around Twitch streamers. I've worked with many streamers to host events for their communities, and it's often a cumbersome process. Royale Lobby Arena makes it a seamless experience that allows streamers to host events in seconds, which they can join or watch party. One feature sure to bring excitement is the ability to challenge another streamer and make communities go head-to-head representing their favorite streamer.

What it does

Royale Lobby Arena allows streamers to distribute private lobby information to their viewers with customizable access elements like max participants. Major Battle Royale titles provide private match lobby codes that must be distributed to up to 100 players. This distribution is typically a headache, requiring users to leave Twitch for third-party platforms.

Royale Lobby Arena simplifies this - streamers just plug in the lobby code and set distribution parameters. Viewers access the code through a Twitch Panel with one click, allowing streamers to host events instantly.

The challenge feature enables streamer collaboration. When one streamer sends a challenge and another accepts, the same lobby code is automatically distributed to viewers on both streams, creating an intuitive and fun experience for everyone involved.

How we built it

The Twitch Faceoff Extension was built using vanilla JavaScript, HTML, and CSS, with a Node.js/Express backend hosted on Heroku. The extension leverages Twitch's Extension Helper for authentication and configuration management, using JWT tokens for secure API communication. The backend maintains temporary in-memory storage for managing lobby participants and inter-streamer challenges, while utilizing Twitch's API for user verification and identity resolution. The frontend implements two distinct interfaces: a broadcaster-only admin panel for lobby management and challenge controls, and a viewer panel for lobby participation, both styled with custom CSS for a cohesive gaming aesthetic.

Challenges we ran into

As a solo developer, balancing feature development with UI design meant tough decisions about development priorities. While some features were sacrificed to meet deadlines, the extension's current state is solid and ready for streamer feedback. I had to work within elements, code, and details that are out of my skillset and comfort zone.

Balancing feature complexity with ease of use was crucial - creating a seamless way for streamers to connect without overwhelming them. The goal was presenting functionality simply for both viewers and streamers without leaving Twitch. A one-click join button proved perfect for viewers' short attention spans, leaving nuanced details to be communicated by streamers live.

The Challenge System required careful management of multiple moving parts - handling state between different streamers' configurations, managing asynchronous responses, and preventing lost or duplicate challenges.

Accomplishments that we're proud of

  • Created an extension serving both small and large streamers equally well, with flexible participant limits and a straightforward challenge system
  • Balanced technical functionality with user experience - complex backend operations with an intuitive, one-click frontend
  • Built a platform that will create memorable moments as communities play with their favorite streamers and generate exciting storylines through streamer community face-offs

What we learned

  • Gained insights into real-time state management - handling concurrent challenges and lobby updates without a traditional database
  • Discovered the importance of user-first design in both admin and viewer panels
  • Mastered Content Security Policy (CSP) implementation for Twitch extensions

What's next for Royale Lobby Arena

I'll reach out to streamers in the community to begin using the Extension, gather feedback for future improvements, and release updates based on community needs. Visual enhancements for both admin and Twitch panels are also planned.

Share this project:

Updates