Heroes of the Dorm was a collegiate esports tournament organized by Blizzard Entertainment, featuring the game Heroes of the Storm. We built the site using React.js and a custom backend to manage the complex data and interactions required.
One of the biggest technical challenges was implementing the tournament bracket system, which was modeled after a client-provided example from ESPN. This involved creating a dynamic, interactive bracket that could handle real-time updates and showcase the tournament's progression effectively as well as user generated bracket predictions.
Heroes of the Dorm - Home
The championship bracket had 64 teams and spanned 6 stages before a champion could be crowned. Displaying every matchup in a single tournament bracket was a unique challenge that required a week of prototyping.
On desktop every match had to be positioned absolutely. Sass variables played a key role in maintaining the four groups which were mirrored vertically and horizontally.
On mobile as users navigated to different stages the bracket would resize and reposition itself.
React.js enabled dynamic bracket population during the user brackets phase.
