🖥️ Frontend Architecture

Structuring frontend applications for scalability and maintainability.

Project structure (feature-based)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api.ts
│   │   └── types.ts
│   ├── dashboard/
│   └── settings/
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   └── types/
├── app/
│   ├── routes.tsx
│   └── layout.tsx
└── lib/
    ├── api-client.ts
    └── config.ts

Component principles

• Single responsibility — One component, one job
• Composition over inheritance — Build complex UIs from simple pieces
• Props down, events up — Data flows one direction
• Dumb components — Most components should be presentational
• Smart containers — Few components handle data fetching and state

State management guide

State type	Where to put it	Tool
UI state	Component (local)	useState
Form state	Form library	React Hook Form, Formik
Server state	Cache layer	TanStack Query, SWR
Global UI	Context or store	Zustand, Jotai
URL state	Router	Search params

Performance rules

• Avoid unnecessary re-renders (React.memo, useMemo, useCallback)
• Lazy load routes and heavy components
• Virtualize long lists (TanStack Virtual)
• Debounce user input (search, resize)
• Optimize images and fonts

Accessibility basics

• Semantic HTML (button, nav, main, not all div)
• Alt text on images
• Keyboard navigation support
• Sufficient color contrast
• ARIA labels when semantics aren't enough