creai-kit

CLI to generate Frontend (React with Screaming Architecture) and Backend projects. Focused on creating the base structure with pre-configured Auth feature.

🚀 Installation

Quick Install (Recommended)

# Install from npm
npm install -g creai-kit

📖 Usage

Create a Frontend Project (React)

# Create React project with Auth feature (without installing dependencies)
creai init my-app --frontend

# Create project and install dependencies automatically
creai init my-app --frontend --install

Create a Backend Project

# Create folder structure for backend
creai init my-api --backend

🏗️ Generated Structure

Frontend (React)

src/
├── features/
│   └── Auth/
│       ├── components/
│       │   └── LoginForm.tsx
│       ├── pages/
│       │   └── LoginPage.tsx
│       ├── store/
│       │   └── useAuthStore.ts
│       ├── utils/
│       │   └── authUtils.ts
│       └── AuthRoutes.tsx
├── shared/
│   ├── components/
│   │   └── MainLayout.tsx
│   ├── services/
│   │   └── RequestService/
│   │       ├── httpService.ts
│   │       ├── httpInterceptor.ts
│   │       └── index.ts
│   ├── utils/
│   │   ├── dateUtils.ts
│   │   └── index.ts
│   ├── constants/
│   │   └── api.ts
│   └── types/
│       └── request.ts
└── App.tsx

Backend

my-api/
├── src/
│   ├── controllers/     # API Controllers
│   ├── models/         # Data Models
│   ├── routes/         # Route Definitions
│   ├── middleware/     # Custom Middleware
│   ├── services/       # Business Logic
│   └── utils/          # Utilities
├── config/             # Configuration Files
├── tests/              # Tests
│   ├── unit/           # Unit Tests
│   └── integration/    # Integration Tests
└── README.md

🎨 Technology Stack

Frontend (React)

• React 19.1 + TypeScript + Vite
• React Router DOM (with useRoutes and RouteObject[])
• Zustand (global state with persist)
• Ant Design (UI components)
• Yup (form validation)
• fetch (HTTP client)
• date-fns (date handling)
• ESLint + Prettier (code quality)

📝 Available Commands

• creai init <project-name> --frontend - Create React project with pre-configured Auth feature
• creai init <project-name> --frontend --install - Create project and install dependencies automatically
• creai init <project-name> --backend - Create folder structure for backend

🌐 Included HTTP Services

The CLI generates a complete HTTP services system:

RequestService

• HttpService: Main class for making HTTP requests
• HttpInterceptor: Automatic authentication and token refresh handling
• API Service: Pre-configured instance ready to use

HTTP Service Features

• ✅ Automatic interceptors for authentication
• ✅ Automatic JWT token refresh
• ✅ Centralized error handling
• ✅ FormData and JSON support
• ✅ Centralized endpoint configuration

🎯 Screaming Architecture

This CLI implements Screaming Architecture principles:

1. Domain organization: Auth feature as main domain
2. Clear structure: Easy to understand what each part does
3. Maintainability: Organized and predictable code

✨ Features

• 🚀 Vite for ultra-fast development
• 🎨 Ant Design for professional UI with modern login
• 🔐 Pre-configured Auth feature with LoginForm and LoginPage
• 📁 Screaming Architecture implemented
• ⚡ Complete TypeScript
• 🔄 Instant Hot Module Replacement
• 🌐 HTTP Services with interceptors and authentication handling
• 🔄 Automatic JWT token refresh
• 📡 Pre-configured API Service ready to use
• 🔧 Pre-configured ESLint + Prettier
• 📦 pnpm as package manager

🚀 Next Steps

After creating your project:

# Navigate to the project
cd my-app

# Install dependencies (if not installed automatically)
pnpm install

# Start development server
pnpm dev

# Open in browser
# http://localhost:3000