TTime/frontend

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). This is to make it hard to write bad code, by encouraging actual typing and not just using 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:

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:

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.