SlpSoftware/aidlc-docs/features/react-frontend/construction/plans/react-frontend-app-nfr-design-plan.md

NFR Design Plan — react-frontend-app

Steps

• Define resilience pattern (error boundary fallback behavior)
• Define scalability pattern (justify minimal need given static single-page scope)
• Define performance pattern (TanStack Query caching config, font-loading strategy)
• Define security pattern (SRI application, CSP scope given deferred HTTP headers)
• Define logical components (theme store, content store, query client, router instance)
• 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)

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)

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)