# Frontend (web) The dashboard is a single-page React app under [web/](../web/) that lets users author test scenarios, configure the LLM, and view the system overview. It is built with **Vite + React 19 + TypeScript**, stores user-authored scenarios in **Firebase Firestore**, and talks to the Ktor backend through a Vite dev proxy. --- ## 1. Stack at a glance | Concern | Choice | |---|---| | Bundler / dev server | Vite 7 | | UI library | React 19 + react-dom | | Routing | react-router-dom 7 (`BrowserRouter`) | | HTTP | axios 1.11 (for `/run-test`); native `fetch` (for `/config`) | | Persistence (scenarios) | Firebase 12 — Firestore | | Diagrams | mermaid 11 (rendered on the About page) | | i18n | Custom lightweight context (English / French) | | Styling | CSS Modules per component, plus globals in `App.css` / `index.css` | | Theming | `data-theme` attribute on `` + localStorage persistence | | Lint | eslint 9 + typescript-eslint + react-hooks/refresh plugins | Configured in [web/package.json](../web/package.json), [web/vite.config.ts](../web/vite.config.ts), [web/tsconfig.json](../web/tsconfig.json), [web/eslint.config.js](../web/eslint.config.js). --- ## 2. Routes Defined in [web/src/App.tsx](../web/src/App.tsx) using `react-router-dom`: | Path | Component | Purpose | |---|---|---| | `/` | [Home](../web/src/pages/home/Home.tsx) | Author scenarios, list saved ones, run tests | | `/settings` | [Settings](../web/src/pages/settings/Settings.tsx) | LLM / agent configuration | | `/about` | [About](../web/src/pages/about/About.tsx) | System overview + mermaid architecture diagram | The shell wraps every route in `` → `` → `` / `

` / `