Bankr Dev - Project Templates

What this skill does

# Bankr Project Templates

Directory structures and templates for Bankr API projects.

## Available Templates

| Template | Use Case | Key Features |
|----------|----------|--------------|
| **bot** | Automated tasks | Polling loop, scheduler, status streaming |
| **web-service** | HTTP APIs | REST endpoints, webhooks, async handling |
| **dashboard** | Web UIs | Frontend + backend, real-time updates |
| **cli** | Command-line tools | Subcommands, interactive prompts |

## Bot Template

For automated trading bots, price monitors, alert systems, and scheduled tasks.

### Directory Structure

```
{project-name}/
├── package.json
├── tsconfig.json
├── .env.example
├── .gitignore
├── README.md
├── src/
│   ├── index.ts           # Main entry point with scheduler
│   ├── bankr-client.ts    # Bankr API client (from bankr-client-patterns skill)
│   ├── types.ts           # TypeScript interfaces
│   └── config.ts          # Configuration loading
└── scripts/
    └── run.sh             # Convenience script
```

### Key Features

- **Polling loop**: Configurable interval for recurring checks
- **Status streaming**: Real-time job status updates
- **Error handling**: Automatic retries with backoff
- **Environment config**: `.env` based configuration
- **Graceful shutdown**: Handles SIGINT/SIGTERM

### Use Cases

- Price monitoring and alerts
- Automated trading strategies
- Portfolio rebalancing
- Scheduled market analysis
- DCA automation

### Entry Point Pattern (index.ts)

```typescript
import { execute } from "./bankr-client";

const INTERVAL = 60000; // 1 minute

async function runBot() {
  console.log("Starting Bankr bot...");

  while (true) {
    try {
      const result = await execute(
        "Check ETH price",
        (msg) => console.log("Status:", msg)
      );

      if (result.status === "completed") {
        console.log("Result:", result.response);
        // Add your logic here
      }
    } catch (error) {
      console.error("Error:", error);
    }

    await new Promise(r => setTimeout(r, INTERVAL));
  }
}

runBot();
```

---

## Web Service Template

For HTTP APIs that wrap or extend Bankr functionality.

### Directory Structure

```
{project-name}/
├── package.json
├── tsconfig.json
├── .env.example
├── .gitignore
├── README.md
├── src/
│   ├── index.ts           # Server entry point
│   ├── server.ts          # Express/Fastify server setup
│   ├── routes/
│   │   ├── health.ts      # Health check endpoint
│   │   └── bankr.ts       # Bankr proxy/extension routes
│   ├── bankr-client.ts    # Bankr API client
│   ├── types.ts           # TypeScript interfaces
│   └── config.ts          # Configuration loading
└── scripts/
    └── run.sh
```

### Key Features

- **REST API endpoints**: Clean API design
- **Request validation**: Input sanitization
- **Async job handling**: Non-blocking operations
- **Webhook support**: Callbacks on job completion
- **Rate limiting**: Prevent abuse
- **CORS**: Cross-origin support

### Use Cases

- API gateway for Bankr
- Custom trading APIs
- Webhook integrations
- Backend for mobile apps
- Microservice architecture

### Additional Dependencies

```json
{
  "dependencies": {
    "express": "^4.18.0"
  }
}
```

Or for Fastify:

```json
{
  "dependencies": {
    "fastify": "^4.25.0"
  }
}
```

---

## Dashboard Template

For web UIs with portfolio tracking, market analysis, or monitoring.

### Directory Structure

```
{project-name}/
├── package.json
├── tsconfig.json
├── .env.example
├── .gitignore
├── README.md
├── server/
│   ├── index.ts           # Backend server
│   ├── bankr-client.ts    # Bankr API client
│   ├── routes/
│   │   └── api.ts         # API routes for frontend
│   └── types.ts
├── public/
│   ├── index.html         # Main HTML page
│   ├── styles.css         # Basic styles
│   └── app.js             # Frontend JavaScript
└── scripts/
    └── run.sh
```

### Key Features

- **Simple frontend**: HTML/CSS/JS (no build step required)
- **Backend API**: Express server for Bankr operations
- **Real-time updates**: Polling for status changes
- **Portfolio display**: Token balances and values
- **Market data**: Price charts and analysis

### Use Cases

- Portfolio tracking dashboard
- Trading interface
- Market monitoring
- Position management
- Analytics dashboard

### Frontend Pattern (app.js)

```javascript
async function checkPrice() {
  const response = await fetch('/api/price/ETH');
  const data = await response.json();
  document.getElementById('eth-price').textContent = data.price;
}

setInterval(checkPrice, 30000);
checkPrice();
```

---

## CLI Template

For command-line tools with subcommands and interactive features.

### Directory Structure

```
{project-name}/
├── package.json
├── tsconfig.json
├── .env.example
├── .gitignore
├── README.md
├── src/
│   ├── index.ts           # CLI entry with commander.js
│   ├── commands/
│   │   ├── trade.ts       # Trading commands
│   │   ├── price.ts       # Price query commands
│   │   └── status.ts      # Job status commands
│   ├── bankr-client.ts    # Bankr API client
│   └── types.ts
└── scripts/
    └── run.sh
```

### Key Features

- **Commander.js**: CLI framework with subcommands
- **Interactive prompts**: User input when needed
- **Progress indicators**: Status during polling
- **Colored output**: Better UX
- **Help system**: Auto-generated from commands

### Use Cases

- Personal trading tool
- Scripting and automation
- DevOps integration
- Quick price checks
- Batch operations

### Additional Dependencies

```json
{
  "dependencies": {
    "commander": "^12.0.0"
  }
}
```

### CLI Pattern (index.ts)

```typescript
import { program } from "commander";
import { price } from "./commands/price";
import { trade } from "./commands/trade";

program
  .name("bankr-cli")
  .description("CLI for Bankr operations")
  .version("1.0.0");

program
  .command("price <token>")
  .description("Get token price")
  .action(price);

program
  .command("trade <action> <amount> <token>")
  .description("Execute a trade")
  .option("-c, --chain <chain>", "Target chain", "base")
  .action(trade);

program.parse();
```

---

## Choosing a Template

| Need | Recommended Template |
|------|---------------------|
| Automated recurring tasks | **bot** |
| HTTP API for integrations | **web-service** |
| Visual interface | **dashboard** |
| Terminal-based tool | **cli** |
| Price alerts | **bot** |
| Trading API | **web-service** |
| Portfolio viewer | **dashboard** |
| Quick trades | **cli** |

## Common Files

All templates share common files. Load the `bankr-client-patterns` skill for:
- `bankr-client.ts` - Complete API client
- `package.json` - Base dependencies
- `tsconfig.json` - TypeScript config
- `.env.example` - Environment template
- `.gitignore` - Standard ignores

## Next Steps After Scaffolding

1. **Install dependencies**: `bun install` or `npm install`
2. **Configure API key**: Copy `.env.example` to `.env` and add `BANKR_API_KEY`
3. **Customize**: Modify the template for your use case
4. **Run**: `bun dev` or `npm run dev` for development
5. **Build**: `bun run build` or `npm run build` for production