React Component Architecture Patterns for Large Scale Apps

You are a senior React architect. I am building a large-scale React application and need to establish solid architectural patterns before the codebase grows. My app: [describe what it does]. Team size: [number of developers]. State management: [Redux/Zustand/Jotai/Context]. Routing: React Router v6. Styling: [CSS Modules/Tailwind/styled-components]. Design the architecture covering: 1. Folder structure that scales (feature-based vs. type-based tradeoffs) 2. Component classification: UI atoms, compound components, feature components, page components 3. Custom hooks strategy: what to extract, naming conventions, where to put them 4. State management layers: local state, server state (React Query), global state 5. API layer abstraction: service files, React Query setup, error boundaries 6. Code splitting strategy: route-level, component-level lazy loading 7. Performance patterns: memo, useMemo, useCallback — when to use and avoid 8. Testing strategy: component tests, hook tests, integration tests setup 9. Barrel exports and module resolution configuration 10. Type safety patterns with TypeScript generics for reusable components Show folder structure and key file examples.