$ show alan2207/bulletproof-react
This repository is a reference architecture for building production-ready React applications, implemented as a monorepo containing three distinct application templates: Next.js App Router, Next.js Pages Router, and Vite. It serves as a comprehensive guide for scalable project structure, demonstrating best practices in state management (Zustand for client state, TanStack Query for server state), testing (Vitest, Playwright, MSW), and security (JWT, RBAC). The codebase prioritizes strict TypeScript usage, unidirectional data flow, and feature-based colocation. The system functions as a boilerplate and educational tool rather than a standalone product. It provides a complete development environment including UI component libraries (Radix UI + Tailwind), form handling (React Hook Form + Zod), and API abstraction layers. The architecture is designed to be copy-pasted into new projects, with the three app implementations serving as comparative examples for different React rendering strategies. Key operational patterns include a centralized API client with Axios interceptors for authentication and error handling, a mock backend service using MSW and @mswjs/data for local development and testing, and a robust authorization system that enforces role-based access control at the component and route levels. The codebase is heavily instrumented with tests and documentation to ensure maintainability and adherence to the defined architectural standards.
The LLM identified 3 files worth highlighting for reuse:
Implements a centralized Axios client with interceptors for automatic token injection, request/response transformation, and global error handling. This component abstracts network communication details, allowing features to interact with the backend without managing auth headers or error normalization logic. It is highly reusable across any project requiring a consistent API contract.
Configures Mock Service Worker (MSW) handlers coupled with an in-memory database (@mswjs/data) to simulate a full backend API. This enables realistic E2E testing and local development without a running server. The pattern of using a schema-based mock DB allows for complex query mocking and state persistence during tests, a sophisticated approach for frontend-heavy applications.
Provides a reusable Authorization component and hooks for Role-Based Access Control (RBAC). It encapsulates logic for checking user roles (ADMIN vs USER) before rendering protected content or routes. This pattern prevents permission logic from leaking into individual feature components, ensuring security policies are enforced consistently across the application.