Tournaments.sh

Discover, host, and compete in community run tournaments for your favorite rhythm game, osu!.

Comment

Inspiration

osu! is the world's largest rhythm game, with hundreds of thousands of active players from all over the world. The osu! competitive scene has steadily grown, with players frequently turning to tournaments as a way to test their skills. Unfortunately, tournaments still rely on internet forums, Google forms, and Discord servers as a primary means of communication. Despite the growing scene, the lack of a centralized platform for tournaments hinders tournament discoverability. This project aims to provide a central content management system for tournament players and hosts, aggregating tournament data in one place, and promoting discoverability of tournaments.

What it does

Our content management system allows users to browse tournament listings, expand a tournament card to view more details, and eventually register for a tournament. Users log in to the site with their existing osu! account. Prospective tournament hosts can create a new tournament to be listed on the website. Hosts are able to specify their target player audience by denoting entrance requirements, such as minimum or maximum player rank.

How we built it

The frontend is built with React and Tailwind, and interacts with a MongoDB Atlas cluster through a Spring Boot API. The website authenticates with Spring Security, using osu!'s public API as an OAuth 2.0 provider.

The Spring API is separated into multiple components:

  1. Records - Java representation of a collection's intended schema.
  2. Services - Reusable methods for interacting with and performing operations on a collection.
  3. Controllers - Mapping of API endpoints to their relevant methods.
  4. Authentication - Configures interaction with OAuth provider and defines permissions on routes.

Challenges we ran into

Our team was unfamiliar with Spring prior to the hackathon, and we frequently encountered deprecated or altogether removed methods and classes in various online resources. Interactions between the React frontend and Spring API layer proved challenging due to various cross-origin resource sharing errors. In particular, relevant documentation for configuring proxies in React and CORS permissions in Spring was difficult to find, and often outdated.

Accomplishments that we're proud of

We successfully built a fully working web app that utilizes authentication and provides most of the features of a content management system. We were also able to utilize Spring Boot to connect with MongoDB Atlas, despite none of us having used any of these technologies before. From the start, we segmented the project into modules that could be worked on individually and pieced together later, ensuring every team member had a task to focus on throughout the hackathon.

What we learned

We learned about the advantages and disadvantages of strong typing in an API layer, including balancing security and stability against developer experience. We explored what goes in to connecting a frontend and a backend, including CORS configurations and session cookies. We also grew familiar with frontend styling patterns in Tailwind.

What's next for Tournaments.sh

The osu! tournament scene is in need of a centralized platform for tournament creation and competition. Fulfilling that niche will require robust systems capable of handling thousands of users and accommodating a variety of unique tournament formats. Tournaments.sh intends to accommodate those needs by improving frontend UI to make the experience more welcoming for new users, and further developing site infrastructure that enables hosts to create tournaments tailored to their specifications.

Built With

Share this project:

Updates