The tools we use to shape Kyoso

Kyoso — Sun, 25 Jun 2023 22:51:29 +0000

Just like any other web application out there, Kyoso needs a set of reliable tools for it to be developed quickly and efficiently.

With so many solutions for so many issues, some technologies were a bit difficult to decide on. After thinking perhaps a bit too much about the choices, we've set on using the following tech stack.

It likely goes without saying, but we are NOT affiliated with these technologies or the people behind them in way, shape or form. We just want to just give our thoughts as to why we made certain choices.

Language

Typescript, both for the backend and frontend. With so many Javascript libraries and frameworks being published and worked on an almost daily basis, it was a pretty easy choice, especially considering that Typescript specific tools have been on the rise with the purpose of creating the best developer experience by providing a solid type system that although not perfect, is still miles better than what Javascript has out of the box.

Full-stack framework

We decided it was best to handle the frontend and backend in one single repository. For this, we've gone with SvelteKit. It provides the usual features that frameworks have, like handling server-side rendering, reactivity, state management and much more, but SvelteKit achieves all this with a smaller footprint compared to others, whether it be less lines of code to implement something or its small bundle size.

Database

We use Postgres, but we don't run raw queries, instead we use Prisma, an ORM that provides type safety and performs database operations by using Javascript that then gets translated to SQL.

API

SvelteKit provides a solid way for the frontend to communicate with the backend, but tRPC does it even better. It creates endpoints that you can request via the tRPC client, providing type safety for the response.

There are a few limitations that we did have to overcome though, like tRPC not handling form data, something that was annoying when handling file uploads and subscriptions for real-time data aren't the cleanest to write. Despite these issues, it's still one of best and likely the fastest way to develop an API with Typescript/Javascript.

Styling

Tailwind provides a ton of CSS utility classes that keeps your styling very close to the HTML while also allowing customization, something that Skeleton expanded upon by providing a set of components, themes and utilities that were made specifically for Svelte and Tailwind.

These tools provide a way to write CSS more efficiently whilst not being completely tied to a design system imposed by other component libraries.

Other tools

File Storage

Bunny provides a very straight forward API for handling files in the cloud.

Payment processing

PayPal makes it easy to handle payments without us manipulating sensitive user data.

Authentication

We couldn't find a library that made authenticating with both osu! and Discord at the same time easy, so we resorted to creating our own implementation.

Bottom line

Some developers may choose to switch out some of these elements for something else, but almost all of these technologies are here to stay, with the only one likely to be switched is Prisma (If we do switch, I'll explain why). These tools together deliver one of the best developer experiences for developing a modern full-stack web application.

Introducing Kyoso, an osu! tournament manager

Kyoso — Sun, 25 Jun 2023 19:31:04 +0000

osu! is a popular free-to-play rhythm game where you click circles to the beat of any song you choose to play. It's very straight forward to learn but mastering it is a completely different story, a story which has lead to the development of a large competitive scene. A common way to have players face against each other is through tournaments.

For years now, tournaments have been managed using Google Sheets, with many members of the community developing templates for specific uses like managing players and teams, pool beatmaps, calculate statistics for a round and many more uses. This has proved to be an effective way to handle the many tasks a tournament requires for it to be enjoyed by its participants, but it's far from perfect.

A few issues that spreadsheets face include:

They don't have a solution to authenticate players, leading to incorrect or dated information being inputted in forms.
They have performance issues, whether it be many scripts being loaded or a large amount of data being inputted into cells.
Templates either lock you in to a set of spreadsheets, making it hard to use custom templates; or have a set of templates that can work with others but are a pain to link.
They can hit Google's limit for invocations made to Apps Script functions when handling lots of data.

What's the issue?

You might saying that all of the above have a solution or don't even apply to some tournaments, and you'd be right actually, but having to implement these solutions requires more time and effort, not to mention that they can still be prone to errors. This is something that a small or even medium sized tournament is willing to go through without much issue, but for tournaments with a large staff team and a much greater registration count, these issues get harder and harder to deal with, not to mention that it leads to the tournament looking less professional, a concern that's becoming more prevalent as the tournament scene grows and becomes more mainstream.

What's our solution?

The name for our solution is Kyoso, a web application that aims to do what spreadsheets already do in a more elegant manner and also aiding in the previously mentioned pain points.

How it works

Kyoso has a set of "services" that help in different aspects, currently, the following services are planned to be implemented at some point:

Registrations: Handles everything related to teams, players, free agents and staff registrations.
Mappooling: Create mappools, suggest beatmaps and provide feedback for them.
Referee: Manage lobby and match schedules and provide referee functionality.
Statistics: Automatically calculate leaderboards and scores for a round's lobbies and matches.
Pickems: Host a tournament's pickems, this includes users signing up for pickems, handling picks submission and tracking total scores with a leaderboard.

The above descriptions are just the superficial details, as we will implement features that would be impossible or too difficult with spreadsheets, such as a player invite system for teams, a mappools search engine to view how underused or overused a beatmap is and much more.

The project is considerably complex, and therefore will take a lot of time to develop. If you'd like to contribute to this project, you could do so by joining our developer team or by providing feedback on the project. If you're interested in helping, contact mario564 on Discord.

We hope to make Kyoso as best as it can be so it can help shape the future of tournaments for this circle clicking game. We hope to see you using our platform for your osu! tournaments later down the road.

DEV Community: Kyoso