# The Frontend

This is a React + TypeScript + Vite project. It is a single-page application (SPA) that communicates with the backend via a REST API.
Most of this looks very complex, but it's mostly just a lot of boilerplate due to the ugodly amount of abstraction that comes with TypeScript and React, and just modern web development in general.

**Keep in mind** that the tooling for the frontend is configured to be extra strict (see the [eslint config](.eslintrc.cjs)). This is to make it hard to write bad code, by encouraging actual typing and not just using [any](https://www.typescriptlang.org/docs/handbook/basic-types.html#any) everywhere. This can be a bit of a struggle to work with at first, and I might have to backpedal on this if it becomes too much of a hassle. (Those familiar with Java will be more confused by the lack of types than the presence of them.)

## Build Instructions

Our build tool, npm, is the only dependency required to build this project. It handles fetching the dependencies and placing them in the famously huge `node_modules` directory, also known as the heaviest object in the known universe.

### Development

For a development session, in the `frontend` directory, run:

```sh
npm install
npm run dev
```

For development, you use `npm run dev` to start a development server. This server will automatically rebuild the project when you make changes to the source code, and it will also automatically reload the page in your browser. The issue is that the development server will run without the backend, **so you will need to run the backend separately during development** if you want any meaningful data to be displayed.

### Release

The release build is usually automated by the CI/CD pipeline, but you can also build it manually. In the `frontend` directory, run:

```sh
npm install
npm run build
```

The build target results in a `dist` directory, which contains the static assets that can be served by a web server. This is the directory that will be served by the backend. Think of this like compiling a program, the .exe/elf/binary is the `dist` directory.