The frontend is built with Vite, React, TypeScript, TanStack Query, TanStack Router, Lucide React icons and Shadcn UI.

Before you begin, ensure that you have either the Node Version Manager (nvm)

• To install nvm, you can install it using the official nvm guide.

• After installing either nvm or fnm, proceed to the frontend directory:

cd frontend

• If the Node.js version specified in the .nvmrc file isn't installed on your system, you can install it using the appropriate command:

nvm install

• Once the installation is complete, switch to the installed version:

nvm use

• Within the frontend directory, install the necessary NPM packages:

npm install

• And start the live server with the following npm script:

npm run dev

• Then open your browser at http://localhost:5173/.

• Activate the backend virtual environment.
• From the top level project directory, run the script:

./scripts/generate-client.sh

• Commit the changes.

Notice that everytime the backend changes (changing the OpenAPI schema), you should follow these steps again to update the frontend client.

The frontend code is structured as follows:

• frontend/src - The main frontend code.
• frontend/src/client - The generated OpenAPI client.
• frontend/src/components - The different components of the frontend.
• frontend/src/routes - The different routes of the frontend which include the pages.

routeTree.gen.ts is automatically generated by @tanstack/router-plugin plugin that watches for changes in frontend/src/routes.