Streamline your development workflow

Generate React Feature-Based
Project Structure

A powerful CLI tool that creates consistent, feature-based folders with all the boilerplate code you need for modern web development.

Organized Project Structure

See how your features are organized with clean, consistent folder structures

Project Root

Components

Hooks

Services

Validations

Generated Files Structure

src/features/user-profile/
components/
R
UserProfileList.tsx
R
UserProfileCard.tsx
hooks/
TS
useUserProfile.ts
TS
useUserMutations.ts
TS
useUserQueries.ts
services/
userProfileService.ts
validations/
userProfileSchema.ts
types/
userProfileTypes.ts
apiTypes.ts
store/
userProfileStore.ts

Everything You Need

Generate all the files and folders for your features with a single command

React Components
Generate components and pages with proper TypeScript setup
API Integration
TanStack Query hooks for data fetching and mutations
State Management
Zustand stores with TypeScript support
Type Definitions
Complete TypeScript interfaces and types
Custom Hooks
Reusable React hooks for your features
Validation Schemas
Form validation with proper error handling
Quick Installation

Get up and running in seconds

Install heco-feature-gen globally or locally and start generating feature-based structures instantly

Install via npm

npm i heco-feature-gen

Or use your preferred package manager

Using Yarn

yarn add heco-feature-gen

Using pnpm

pnpm add heco-feature-gen

Once installed, you can use the CLI anywhere in your project:

npx heco --help