VAL Tournament System

An online tournament system for automated matchmaking.

Virtual Athletics League (VAL) is a startup VR-tournament company founded a few years ago, just before COVID-19. Their influence in the VR community has grown incredibly over the past few years, allowing them to expand their staff and tournaments. In particular, they were searching for interns that would assist in the development and finalization of their website for use in tournaments.

Official link to VAL

I joined VAL in January of 2022. From designing on the frontend to creating logical algorithms in the backend, I always got to contribute to the website development. I worked closely with the lead website and software engineer to prepare the website for the Summer tournaments.

What I enjoyed most when working with VAL was how directly impactful the work was. This is quite typical in startup culture: the things I developed were directly used weeks later in public tournaments. This also let me wear multiple hats: I got to work on the frontend, backend, pose ideas to the company founders in meetings, and even develop backend plans for the future. 

Let’s get into the specifics of what I did at VAL. 

Backend

On a daily basis, I used Python, Django, and Git for the backend. In general, the backend is where the URL for a subsite was named, connections to other subsites were formed, and the functionality of the subsite was developed. Getting to know the ins-and-outs of the repository was quite a challenge since it was vastly filled with files and code. I quickly grew comfortable navigating through the repository though, which increased my productivity overall.

One particular instance of a backend-heavy project was developing a score submission method for tournaments. The system needed to be an automated method of submitting scores for a match in a specific time-period. Furthermore, it needed to process the results to ensure both teams submitted the same score, and ultimately display these in a leaderboard whenever the results match and verify. This was challenging since there were multiple input parameters, which meant that multiple scores could mismatch. For instance, the blue team could input a score for an entire match that doesn’t line up with what the red team inputted. This led to using loops and if-statements to detect the mismatches. If both teams submitted identical scores, the system denoted that the scores are verified, which is the condition for them to display on the website. 

Score submissions on a basic level used the POST method, and inputs were tracked as variables in the HTML. These were then used to update the match model in the backend in their corresponding places. To prepare for the first tournament, the match model’s parameters needed to be revised, requiring the site database to be adjusted through the use of migrations.

To assist the community managers notice these mismatches, we decided on Discord Webhooks as the solution. They are a fantastic feature of Discord, allowing information to be directly sent from the site to an admin channel on discord automatically. The message system notifies the admin team of all score mismatches. A screenshot is displayed below of this feature.

Overall, working in the backend has been my favorite part of website development. The logic systems and interconnecting models are a great foundation for websites. It is incredibly satisfying once everything comes together and works properly.

Frontend

Half of the work I did was on the frontend, where I wrote in HTML and CSS. Various portions of my work in the backend often depended on a final product on the frontend, so I often started here. 

At the start of my work for VAL, I was in charge of developing the Match Page. This helped me learn the repository’s functionality the quickest. To start off, I created new portions in the backend and a completely new .html file for the frontend. The goal was to create a cohesive match page that displayed relevant information like match team information, date, game played, etc. Since the match ID was a kwarg in the url, it searched the match Model for the respective matchID and returned a table with its match information. Now, variables from the table could be referenced in the html. In terms of styling, the match page needed to be similar to the styling of other pages to establish continuity. So, I referenced and learned the various styling methods used in the website and emulated them in my match page. Once my page finalized, I added hrefs in other subpages’ frontend so that the match page could be easily accessed.

I also created the first sharing method on the site. This was directly implemented with the Match page, giving players an easy way of sharing their upcoming match with their friends. To create this system, I referenced documentation on the sharing feature from Twitter and Facebook to determine how I needed to prepare match information. I developed a function to format this information recursively (based on the current match page) into the respective site.

Working with others

Since VAL is a startup company, I worked in a tight-knit group for the website development. I got to make deep relationships with my coworkers. It became incredibly easy to talk to them and we often bounced ideas off each other. It led to an incredible and productive work environment. Oftentimes, we collaborated in calls outside of meetings to develop new features at a faster pace.

An additional perk of startup culture is directly speaking with the founders on a weekly basis. We presented our progress and proposed new ideas and solutions as a group to get feedback and constructive criticism. In the end, I got to develop personal relationships with the founders and the engineering team, ultimately reinforcing my support for the company.

Final products

After working at VAL for four months, I completed the following projects:

  • Match page (frontend & backend)
  • Score submission (backend)
  • Sharing method (frontend)
  • Discord Webhook API (backend)
  • Models reorganization (backend)

I also contributed to the following projects:

  • Tournament system publication to the live site (frontend & backend)
  • Season system reorganization (backend)
  • Season schedule (backend)