feature-arch

Feature-Based Architecture Best Practices

Comprehensive architecture guide for organizing React applications by features, enabling scalable development with independent teams. Contains 42 rules across 8 categories, prioritized by impact from critical (directory structure, imports) to incremental (naming conventions).

When to Apply

Reference these guidelines when:

• Creating new features or modules
• Organizing project directory structure
• Setting up import rules and boundaries
• Implementing data fetching patterns
• Composing components from multiple features
• Reviewing code for architecture violations

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Directory Structure	CRITICAL	struct-
2	Import & Dependencies	CRITICAL	import-
3	Module Boundaries	HIGH	bound-
4	Data Fetching	HIGH	fquery-
5	Component Organization	MEDIUM-HIGH	fcomp-
6	State Management	MEDIUM	fstate-
7	Testing Strategy	MEDIUM	test-
8	Naming Conventions	LOW	name-

Quick Reference

1. Directory Structure (CRITICAL)

• struct-feature-folders - Organize by feature, not technical type
• struct-feature-self-contained - Make features self-contained
• struct-shared-layer - Use shared layer for truly generic code only
• struct-flat-hierarchy - Keep directory hierarchy flat
• struct-optional-segments - Include only necessary segments
• struct-app-layer - Separate app layer from features

2. Import & Dependencies (CRITICAL)

• import-unidirectional-flow - Enforce unidirectional import flow
• import-no-cross-feature - Prohibit cross-feature imports
• import-public-api - Export through public API only
• import-avoid-barrel-files - Avoid deep barrel file re-exports
• import-path-aliases - Use consistent path aliases
• import-type-only - Use type-only imports for types

3. Module Boundaries (HIGH)

• bound-feature-isolation - Enforce feature isolation
• bound-interface-contracts - Define explicit interface contracts
• bound-feature-scoped-routing - Scope routing to feature concerns
• bound-minimize-shared-state - Minimize shared state between features
• bound-event-based-communication - Use events for cross-feature communication
• bound-feature-size - Keep features appropriately sized