# Job Tracker frontend

The frontend is a statically exported Next.js 16 application using React 19, TypeScript, Material UI, and React Router. Next.js supplies the build shell; authenticated and public application routes are defined in `src/App.tsx`.

## Requirements

- Node.js 24 (the version used by CI)
- npm 11 or a compatible npm release
- The Job Tracker API at `http://localhost:5202` for normal local use

Install the lockfile exactly:

```powershell
npm ci
```

## Development

Start the application on Next.js's default development port:

```powershell
npm run dev
```

Open `http://localhost:3000`. The client calls `http://localhost:5202/api` on localhost unless `NEXT_PUBLIC_API_BASE_URL` overrides it.

The Playwright harness uses port `3300` and starts its own isolated API and SQLite database. Do not point it at a development or production database.

## Quality gates

```powershell
npm run lint
npm test -- --runInBand
npm run build
```

The production build is written to `out/` and is served by nginx in the frontend container.

Run the browser suite after installing Chromium once:

```powershell
npx playwright install chromium
npm run test:e2e
```

The browser suite covers login, job creation, Career Workspace routing, and public CV/PDF access against isolated services.

## Useful paths

- `app/` — thin Next.js application shell
- `src/App.tsx` — application routes and shared authenticated shell
- `src/api.ts` — API client and local/default base URL
- `src/components/` — feature and shared UI components
- `src/i18n/` — English and Norwegian Bokmål UI messages
- `src/theme.ts` — application theme
- `e2e/` — Playwright browser tests
- `next.config.js` — static-export configuration
- `playwright.config.ts` — isolated browser-test services

## Runtime configuration

`NEXT_PUBLIC_API_BASE_URL` is the only browser-visible API setting. Leave it unset in the production container so nginx proxies same-origin `/api` requests. Values prefixed with `NEXT_PUBLIC_` are embedded at build time and must never contain secrets.

See the repository `README.md` for full-stack development and `deploy/README.md` for production requirements.