Frontend
August 7, 2026 ยท View on GitHub
The frontend is React 19, TypeScript, MUI, TanStack Query, Vitest, Prettier, and ESLint. Use the Node version in frontend/.nvmrc and the npm version pinned by frontend/package.json.
cd frontend
npm ci
npm run build
npm run test:ui
npm run lint
npm run typecheck
npm run format:check
Use npm run mock:api with npm start for mock development, or npm run start:proxy-and-server with a cluster. npm run apis:all requires Docker.
React effects
- Use
useEffectonly for external synchronization such as browser APIs, timers, subscriptions, storage, imperative DOM APIs, or external async systems. - Derive UI state during rendering; put user actions and mutation outcomes in event handlers or mutation callbacks.
- Do not let refreshes reset user-controlled state without an explicit product requirement.
- Do not suppress
react-hooks/exhaustive-depsunless the invariant is documented and tested. - For every changed effect, classify it as external sync, derived state, event-driven, state reset, or effect chain. Only external sync is normally acceptable.
When effect behavior changes, add or run a focused regression test for duplicate mutation success, refresh-preserved selections, retry recovery, or unexpected mount-time callbacks.
Prettier uses single quotes, trailing commas, and a 100-character line width.