Initial commit: React frontend (SLP Software) + AIDLC workflow docs

Co-authored-by: Junie <junie@jetbrains.com>
2026-07-20 00:19:44 +02:00
commit e299f1c745
73 changed files with 7275 additions and 0 deletions
@@ -0,0 +1,49 @@
+# 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