create-clean-react-app

Create scalable React apps with a feature-based clean architecture.

npx create-clean-react-app my-app

The CLI starts from Vite, then adds architecture, routing, API infrastructure, state management, authentication foundations, environment config, shared UI folders, and testing setup.

Interactive Setup

✔ Select package manager: npm
✔ TypeScript? Yes
✔ State Management? Redux Toolkit
✔ API Handling? React Query + Axios
✔ Authentication? JWT
✔ UI Framework? Pure CSS

Generated Structure

src/
  app/
    providers/
    routes/
    store/
    App.tsx
  core/
    config/
    constants/
    hooks/
    services/
    types/
    utils/
  domain/
    entities/
    interfaces/
    usecases/
  features/
    auth/
      api/
      components/
      hooks/
      pages/
      services/
      store/
      types/
  infrastructure/
    api/
    storage/
  shared/
    assets/
    components/
    layouts/
    styles/
  test/

Options

npx create-clean-react-app my-app --pm npm --redux --react-query --axios --auth jwt --ui css
npx create-clean-react-app my-app --zustand --ui tailwind
npx create-clean-react-app my-app --context --js

Supported choices:

• Package managers: npm, pnpm, yarn, bun
• State: Redux Toolkit, Zustand, Context API, None
• API: React Query + Axios, Axios only, Fetch only
• Auth: JWT, Firebase, None
• UI: Pure CSS, SCSS, Tailwind, MUI

Generators

After creating an app, generate more clean architecture modules:

clean-react generate feature products
clean-react generate component Button
clean-react generate component ProductCard --feature products
clean-react generate page Dashboard
clean-react generate page Products --feature products

MVP Goal

This package is designed to generate more than folders:

• Scalable clean architecture layers
• Feature-based modules
• Reusable hooks, components, and layouts
• Route management
• API layer with Axios or Fetch
• Optional React Query setup
• Optional Redux Toolkit, Zustand, or Context setup
• Environment config
• Authentication foundation
• Testing setup entry point

Local Development

npm install
npm run check
npm start my-app