create-arch-app

!Status

🌐 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

$3

``bash


Create project in a new directory

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

Or create in the current directory

npx @daawoonkim/create-arch-app .
`

$3

`bash
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.

$3

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

`bash
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

$3

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/
`

$3

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/
`

$3

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/
`

$3

Simple structure for quick start.

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

Generated File Structure

$3

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

$3

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

$3

`
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

$3

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.

$3

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

$3

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

$3

- [ ] 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.