Frontend

Programming languages and frameworks used

The frontend is written in TypeScript with React as the framework. It uses the Material UI library to streamline the UI process.

It uses TanStack Router as the router. Fetch and cache of the API is managed through TanStack Query. OpenAPI fetch is used to retrieve the OpenAPI api in the backend.

The NiiVue open source library is used as the DICOM Viewer.

File structure

src/main.tsx: application entry point.

src/routes: route definitions used by TanStack Router.

src/routeTree.gen.ts: generated route tree file (do not edit manually).

src/api: API client definitions and helpers to call backend endpoints.

src/services: higher-level services that combine API calls and frontend logic.

src/features: feature-based modules.

src/features/(feature)/components: UI components specific to a feature.

src/features/(feature)/hooks: React hooks specific to a feature.

src/components: reusable shared UI components.

src/hooks: reusable shared React hooks.

src/providers: global React providers (query client, theme, contexts, etc.).

src/theme: Material UI theme configuration.

src/constants: application constants.

src/types: shared TypeScript types and interfaces.

src/utils: generic utility functions.

src/test-utils: helpers used by tests.

Fetching OpenAPI compliant API

The backend uses tsoa to provide an API that is OpenAPI compliant. You have to fetch it using the following command to use the API from the frontend after modifying it.

npm run gen:api

Usage

Don't build the Docker image either. Use exactly the same commands as the backend.