Binary Duel, front-end in 2 weeks with Svelte and DaisyUI
Tags: webdev, svelte, daisyui, tailwindcss
Published: 2024-03-10 18:39:24

## Introduction

In the ever-evolving landscape of frontend development, developers like me are always looking for tools and frameworks that can help us build efficient, responsive, and visually appealing UIs. A powerful combination that is getting more and more attention is [Svelte](https://svelte.dev/), a lightweight JavaScript framework for making interactive web pages, coupled with [DaisyUI](https://daisyui.com/), a high-performance [Tailwind CSS](https://tailwindcss.com/) component library.

In this article, I will discuss this two-week journey to build a web app and learn this fantastic tooling combination.

## What is the App?

The idea behind [Binary Duel](https://binary-duel.com/) was to build a real-time quiz game for programmers. It was supposed to be easy to understand, snappy, and funny when possible. The game status can be divided into four main stages:

- Create/join a duel and wait for an opponent
- Choose a category
- Answer a question
- View the result of the game

The flow of a duel consists of these four stages in order, with a repetition of the two middle stages multiple times, depending on the number of questions per game.

The next step was then to choose how many pages to build and how they should interact.

## Frontend Architecture

Unsurprisingly, the main dependency of the project is Svelte, and for that reason, I used [SvelteKit](https://kit.svelte.dev/) to lay down the structure of the website. The wonderful thing about this *metaframework* is that it comes with [filesystem-based routing](https://kit.svelte.dev/docs/routing): in short, means that depending on the folder structure of the project, the routing was already taken care of.

For passing data across the app, I leveraged the [Svelte Context API](https://svelte.dev/docs/svelte#setcontext) instead. For state management, I used [Tansu](https://github.com/AmadeusITGroup/tansu), a lightweight open-source library inspired by the implementation of Svelte stores.

The styling was handled by [Tailwind](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/).

## State Management

The state in the app relied on three main pillars: the [Svelte Context API](https://svelte.dev/docs/svelte#setcontext), the [Tansu](https://github.com/AmadeusITGroup/tansu) library, and browser [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

### Context API

Since the game is divided into multiple stages with different pages, I needed a solution for having the same persistent state across the app. First of all, the state of the application is quite small, defined by individual [Tansu](https://github.com/AmadeusITGroup/tansu) stores that are accessible everywhere. The [Svelte Context API](https://svelte.dev/docs/svelte#setcontext) works like a dictionary: using a key, you can store some values. Therefore, the dependency injection required for this was achieved in two steps: first, I stored the values, then, whenever I needed them, I could retrieve them. To make things easier, I used two helper functions, one for storing and one for retrieving. With this approach, I did not have to worry about which key to use.

An important notice: `setContext` and `getContext` functions must be called during the initialization of the component, exactly like the lifecycle methods.

``` ts
  const gameStatus$ = writable({} as GameStatus);
  const gameStatusInjectionKey = Symbol('gameStatus');

  function setGameStatus() {
    setContext(gameStatusInjectionKey, gameStatus$);
  }

  export function getGameStatus(): Writable<GameStatus> {
    return getContext(gameStatusInjectionKey);
  }
```

In the [Binary Duel](https://binary-duel.com/) web app, I decided to split the state into multiple *sub-states*. This granularity allowed me to use only the pieces of state I needed. I used a single function to initialize the state in the `+layout.svelte` file at the top of the project, to be sure that no matter the component, I would always have access to the state.

``` js
<script>
  import { initContext } from '$lib';
  import '../app.css';
  initContext();
</script>

<slot />

 ```

### Tansu

The main reason why I used [Tansu](https://github.com/AmadeusITGroup/tansu) was that I wanted to experiment with a reactive library that was not framework-dependent and easily reusable for future projects. It implements all the features of the [Svelte stores](https://svelte.dev/docs/svelte-store) and can be used inside reactive blocks without any issues. It also comes with other features that were not leveraged during the project, but I will keep experimenting with it since it looks really promising.

### Local Storage

One might ask why there is a need to use local storage if we are already using Dependency Injection and a store system ([Tansu](https://github.com/AmadeusITGroup/tansu) in this case). The answer is simple: I used the local storage as a fallback in case of a page refresh. As mentioned in the introduction, the idea was to build something lightweight and simple; therefore, I avoided sending more requests to the backend when possible.

Once again, I used the same implementation as for the Context API with getter and setter functions.

``` ts
export function setGameStatusInStorage() {
  localStorage.setItem('gameStatus', JSON.stringify(gameStatus$()));
}

export function getGameStatusFromStorage(): GameStatus | undefined {
  const gameStatus = localStorage.getItem('gameStatus');
  if (gameStatus) {
    return JSON.parse(gameStatus);
  }
}

export function clearGameStatusFromStorage() {
  localStorage.removeItem('gameStatus');
}
```

## Backend Communication

As a front-end developer, I only worked on the UI; the backend was done by a friend of mine. You can check his article [here](https://simonedutto.github.io/2024-03-09/binary-duel)!

One might think that since it is a real-time quiz game, there is some sophisticated system to sync the state between the players...well, they would be wrong. This was a small side project for both of us, and we did not invest money into it (except for the domain name).

We were therefore limited by the free tiers, and the fastest and quickest solution that we developed was a polling system (more details about why we took that decision and did not go with sockets can be found [here](https://simonedutto.github.io/2024-03-09/binary-duel)). In fact, when a player has made an action and is waiting for the opponent, their client will start polling the server with a request every second, demanding the status of the game.
Requests will be sent until the status changes, and the game moves on.

To safeguard the backend, we put limits in place regarding the maximum number of games and the number of requests that can be sent in a certain time period. These limit values were found after **friendly** DDoSing the backend multiple times.

## Error Handling

I also implemented a basic error handling system in case of a communication error with the backend server or if trying to access a non-existent game. The app will redirect to the home screen, and thanks to the local storage, display the error message.

## Customization

[Tailwind CSS](https://tailwindcss.com/) is the backbone used for all the styling present in the app, allowing me to write close to no CSS at all and using only helper classes.

For the components, I used [DaisyUI](https://daisyui.com/) with the customization theming tool present on their page. I could easily pick the custom color theme present in the app.


![Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pua903zp3hwefysscs8.png) 
![Lobby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6zy6gk5m713q11o40hw.png) 
![Rules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30nwz5tlyraczb2ms9s5.png)

![Category](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7jo2q11lemjooumnaj8.png)
![Question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ort1oyzo75ly437siezp.png)
![Ending](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5893zv2jf0kik2gmap0.png)

I also used [tailwindcss-animated](https://www.tailwindcss-animated.com/) which made the animations on the screen in a few seconds.

The end screen drawings were my creations, of which I am very proud. They were first sketched and then redrawn with [Inkscape](https://inkscape.org/) to have them as SVGs. The same goes for the app's logo.

## Hosting

For hosting, I went with [Cloudflare](https://www.cloudflare.com/)'s solution because the free tier is extremely convenient for what they offer and for the seamless integration with [SvelteKit](https://kit.svelte.dev/). In just a few minutes, it was possible to set up the process and automatically deploy the frontend for every update on the main branch (and they also offer the possibility to deploy previews for every PR on the main branch).

Another great feature of [Cloudflare](https://www.cloudflare.com/) (they are not paying me; I just loved the service they offer) is the analytics they provide. In fact, they are not using any cookies and are really careful with data anonymization.

## What Would I Do Better?

First of all, I want to make it clear that this was an experiment, and I do not consider myself an expert on the technologies used. I used them to become more familiar.

One thing that I would work on would be to better structure the app and extract more components to make it more modular and easier to maintain.

I would probably optimize the app a bit more to maximize Lighthouse metrics.

Even though I am really proud of the end-game screen, I would work on that to make it funnier and catchier, and maybe with more animations.

I would also experiment with some animations here and there throughout the game to make the app more engaging.

Regarding the game itself, it would be nice to have a global leaderboard and some ELO system, but that would require a login for each user and would go against the idea of a simple and easy-to-use app.

Maybe if there is demand, we will add more questions and more features to the app, so consider [buying us a coffee](https://www.buymeacoffee.com/binary.duel).

## Conclusion

We developed this app as a fun side project to experiment with technologies that we wanted to test, and I personally enjoyed working with my friend and creating this small, fun app. Soon I will have the code available so you can judge my mistakes 😇

Please consider reading my friend’s article. Please consider reading his article [here](https://simonedutto.github.io/2024-03-09/binary-duel).