The tools we use to shape Kyoso
Published: 2023-06-25 22:51:29

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](https://www.typescriptlang.org), 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](https://www.typescriptlang.org). 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](https://www.postgresql.org), but we don't run raw queries, instead we use [Prisma](https://www.prisma.io), 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](https://trpc.io) 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](https://tailwindcss.com) provides a ton of CSS utility classes that keeps your styling very close to the HTML while also allowing customization, something that [Skeleton](https://www.skeleton.dev) 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](https://bunny.net) provides a very straight forward API for handling files in the cloud.

### Payment processing

[PayPal](https://developer.paypal.com/home) 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.