create-arch-app

🌐 Language: English | 한국어

An interactive CLI tool to create React/Next.js projects with DDD, Clean Architecture, and Atomic Design patterns.

📦 npm: https://www.npmjs.com/package/@daawoonkim/create-arch-app

📝 CHANGELOG: English | 한국어

⚠️ Currently in MVP (Minimum Viable Product) stage. Core features are working, but actively developing and accepting feedback. Please report issues or suggestions on GitHub Issues!

Features

✨ 4 Architecture Patterns

• DDD (Domain-Driven Design)
• Clean Architecture
• Atomic Design
• Default (simple structure)

🚀 Framework Options

• React (with Vite)
• Next.js (App Router / Pages Router)

💎 TypeScript by Default

🎨 Styling Options

• Tailwind CSS
• CSS Modules

🌐 API Integration

• HTTP Clients: Axios, Fetch API
• Data Fetching: TanStack Query (React Query), SWR

📦 Optional Libraries

• State Management: Zustand, Context API
• Forms: React Hook Form
• Testing: Vitest + Testing Library

Installation & Usage

Quick Start with npx (Recommended)

# Create project in a new directory
npx @daawoonkim/create-arch-app my-app

# Or create in the current directory
npx @daawoonkim/create-arch-app .

Global Installation

npm install -g @daawoonkim/create-arch-app

# Create project in a new directory
create-arch-app my-app

# Create in current directory
create-arch-app .

Note: When using current directory (.), the directory must be empty.

Interactive Prompts

When you run the CLI, you'll answer these questions:

1. Framework: React or Next.js
2. Next.js Version (Next.js only): Latest (recommended), 15.x, 14.x, 13.x
3. Router (Next.js only): App Router (recommended) or Pages Router
4. Architecture Pattern: DDD, Clean, Atomic, Default
5. Styling: Tailwind CSS or CSS Modules
6. State Management: Zustand, Context API, None
7. Form Library: React Hook Form or None
8. HTTP Client: Axios, Fetch API, None
9. Data Fetching: TanStack Query (React Query), SWR, None
10. Testing: Include Vitest + Testing Library

Example Usage

npx @daawoonkim/create-arch-app my-enterprise-app

# Interactive prompts
? Select framework: Next.js
? Select Next.js version: Latest (Recommended)
? Select Next.js router: App Router (Recommended)
? Select architecture pattern: DDD (Domain-Driven Design)
? Select styling tool: Tailwind CSS
? Select state management: Zustand
? Select form library: React Hook Form
? Select HTTP client: Axios (Recommended)
? Select data fetching library: TanStack Query (React Query) - Recommended
? Include testing tools? Yes

✨ Creating project...
📦 Setting up TypeScript project (default)
🚀 Using Next.js App Router
✅ Project created!

🎉 Project successfully created!

Get started with:
  cd my-enterprise-app
  npm install
  npm run dev

Architecture Patterns

DDD (Domain-Driven Design)

Perfect for enterprise-grade applications.

domain/          # Business entities and logic
  ├── entities/
  ├── repositories/
  └── services/
application/     # Use cases
  ├── usecases/
  └── ports/
infrastructure/  # External service integration
  ├── api/
  └── persistence/
presentation/    # UI components
  ├── components/
  └── pages/

Clean Architecture

Focuses on dependency rules and layer separation.

core/           # Business logic
  ├── entities/
  ├── usecases/
  └── interfaces/
features/       # Feature modules
  └── [feature]/
      ├── domain/
      ├── data/
      └── presentation/
shared/         # Shared components
  ├── components/
  └── utils/

Atomic Design

Optimized for UI component-driven development.

components/
  ├── atoms/      # Smallest UI units
  ├── molecules/  # Combinations of atoms
  ├── organisms/  # Combinations of molecules
  ├── templates/  # Page layouts
  └── pages/      # Actual pages
hooks/
utils/

Default

Simple structure for quick start.

components/
hooks/
pages/ (or app/)
utils/
styles/
types/

Generated File Structure

React Project

my-app/
├── src/
│   ├── [architecture folders]
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
└── README.md

Next.js Project (App Router)

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   └── [architecture folders]
├── next.config.js
├── tsconfig.json
├── package.json
└── README.md

Next.js Project (Pages Router)

my-app/
├── src/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   ├── styles/
│   │   └── globals.css
│   └── [architecture folders]
├── next.config.js
├── tsconfig.json
├── package.json
└── README.md

Requirements

• Node.js 18.0.0 or higher

Version History

v0.2.0 - Latest (2025-01-26)

Major Updates:

• ✅ API library integration (Axios, Fetch API, TanStack Query, SWR)
• ✅ Architecture-specific API file generation
• ✅ Improved Next.js project structure (src/ directory + absolute paths)
• ✅ CI/CD automation (GitHub Actions)
• ✅ Automatic npm deployment on main branch merge
• ✅ Enhanced documentation (CHANGELOG, CONTRIBUTING, WORKFLOWS)

See CHANGELOG.md for details.

v0.1.0 - MVP Release

Features:

• ✅ 4 architecture patterns (DDD, Clean Architecture, Atomic Design, Default)
• ✅ React (Vite) & Next.js (App Router / Pages Router) support
• ✅ Next.js version selection (Latest, 15.x, 14.x, 13.x)
• ✅ TypeScript by default
• ✅ Styling: Tailwind CSS, CSS Modules
• ✅ State Management: Zustand, Context API
• ✅ Forms: React Hook Form
• ✅ Testing: Vitest + Testing Library
• ✅ Current directory creation support (. option)
• ✅ Automatic folder structure and README generation

Roadmap

v0.3.0 (Planned)

• [ ] Additional UI library integration (shadcn/ui, MUI)
• [ ] More testing and stability improvements
• [ ] Component generator

Future Plans

• [ ] Additional architecture patterns (Feature-Sliced Design, Hexagonal Architecture)
• [ ] More state management options (Redux Toolkit, Jotai, Recoil)
• [ ] Authentication integration (NextAuth, Supabase)
• [ ] ORM integration (Prisma, Drizzle)
• [ ] Docker setup
• [ ] Monorepo support (Turborepo)

Contributing

Bug reports, feature suggestions, and PRs are welcome!

See CONTRIBUTING.md for details.

License

MIT

Author

daawoonkim

Credits

This project is based on modern frontend development best practices and various architectural patterns.