Skip to content

TypeScript Frontend (React)

TypeScript

  • Build: Vite.
  • Tests: Vitest with React Testing Library for components; Playwright with playwright-bdd runs the Gherkin scenarios end to end, against MSW mocks or a running backend.
  • Lint: Biome lints and formats; dependency-cruiser enforces the layering app → infra → usecase → domain.
  • Rationale: static types catch contract mismatches, such as component props and API responses, at compile time instead of in a user's browser, and make refactoring safe.

Frontend (React)

  • Structure: React with the layers app, infra, usecase, and domain below src/; BDD scenarios in test/bdd/features/, run by Playwright.
  • Container image: the built site is served from an image, built, scanned, and pushed like a service's.
  • Rationale: React has the largest pool of contributors and the most mature ecosystem of testing tools and component libraries; the supported browsers are the current versions of the evergreen browsers, on desktop and mobile.