Skip to main content

๐Ÿ—„๏ธ Features Pattern

NestFlux follows a consistent feature-based architecture pattern across both client and server applications to promote code organization, maintainability, and scalability.

๐Ÿ“ Folder Structure Overviewโ€‹

src/
โ”œโ”€โ”€ core/ # Core framework functionality (managed by NestFlux)
โ”œโ”€โ”€ common/ # Reusable code across multiple features
โ””โ”€โ”€ features/ # Application-specific features

๐Ÿ”„ Pattern Philosophyโ€‹

โš™๏ธ Core Folderโ€‹

  • Contains essential framework functionality required to run the application
  • Handles core concepts like authentication or API configuration
  • Provides the foundational infrastructure that features and common code depend on
  • Managed by NestFlux: Updates to NestFlux will primarily affect core folders

๐Ÿ”ƒ Common Folderโ€‹

  • Contains reusable code that's shared across multiple features
  • Used for project-specific functionality that spans multiple business domains
  • Should be generic enough to be used in various contexts within your project

๐Ÿ“ฆ Features Folderโ€‹

  • Contains application-specific code that implements business requirements
  • Each feature represents a distinct domain or functionality
  • Features can be nested with unlimited depth for complex domains
  • Should be cohesive and focused on a specific business capability
NestFlux Updates

When updating NestFlux to newer versions, changes will primarily affect the core/ folders. The common/ and features/ folders will rarely be modified, ensuring your custom business logic and project-specific code remains stable across updates.

๐Ÿ“– Documentationโ€‹

Every feature (both in core/, common/ and features/) must include a FEATURE.md file that documents its purpose, responsibilities, and usage examples. This ensures consistent documentation across the codebase and helps developers understand each feature's role. See the FEATURE.md template for the complete documentation structure.

tip

The distinction between core/, features/ and common/ is for code organization only. There are no restrictions on code reuse - features can import from other features, and common code can be used anywhere. The goal is to structure code logically while maintaining full flexibility for code sharing and reusability.

๐Ÿ—„๏ธ Feature structuresโ€‹

Each application type (client and server) has its own specific folder structure tailored to its technology stack and architectural patterns:

  • Client features are designed around React patterns - components, hooks, and client-side logic
  • Server features follow NestJS conventions - controllers, services, modules, and server-side architecture
  • Both share common folder types (lib, types, data) for consistency where it makes sense
  • This approach ensures each application follows its framework's best practices while maintaining the overall feature pattern consistency

๐Ÿ—๏ธ Feature Grouping Ruleโ€‹

Important: If a feature contains sub-features, it becomes a grouping feature and cannot contain its own feature content (components, hooks, services, etc.). It can only contain:

  • FEATURE.md (required documentation)
  • Sub-feature folders

Example of a grouping feature:

user-management/         # Grouping feature - no feature content allowed
โ”œโ”€โ”€ FEATURE.md # Only documentation allowed
โ”œโ”€โ”€ user-profile/ # Sub-feature with actual implementation
โ”‚ โ”œโ”€โ”€ FEATURE.md
โ”‚ โ”œโ”€โ”€ components/
โ”‚ โ”‚ โ””โ”€โ”€ profile-form.tsx
โ”‚ โ””โ”€โ”€ hooks/
โ”‚ โ””โ”€โ”€ use-profile.ts
โ”œโ”€โ”€ user-settings/ # Another sub-feature
โ”‚ โ”œโ”€โ”€ FEATURE.md
โ”‚ โ”œโ”€โ”€ components/
โ”‚ โ”‚ โ””โ”€โ”€ settings-panel.tsx
โ”‚ โ””โ”€โ”€ lib/
โ”‚ โ””โ”€โ”€ settings-utils.ts
โ””โ”€โ”€ user-permissions/ # Third sub-feature
โ”œโ”€โ”€ FEATURE.md
โ”œโ”€โ”€ services/
โ”‚ โ””โ”€โ”€ permissions.service.ts
โ””โ”€โ”€ types/
โ””โ”€โ”€ permissions.types.ts

This ensures clear separation between organizational structure and implementation details.

๐Ÿ’ป Client Feature Structureโ€‹

Each client feature follows this hierarchy:

feature-name/
โ”œโ”€โ”€ FEATURE.md # Feature documentation
โ”œโ”€โ”€ api/ # API queries and mutations (TanStack Query)
โ”‚ โ”œโ”€โ”€ use-sth.query.ts # Data fetching queries
โ”‚ โ””โ”€โ”€ use-sth.mutation.ts # Data modification operations
โ”œโ”€โ”€ components/ # React components specific to this feature
โ”‚ โ””โ”€โ”€ feature-component.tsx
โ”œโ”€โ”€ data/ # Static configuration and constants
โ”‚ โ””โ”€โ”€ feature-config.ts
โ”œโ”€โ”€ hooks/ # Custom React hooks for this feature
โ”‚ โ””โ”€โ”€ use-feature-hook.ts
โ”œโ”€โ”€ lib/ # Business logic and utilities
โ”‚ โ””โ”€โ”€ feature-utils.ts
โ””โ”€โ”€ types/ # TypeScript types specific to this feature
โ””โ”€โ”€ feature.types.ts

๐Ÿš€ Server Feature Structureโ€‹

Each server feature follows this hierarchy:

feature-name/
โ”œโ”€โ”€ FEATURE.md # Feature documentation
โ”œโ”€โ”€ feature.controller.ts # NestJS controller (if needed. Can have more than one)
โ”œโ”€โ”€ feature.service.ts # NestJS service (if needed. Can have more than one)
โ”œโ”€โ”€ feature.module.ts # NestJS module (if needed. Usually one per feature)
โ”œโ”€โ”€ data/ # Static configuration and constants
โ”‚ โ””โ”€โ”€ feature-config.ts
โ”œโ”€โ”€ decorators/ # Custom decorators (if needed)
โ”‚ โ””โ”€โ”€ feature.decorator.ts
โ”œโ”€โ”€ guards/ # Custom guards (if needed)
โ”‚ โ””โ”€โ”€ feature.guard.ts
โ”œโ”€โ”€ strategies/ # Authentication strategies (if needed)
โ”‚ โ””โ”€โ”€ feature.strategy.ts
โ”œโ”€โ”€ lib/ # Business logic and utilities
โ”‚ โ””โ”€โ”€ feature-utils.ts
โ”œโ”€โ”€ repositories/ # Database operations
โ”‚ โ””โ”€โ”€ feature.repository.ts
โ””โ”€โ”€ types/ # TypeScript types specific to this feature
โ””โ”€โ”€ feature.types.ts

๐Ÿ“ FEATURE.md Templateโ€‹

Each feature must include a FEATURE.md file following this template:

# Feature Name

## ๐Ÿ“‹ Overview
Brief description of what this feature does and its purpose.

## ๐ŸŽฏ Responsibilities
- List the main responsibilities of this feature
- What business logic it handles
- What problems it solves

## ๐Ÿšง Known Limitations (optional)
- Current limitations or technical debt
- Future improvements planned

## ๐Ÿ“– Related Documentation (optional)
- Links to relevant docs
- API specifications
- Design documents