frontend-repo-architecturelisted

# Purpose Encode three production-proven React frontend architectures and their API/state/types conventions: module-scoped monolith, feature-sliced, and GraphQL-SSR. ## When to use - Setting up a new React + Vite + TypeScript frontend - Choosing between module-scoped, feature-sliced, or GraphQL-based folder structure - Designing the API layer (axios wrapper, fetch wrapper, or Apollo links) - Architecting state management (server-state vs client-state split) - Establishing type conventions (no codegen; hand-written API types) - Configuring runtime vs build-time environment variables - Implementing token refresh with race-guard logic - Structuring test files (contract tests, vitest + testing-library) - Reviewing an existing React frontend for architectural divergence ## Core conventions 1. **Shared stack baseline** — All three models use React 18/19 + Vite + TypeScript strict (`noUncheckedIndexedAccess: true`) + Tailwind + react-router-dom + zustand + Sentry + vitest + @testing-library/react. Function components only; PascalCase files. (reference service A, reference service B, reference service C) 2. **Three organizational models** — Choose one: - **Module-scoped** (`src/modules/<feature>/{api,components,hooks,stores,types,pages,route.tsx}` + `src/routes.tsx` aggregator) for large monoliths with parallel domains (reference service A) - **Feature-sliced** (`src/{features,pages,lib,stores,types,components/{ui,domain}}` + lazy-loaded pages) for medium-sized apps with