PHPMySQLSlimPHPSocketsMulti-TenancyFull-Stack

Web Application for Broadcasting Esports Matches Drafts

By Erik Johansson
Picture of the author
2016
Project Description
Rewriting and optimizing a web application used by esports teams and broadcasters.
The draft screen
The draft screen
The draft screen
The draft screen
The create draft screen
The create draft screen

Overview

GosuGamers offered a real-time web application used by esports teams and broadcasters during the matches' map and hero draft phase. Two teams would connect to the same draft session, and take turns to pick their maps and heroes under time pressure. The draft session could optionally be observed by a broadcaster, and we offered organizers to theme the observer view with their branding.

As I began my engagement with GosuGamers, this app was already developed and in use, but highly unreliable and would often encounter issues during live broadcasts. I took over development, did a full refactor of the application to be robust and performant, maintained it, and eventually added multi-tenancy functionality to support multiple games.

My responsibilities were to handle backend as well as frontend code, based on provided design and graphic assets.

Some key features of this project were:

  • Support for Heroes of the Storm and Overwatch
  • Support for custom draft patterns for both maps and heroes
  • Multiple participants with different permission sets could partake in a draft session
  • Multi-tenancy support with extensive freedom for customization for each site

This video, in Russian, showcases how the draft tool is used:

During its lifespan, the application was used in events in front of thousands of viewers. For example during the Enter the Storm tournament: