03-app-structure/04-feature-folders.md

Feature folders

Feature folders

Vroq apps should group most app behavior by feature.

A feature folder owns a coherent slice of functionality and should keep related UI, state, and API code together.

Why feature folders matter

Feature folders make it easier to:

• find the code that owns a behavior
• keep reducers, actions, and UI aligned
• debug one feature without searching the whole app
• refactor large features into smaller parts

Standard feature layout

A feature folder will often look like this:

features/featureName/
  index.js
  featureActions.js
  featureReducer.js
  FeatureSection.js
  apiClient.js
  components/
  sections/

Not every feature needs every file. Only create files that have a clear responsibility.

Typical file roles

• index.js – exports the public feature entry points
• featureActions.js – action creators for the feature
• featureReducer.js – reducer for the feature state slice
• FeatureSection.js – top-level UI section for the feature
• apiClient.js – feature-local transport and server calls
• components/ – reusable presentation-oriented feature components
• sections/ – store-aware or feature-local UI fragments

Rules

• keep feature-specific code inside the feature folder
• do not move feature-specific code into shared/ too early
• keep the feature folder small and understandable
• create subfolders only when the feature is large enough to justify them

Final rule

If a behavior belongs clearly to one feature, its code should usually live inside that feature folder.