Here is a clean, comprehensive checklist of frontend architecture, design patterns, and principles topics that are commonly expected in interviews. You can treat this as a learning roadmap and tick them off one by one.
---
1. Frontend Architecture
Application architecture vs component architecture
Feature-based folder structure
Layer-based folder structure
Colocation of files
Separation of concerns (UI / logic / data)
Smart (container) vs dumb (presentational) components
Business logic extraction
Service / API layer design
Domain-driven thinking in frontend
Monorepo basics (Nx / Turborepo concepts)
Micro-frontends (high level)
---
2. Component Design
Reusable component design
Component API design (props, defaults, extensibility)
Controlled vs uncontrolled components
Stateless vs stateful components
Component composition vs inheritance
Compound components pattern
Slot / children-based APIs
Headless components
Design system architecture
Atomic design methodology
---
3. State Management
Local state vs lifted state
Global state vs scoped state
React Context (when and when not)
Redux fundamentals
Redux Toolkit
Alternative state managers (Zustand, Jotai, Recoil)
Server state vs client state
React Query / SWR
URL state (query params)
Form state management
Derived state
Normalized state shape
---
4. Logic Reuse & Abstractions
Custom Hooks pattern
Higher-Order Components (HOC)
Render Props pattern
Composition over inheritance
Avoiding prop drilling
Dependency injection in frontend
Adapter pattern (API normalization)
Factory pattern
Observer pattern
Strategy pattern
---
5. React Rendering & Lifecycle (Architecture-Level)
React render cycle
Reconciliation
Keys and identity
useEffect lifecycle & pitfalls
Strict Mode behavior
Concurrent rendering (conceptual)
Suspense fundamentals
Error boundaries
---
6. Performance & Optimization
Preventing unnecessary re-renders
React.memo
useMemo
useCallback
Code splitting
Lazy loading
Virtualization (lists, tables)
Debouncing & throttling
Memoization trade-offs
Measuring performance (React DevTools, Profiler)
---
7. SOLID & Design Principles
Single Responsibility Principle (SRP)
Open/Closed Principle (OCP)
Liskov Substitution Principle (LSP)
Interface Segregation Principle (ISP)
Dependency Inversion Principle (DIP)
Separation of Concerns
DRY (Don’t Repeat Yourself)
KISS
YAGNI
Law of Demeter
Immutability
---
8. Data Fetching & Side Effects
Data fetching strategies
REST vs GraphQL (high level)
Handling loading / error / empty states
Retry & caching strategies
Optimistic updates
Canceling requests
Race conditions
Side effects isolation
Background refetching
Polling vs WebSockets
---
9. Styling Architecture
CSS architecture basics
CSS Modules
Styled Components / CSS-in-JS
Utility-first CSS (Tailwind)
Theming
Design tokens
Responsive design architecture
Mobile-first vs desktop-first
Dark mode architecture
---
10. Forms & Validation
Form architecture
Controlled vs uncontrolled forms
Form libraries (React Hook Form, Formik)
Validation strategies
Async validation
Multi-step forms
Accessibility in forms
---
11. Routing & Navigation
Client-side routing concepts
Layout-based routing
Nested routes
Route guards
Auth-based routing
Dynamic routes
URL as state
Shallow routing
---
12. Error Handling & Resilience
Error boundaries
Global error handling
Graceful degradation
Fallback UIs
Retry strategies
Logging & monitoring (high level)
---
13. Testing Architecture
Unit vs integration vs e2e tests
Testing pyramid
Testing React components
Testing hooks
Mocking APIs
Testability by design
Avoiding brittle tests
---
14. Accessibility (Often Overlooked)
Semantic HTML
ARIA roles (when necessary)
Keyboard navigation
Focus management
Screen reader considerations
Accessible component APIs
---
15. Security (High Level)
XSS basics
CSRF basics
Secure handling of tokens
Frontend auth flows
Input sanitization
---
---
1. Frontend Architecture
Application architecture vs component architecture
Feature-based folder structure
Layer-based folder structure
Colocation of files
Separation of concerns (UI / logic / data)
Smart (container) vs dumb (presentational) components
Business logic extraction
Service / API layer design
Domain-driven thinking in frontend
Monorepo basics (Nx / Turborepo concepts)
Micro-frontends (high level)
---
2. Component Design
Reusable component design
Component API design (props, defaults, extensibility)
Controlled vs uncontrolled components
Stateless vs stateful components
Component composition vs inheritance
Compound components pattern
Slot / children-based APIs
Headless components
Design system architecture
Atomic design methodology
---
3. State Management
Local state vs lifted state
Global state vs scoped state
React Context (when and when not)
Redux fundamentals
Redux Toolkit
Alternative state managers (Zustand, Jotai, Recoil)
Server state vs client state
React Query / SWR
URL state (query params)
Form state management
Derived state
Normalized state shape
---
4. Logic Reuse & Abstractions
Custom Hooks pattern
Higher-Order Components (HOC)
Render Props pattern
Composition over inheritance
Avoiding prop drilling
Dependency injection in frontend
Adapter pattern (API normalization)
Factory pattern
Observer pattern
Strategy pattern
---
5. React Rendering & Lifecycle (Architecture-Level)
React render cycle
Reconciliation
Keys and identity
useEffect lifecycle & pitfalls
Strict Mode behavior
Concurrent rendering (conceptual)
Suspense fundamentals
Error boundaries
---
6. Performance & Optimization
Preventing unnecessary re-renders
React.memo
useMemo
useCallback
Code splitting
Lazy loading
Virtualization (lists, tables)
Debouncing & throttling
Memoization trade-offs
Measuring performance (React DevTools, Profiler)
---
7. SOLID & Design Principles
Single Responsibility Principle (SRP)
Open/Closed Principle (OCP)
Liskov Substitution Principle (LSP)
Interface Segregation Principle (ISP)
Dependency Inversion Principle (DIP)
Separation of Concerns
DRY (Don’t Repeat Yourself)
KISS
YAGNI
Law of Demeter
Immutability
---
8. Data Fetching & Side Effects
Data fetching strategies
REST vs GraphQL (high level)
Handling loading / error / empty states
Retry & caching strategies
Optimistic updates
Canceling requests
Race conditions
Side effects isolation
Background refetching
Polling vs WebSockets
---
9. Styling Architecture
CSS architecture basics
CSS Modules
Styled Components / CSS-in-JS
Utility-first CSS (Tailwind)
Theming
Design tokens
Responsive design architecture
Mobile-first vs desktop-first
Dark mode architecture
---
10. Forms & Validation
Form architecture
Controlled vs uncontrolled forms
Form libraries (React Hook Form, Formik)
Validation strategies
Async validation
Multi-step forms
Accessibility in forms
---
11. Routing & Navigation
Client-side routing concepts
Layout-based routing
Nested routes
Route guards
Auth-based routing
Dynamic routes
URL as state
Shallow routing
---
12. Error Handling & Resilience
Error boundaries
Global error handling
Graceful degradation
Fallback UIs
Retry strategies
Logging & monitoring (high level)
---
13. Testing Architecture
Unit vs integration vs e2e tests
Testing pyramid
Testing React components
Testing hooks
Mocking APIs
Testability by design
Avoiding brittle tests
---
14. Accessibility (Often Overlooked)
Semantic HTML
ARIA roles (when necessary)
Keyboard navigation
Focus management
Screen reader considerations
Accessible component APIs
---
15. Security (High Level)
XSS basics
CSRF basics
Secure handling of tokens
Frontend auth flows
Input sanitization
---
16. Build & Tooling (Architecture Awareness)
Bundlers (Vite, Webpack)
Tree shaking
Environment configs
Code quality tools (ESLint, Prettier)
TypeScript in architecture
Linting as architectural guardrails
---
17. Next.js / Meta-Framework Concepts (If Applicable)
CSR vs SSR vs SSG vs ISR
App Router architecture
Server Components (conceptual)
Data fetching in App Router
Streaming & Suspense
Edge vs Node runtimes
---
18. Team & Process (Interview Favorites)
Code review practices
Architectural decision records (ADR)
Handling tech debt
Incremental refactoring
Working in large teams
Communicating architectural decisions
---
How to Use This List
Learn concept → when to use → trade-offs
Bundlers (Vite, Webpack)
Tree shaking
Environment configs
Code quality tools (ESLint, Prettier)
TypeScript in architecture
Linting as architectural guardrails
---
17. Next.js / Meta-Framework Concepts (If Applicable)
CSR vs SSR vs SSG vs ISR
App Router architecture
Server Components (conceptual)
Data fetching in App Router
Streaming & Suspense
Edge vs Node runtimes
---
18. Team & Process (Interview Favorites)
Code review practices
Architectural decision records (ADR)
Handling tech debt
Incremental refactoring
Working in large teams
Communicating architectural decisions
---
How to Use This List
Learn concept → when to use → trade-offs