Folder Structure

The generator produces feature-based folder structures. Each feature gets its own directory containing all related code.

Default Structure

src/features/<feature-name>/
├── components/       # React components
├── hooks/           # Custom React hooks
├── services/        # API and business logic
├── types/           # TypeScript interfaces and types
├── validations/     # Validation schemas
└── store/           # State management

Folder Types

Components

React components for the feature, including the main component and any sub-components.

Hooks

Custom React hooks for data fetching, mutations, and reusable logic.

Services

API service functions and business logic layer.

Types

TypeScript type definitions, interfaces, and enums.

Validations

Validation schemas (e.g., Zod) for form and data validation.

Store

State management stores (e.g., Zustand) for feature-level state.

Custom Structure

Override the default structure in hfg.config.json:

{
  "folderNames": {
    "components": "ui",
    "hooks": "hooks",
    "services": "api",
    "types": "types",
    "validations": "schemas",
    "store": "state"
  }
}

This generates:

src/features/<feature-name>/
├── ui/
├── hooks/
├── api/
├── types/
├── schemas/
└── state/