create-universal-dapp/README.md

CLI tool to scaffold Push Chain universal applications with Next.js or Vite

# create-universal-dapp

A CLI tool to scaffold Push Chain applications with your choice of framework and tooling.

## Quick Start

```bash
npm install -g create-universal-dapp
create-universal-dapp my-app
```

Or use npx:

```bash
npx create-universal-dapp my-app
```

## Features

- ⚡ **Multiple Frameworks**: Choose between Next.js or Vite (React)
- 🔧 **ESLint**: Optional code linting setup
- 📦 **Push Chain Integration**: Pre-configured with @pushchain/core and @pushchain/ui-kit
- 🚀 **TypeScript**: Full TypeScript support out of the box
- 🎨 **Styling**: Tailwind CSS set up by default

## Usage

### Interactive Mode

Run the CLI without arguments to enter interactive mode:

```bash
create-universal-dapp
```

You'll be prompted to:
1. Choose your project name
2. Select a framework (Next.js or Vite)
3. Enable/disable ESLint

### Command Line Options

```bash
create-universal-dapp my-app --framework nextjs --eslint
```

Available options:
- `-f, --framework <framework>`: Choose 'nextjs' or 'vite'
- `--eslint / --no-eslint`: Include/exclude ESLint configuration

## Generated Project Structure

### Next.js Project
```
my-app/
├── src/
│   ├── app/
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   └── lib/
│       ├── pushchain.tsx    # Push Chain provider
│       └── utils.ts         # Utility functions
├── package.json
├── next.config.js
├── tsconfig.json
└── tailwind.config.js
```

### Vite Project
```
my-app/
├── src/
│   ├── components/
│   ├── lib/
│   │   ├── pushchain.tsx    # Push Chain provider
│   │   └── utils.ts         # Utility functions
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js
```

## Push Chain Integration

The generated project includes:

### 1. PushChain Provider
A React context provider that manages the Push Chain connection:

```typescript
import { usePushChain } from '@/lib/pushchain'

function MyComponent() {
  const { pushChain, isConnected, connect, disconnect, error } = usePushChain()
  
  // Use Push Chain methods here
}
```

### 2. Demo Component
A working example showing how to:
- Connect to Push Chain
- Send messages
- Handle errors
- Display connection status

### 3. Environment Variables
Configure your Push Chain settings:

```env
# Next.js
NEXT_PUBLIC_PUSHCHAIN_API_KEY=your_api_key_here
NEXT_PUBLIC_PUSHCHAIN_NETWORK=testnet

# Vite
VITE_PUSHCHAIN_API_KEY=your_api_key_here
VITE_PUSHCHAIN_NETWORK=testnet
```

## Development

To work on this CLI tool:

```bash
git clone https://github.com/pushchain/create-universal-dapp
cd create-universal-dapp
npm install
npm run build
npm link
```

Then you can test it:

```bash
create-universal-dapp test-app
```

## Scripts

- `npm run build` - Build the CLI
- `npm run dev` - Run in development mode
- `npm start` - Run the built CLI

## Next Steps

After creating your project:

1. **Configure Environment Variables**: Set up your Push Chain API keys
2. **Customize the Integration**: Replace example code with your specific Push Chain functionality
3. **Add Features**: Build upon the generated structure
4. **Explore Push Chain**: Check out the @pushchain/ui-kit for additional components

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT