Tournament Dashboard

Introduction

A few years ago, some friends and I started to organize League of Legends tournaments for around 150 to 200 players. We wanted to make a fair and automatic way of creating the teams, give participants an overview against who they play with / against, and be able to join teams that still miss players.

The Design and Needed Functionality

The dashboard is created in Vue.js with Buefy as component library. The database used is MongoDB, because looking at what kind of data I would be working with NoSQL was the best options. Mongoose is used to connect to the database and setup the API calls. The dashboard design is also in the style of our Discord and YouTube branding, with a logo that should resemble a Raptor creature from League of Legends (which I made both). I spent my summer vacation working on this dashboard, but shamefully I could not complete it due to time constraints.

User Screens

The user screens consist out of a homepage with their win rate, match history, and points / experience earned. We wanted the homepage to feel like an achievement page, where the user would feel proud of his accomplishments, for example: “My win ratio is better than half of the other players” or “I am in the top 10 of points earned”. In the future we wanted to tie rewards to these accomplishments, like creating custom profile images, reduced costs for paid tournaments. But we had left those features out, because we wanted to focus on the main parts first.

The user can also navigate to the tournament page where the user has an overview of upcoming tournaments with a sign-up deadline and start date / time. The user can sign up for a tournament, pick his team or get assigned a random team.

If the user is an admin they can also update the tournament rules / date, remove users from teams, and change team sizes