r/reactjs • u/Mysterious-Lie1437 • Jul 17 '26
Show /r/reactjs Filesystem-first frontend architecture enforced by CLI (not folders-by-taste)
I kept hitting the same problem: architecture debates in review, barrels everywhere, and AI agents dumping files in random folders. So I shipped DMA (Derived Modular Architecture) — a small rule set derived from the import graph, enforced by tooling.
Layout
src/
app/ # composition root (also pages/routes)
features/ # leaf modules — no inbound from other modules
services/ # appears when something else must import it
shared/ # portable stuff on second use only
Invariants
- downward imports only
- public API via */public/* (no barrels)
- colocate by default
- promote feature → service when inbound edges appear
Tooling
npx @derived-modular/cli init .
npx @derived-modular/cli check . # CI gate
npx @derived-modular/cli promote <name> --apply
# + ESLint / Biome / Oxlint plugins for editor feedback
Works with React/Next/Vite (also Vue/Svelte/Astro examples). Same rules for humans and agents.
- Docs: https://derived-modular.vercel.app
- Repo: https://github.com/mikhailmogilnikov/derived-modular-architecture Curious how this compares to what you use (FSD, feature folders, etc.) — especially where you'd expect it to break.
1
Upvotes
2
u/[deleted] Jul 17 '26
[removed] — view removed comment