Bulletproof React is an architectural approach for React applications inspired by Alan Alickovic's open-source project. It centers on feature-based organization where all code related to a feature lives together, rather than grouping by file type. Key principles include: exposing only approved exports via public API index files, enforcing boundaries with ESLint rules, separating state by type (UI state in components, app state in Zustand, server state in TanStack Query, URL state in the browser), centralizing API communication in a dedicated layer, and treating security and performance as architectural concerns from day one. Testing uses Vitest, React Testing Library, Playwright, and MSW. The approach adds overhead and may be overkill for small projects, but pays dividends as codebases grow.
Table of contents
The Real Problem With ReactThe Core Idea: Organize by FeaturesShared Code Still ExistsPublic APIs: Protecting Your ArchitectureEnforcing Architecture With ESLintRethinking State ManagementAPI Communication Without ChaosSecurity Is Part of ArchitecturePerformance Should Not Be OptionalTesting That Reflects RealityWhen Bulletproof React Is Too MuchFinal Thoughts47.3K Impressions2 Comments