# KPM CLI

[![npm version](https://img.shields.io/npm/v/kpm.svg)](https://www.npmjs.com/package/kpm-cli-rn)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

KPM is a **smart CLI tool** for developers to quickly bootstrap React and Next.js projects with modern best practices.
It helps you set up frontend, optional backend, UI libraries, and project templates in seconds, without worrying about repetitive configuration.

---

## Features

* **Frameworks:** React or Next.js
* **TypeScript support**: Optional for strict typing
* **UI Libraries:** Hiro UI, Material UI, Chakra UI, or No UI Library
* **Project templates:** Blog, Ecommerce, Portfolio, or Blank
* **Component & Page Generators:** Quickly scaffold reusable components and pages
* **Smart Library Installer:** Suggests popular frontend/backend libraries and remembers custom ones
* **Docker Support:** Ready-to-run docker-compose setup for frontend + backend
* **Multilingual prompts:** Easily add new languages for CLI interactions

---

## Installation

Install KPM globally:

```bash
npm install -g kpm
```

Check the version:

```bash
kpm --version
```

---

## CLI Commands

### `kpm init`

Initializes a **new project** interactively.

```bash
kpm init
```

* Prompts for:

  * Project name
  * Framework (React / Next.js)
  * TypeScript support
  * UI library
  * Project template
  * Optional backend setup
* Automatically sets up:

  * Frontend project folder
  * TailwindCSS + selected UI library
  * Optional Node.js backend with TypeScript
  * Docker Compose for full-stack development

**Example:**

```bash
kpm init
? Project name: my-awesome-app
? Framework: Next.js
? Use TypeScript? Yes
? Choose UI Library: Chakra UI
? Template: Blog
? Include backend? Yes
```

---

### `kpm add component`

Generates a **new component** in your project.

```bash
kpm add component
```

* Detects project structure automatically:

  * `app/components/` for app-based Next.js
  * `src/components/` otherwise
* Prompts for:

  * Component name
  * TypeScript or JavaScript
* Creates the component folder and files ready for use.

**Example:**

```bash
kpm add component
? Component name: HeroBanner
? Use TypeScript? Yes
✅ Component "HeroBanner" created at src/components/HeroBanner/
```

---

### `kpm add page`

Generates a **new page**.

```bash
kpm add page
```

* Detects project structure automatically:

  * `app/pages/` for app-based Next.js
  * `src/pages/` otherwise
* Prompts for:

  * Page name
  * TypeScript or JavaScript

**Example:**

```bash
kpm add page
? Page name: About
? Use TypeScript? No
✅ Page "About" created at src/pages/About/
```

---

### `kpm add library`

Installs a **frontend or backend library** smartly.

```bash
kpm add library
```

* Detects whether you are in frontend or backend folder.
* Suggests popular libraries or lets you input a custom one.
* Automatically installs it using npm/yarn/pnpm.
* Remembers new libraries for future suggestions.

**Example:**

```bash
kpm add library
? Select a library to install in frontend (or choose New Library): react-router
⬇ Installing "react-router" in frontend...
✅ "react-router" installed successfully.
```

```bash
kpm add library
? Select a library to install in backend (or choose New Library): New Library
? Enter the npm library name: prisma
⬇ Installing "prisma" in backend...
✅ "prisma" added to the backend library list and installed.
```

---

## Docker Setup

If you include a backend, KPM generates a **docker-compose.yml**:

```yaml
version: "3.8"
services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    command: "npm run dev"
    volumes:
      - .:/app
    working_dir: /app

  backend:
    build: ./backend
    ports:
      - "4000:4000"
    command: "npm run dev"
    volumes:
      - ./backend:/app
    working_dir: /app
```

Run both frontend and backend with:

```bash
docker-compose up
```

---

## Tips & Tricks

* Use `kpm add component` and `kpm add page` to keep your code organized.
* Use `kpm add library` to manage both frontend and backend dependencies in one place.
* Combine Docker with `kpm init` to start full-stack development instantly.
* You can customize templates and languages by editing the `/templates` folder and `/lib/language.json`.

---

## License

MIT