50 lines
3.3 KiB
Markdown
50 lines
3.3 KiB
Markdown
# NFR Design Plan — react-frontend-app
|
|
|
|
## Steps
|
|
|
|
- [x] Define resilience pattern (error boundary fallback behavior)
|
|
- [x] Define scalability pattern (justify minimal need given static single-page scope)
|
|
- [x] Define performance pattern (TanStack Query caching config, font-loading strategy)
|
|
- [x] Define security pattern (SRI application, CSP scope given deferred HTTP headers)
|
|
- [x] Define logical components (theme store, content store, query client, router instance)
|
|
- [x] Generate nfr-design-patterns.md and logical-components.md
|
|
|
|
## Category Applicability Justification
|
|
|
|
- **Resilience Patterns**: Applicable at a minimal level — a top-level React error boundary is the only meaningful resilience concern for a static, no-backend frontend (per SECURITY-15 from NFR Requirements).
|
|
- **Scalability Patterns**: Not meaningfully applicable — this is a static single-page site with no server-side scaling concerns; the only "scaling" consideration is adding more routes/queries later, already covered by the Functional Design's extensible route/query structure.
|
|
- **Performance Patterns**: Applicable — caching behavior of the placeholder TanStack Query hook and web font loading strategy are worth deciding now.
|
|
- **Security Patterns**: Applicable at the scope already defined in NFR Requirements (SECURITY-10/13/15 addressed now; SECURITY-04/14 deferred) — this stage just needs to decide the concrete implementation pattern.
|
|
- **Logical Components**: Applicable — need to name the concrete provider/store components (ThemeProvider, QueryClientProvider, Router instance) that implement the functional design.
|
|
|
|
## Clarification Questions
|
|
|
|
Please answer each question by filling in the letter choice after the `[Answer]:` tag.
|
|
|
|
### Question 1: Error boundary fallback behavior
|
|
When an unexpected rendering error occurs, what should the top-level error boundary show?
|
|
|
|
A) A minimal, on-brand fallback message (styled with the current theme) with no technical details, e.g. "Er ging iets mis. Probeer de pagina te vernieuwen."
|
|
B) A plain, unstyled fallback message (not necessarily following the current theme)
|
|
X) Other (please describe after [Answer]: tag below)
|
|
|
|
[Answer]: A
|
|
|
|
### Question 2: TanStack Query caching for the placeholder hook
|
|
Since `usePackagesQuery` currently wraps static data (no real network call), how should its caching be configured?
|
|
|
|
A) Use TanStack Query defaults (`staleTime: 0`, refetch on window focus) — harmless for static data since the `queryFn` always returns the same static array anyway
|
|
B) Set a long `staleTime` (e.g. `Infinity`) now, anticipating that once real data-fetching is wired in later, the content won't need to refetch constantly
|
|
X) Other (please describe after [Answer]: tag below)
|
|
|
|
[Answer]: A
|
|
|
|
### Question 3: Web font loading strategy
|
|
The reference design loads Google Fonts (Sora, Instrument Sans, JetBrains Mono) via `<link>` tags. How should this be handled in the React app?
|
|
|
|
A) Keep loading via Google Fonts CDN `<link>` tags in `index.html`, adding SRI hashes where Google Fonts' CSS response allows it (per SECURITY-13 decision)
|
|
B) Self-host the font files as static assets bundled with the app (avoids depending on an external CDN and SRI complications, at the cost of larger initial bundle/setup effort)
|
|
X) Other (please describe after [Answer]: tag below)
|
|
|
|
[Answer]: B
|