The frontend is built with [Vite](https://vitejs.dev/), [React](https://reactjs.org/), [TypeScript](https://www.typescriptlang.org/), [TanStack Query](https://tanstack.com/query), [TanStack Router](https://tanstack.com/router) and [Chakra UI](https://chakra-ui.com/).
* To install fnm follow the [official fnm guide](https://github.com/Schniz/fnm#installation). If you prefer nvm, you can install it using the [official nvm guide](https://github.com/nvm-sh/nvm#installing-and-updating).
* After installing either nvm or fnm, proceed to the `frontend` directory:
Notice that this live server is not running inside Docker, it's for local development, and that is the recommended workflow. Once you are happy with your frontend, you can build the frontend Docker image and start it, to test it in a production-like environment. But building the image at every change will not be as productive as running the local development server with live reload.
* Download the OpenAPI JSON file from `http://localhost/api/v1/openapi.json` and copy it to a new file `openapi.json` at the root of the `frontend` directory.
* To simplify the names in the generated frontend client code, modify the `openapi.json` file by running the following script:
Notice that everytime the backend changes (changing the OpenAPI schema), you should follow these steps again to update the frontend client.
## Using a Remote API
If you want to use a remote API, you can set the environment variable `VITE_API_URL` to the URL of the remote API. For example, you can set it in the `frontend/.env` file:
```env
VITE_API_URL=https://my-remote-api.example.com
```
Then, when you run the frontend, it will use that URL as the base URL for the API.
## Code Structure
The frontend code is structured as follows:
*`frontend/src` - The main frontend code.
*`frontend/src/assets` - Static assets.
*`frontend/src/client` - The generated OpenAPI client.
*`frontend/src/components` - The different components of the frontend.
*`frontend/src/hooks` - Custom hooks.
*`frontend/src/routes` - The different routes of the frontend which include the pages.
The frontend includes initial end-to-end tests using Playwright. To run the tests, you need to have the Docker Compose stack running. Start the stack with the following command:
```bash
docker compose up -d
```
Then, you can run the tests with the following command:
```bash
npx playwright test
```
You can also run your tests in UI mode to see the browser and interact with it running:
```bash
npx playwright test --ui
```
To stop and remove the Docker Compose stack and clean the data created in tests, use the following command:
```bash
docker compose down -v
```
To update the tests, navigate to the tests directory and modify the existing test files or add new ones as needed.
For more information on writing and running Playwright tests, refer to the official [Playwright documentation](https://playwright.dev/docs/intro).
