> For the complete documentation index, see [llms.txt](https://wong-coupon.gitbook.io/flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wong-coupon.gitbook.io/flutter/my-reactjs/foundations-architecture.md).

# Foundations & Architecture

Pragmatic Clean Architecture, MVVM, dependency injection, repositories, and React feature boundaries.

Pragmatic Clean Architecture, MVVM, dependency injection, repositories, and React feature boundaries.

## Articles

* [Pragmatic Clean Architecture for React](/flutter/my-reactjs/foundations-architecture/pragmatic-clean-architecture-react.md) — Distinguish call flow from import direction, place ports and composition roots deliberately, and keep simple features small until a boundary is worth protecting.
* [Feature-Based MVVM in React](/flutter/my-reactjs/foundations-architecture/feature-based-mvvm-react.md) — Split Pages, focused ViewModels, and state by lifetime; verify request generations, cleanup, and the limits of each test layer.
* [Composition Root for React](/flutter/my-reactjs/foundations-architecture/composition-root-dependency-injection-react.md) — Connect typed ports through a pure factory, verify dependency selection, and separate wiring from resource lifetime without a DI framework.
* [RTK Query Behind a Repository](/flutter/my-reactjs/foundations-architecture/rtk-query-repository-contract.md) — Keep domain read policies and results finite, distinguish cache from subscriptions, and cancel a caller's wait without blindly aborting a shared request.
* [Map DTOs to Domain Entities](/flutter/my-reactjs/foundations-architecture/dto-to-domain-entity-mapper.md) — Validate unknown payloads with finite envelope, alias, identity, and pagination policies before returning domain entities to cache or state.
* [Public APIs for React Features](/flutter/my-reactjs/foundations-architecture/feature-public-api-react.md) — Choose public entries, check consumers by resolved target, and separate type coupling from eager import cycles.
* [React Features with Nx Generators](/flutter/my-reactjs/foundations-architecture/react-feature-generator-nx.md) — Encode architecture in templates, test exact output and generated behavior, then hand off the remaining route/state/API wiring to the feature owner.
* [React Architecture Fitness Tests](/flutter/my-reactjs/foundations-architecture/react-architecture-fitness-tests.md) — Separate diagrams, import graphs, and call paths; use counterexample tests to detect changed wiring even when the UI still displays the right result.
* [Source-Linked React Diagrams](/flutter/my-reactjs/foundations-architecture/source-linked-react-diagrams.md) — Locate markers beside functions with an AST, keep React drafts separate, and distinguish mappings from behavior evidence.

[Buy Me a Coffee](https://buymeacoffee.com/ducmng12g) | [Support Me on Ko-fi](https://ko-fi.com/I2I81AEJG8)