Bulletproof React architecture

Source: bulletproof-react by Alan Alickovic, MIT licensed. The upstream repo is now a monorepo with three app variants: apps/react-vite/, apps/nextjs-app/, apps/nextjs-pages/. This skill follows the react-vite version as primary. See NOTICE.md for the license and adaptation note.

Vocabulary

Use these terms exactly. Don't substitute "module," "service," or "component" where the repo means "feature."

• Feature: a self-contained folder under src/features/, holding everything specific to one piece of product functionality: its own api/, components/, hooks/, stores/, types/.
• Shared code: anything in the top-level components/, hooks/, lib/, types/, utils/. Usable from any feature or from the app layer. Never depends on a feature.
• App layer: src/app/, meaning routes, root component, providers, router config. The only layer allowed to compose multiple features together.

Rules of thumb

A scannable summary. Each one is expanded in the reference files linked below.