# Frontend

The frontend is a React and Vite application for browsing models, editing annotations, and managing atlas content.

Default dev URL: `http://localhost:5173`

## Stack

The current frontend uses:

- React 19
- Vite 7
- Tailwind CSS 4
- Radix UI primitives
- React Query for async data
- Three.js with React Three Fiber for model viewing
- a generated API client in `src/api/generated/`

Most application code is written in JavaScript and JSX. TypeScript is present mainly around tooling and generated client code.

## What the UI does today

The current app has three top-level views:

- Dashboard: browse annotations and uploaded models, filter by atlas and checked state, export CSV, and import CSV updates
- Atlases: inspect the schema of a selected atlas, add user photos or drawings to options, export atlas updates to ZIP, and import ZIP updates
- Editor: load an existing model or upload a new OBJ, MTL, and texture set, then create or continue an annotation

The navbar also exposes a global annotator name and a Czech or English language switch.

## Install and run

Install dependencies:

```bash
npm install
```

Start the development server:

```bash
npm run dev
```

Build for production:

```bash
npm run build
```

Preview the production build locally:

```bash
npm run preview
```

Lint the project:

```bash
npm run lint
```

## Backend URL configuration

The frontend resolves the backend base URL in `src/utils/api.js`.

Current behavior:

- if `VITE_API_BASE_URL` is set, that value is used
- otherwise the app falls back to `http://localhost:3002`
- trailing slashes are removed before URLs are built

Examples:

```bash
npm run dev
```

```bash
set VITE_API_BASE_URL=http://localhost:3002 && npm run dev
```

The generated API client is also pointed at the same base URL from `src/App.jsx`.

## API client generation

The package exposes:

```bash
npm run generate-api
```

The frontend keeps its OpenAPI source in `openapi.yaml` and generated output under `src/api/generated/`.

## Docker

The frontend Docker image is built in two stages:

- a Node 20 build stage that runs `npm ci` and `npm run build`
- an Nginx runtime stage that serves the built `dist/` folder

In the repository Docker stack, the frontend is exposed on `http://localhost:8081`.

The Nginx config proxies these paths to the backend container:

- `/api/`
- `/annotations/`
- `/models/`
- `/public/`
- `/export/`

All other routes fall back to `index.html`.

## Project layout

```text
frontend/
|- src/
|  |- api/generated/               # generated client code
|  |- components/form/             # annotation form UI
|  |- components/layout/           # dashboard, navbar, editor, atlas management
|  |- components/model/            # 3D model helpers and viewport pieces
|  |- components/ui/               # reusable UI primitives
|  |- context/                     # language and message dialog state
|  |- hooks/                       # editor and annotation hooks
|  |- utils/                       # API, import, export, and validation helpers
|  |- App.jsx
|  `- main.jsx
|- openapi.yaml
|- openapi-ts.config.ts
|- vite.config.js
`- nginx.conf
```

## Notes

- there is currently no checked-in frontend `.env.example`
- the app uses `src/utils/api.js` rather than hardcoded backend URLs
- the dev server runs through Vite without a custom proxy; requests go directly to the configured backend base URL