Skip to content

feat: Implement YAML-to-Production microservice #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
flatfinderfintech-lab wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: Implement YAML-to-Production microservice #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6763d32
feat: Implement YAML-to-Production microservice
claude Dec 13, 2025
a8a7e0d
fix: Resolve TypeScript compilation errors across backend and frontend
claude Dec 30, 2025
6b98002
chore: Add package-lock.json files and update gitignore
claude Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 252 additions & 0 deletions yaml-to-production/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
# YAML-to-Production Microservice

Transform YAML specifications into production-ready applications instantly. This microservice eliminates technical gatekeeping and human error in the software deployment pipeline by providing a simple, actionable, and secure path from a YAML-defined idea to a live, deployed application.

## Features

- **YAML Specification Input**: Upload or paste YAML specifications defining your application
- **AI-Powered Code Generation**: Claude AI analyzes requirements and generates production-ready code
- **Automated Security Auditing**: Every deployment is scanned for vulnerabilities with a security score
- **One-Click Deployment**: Deploy to Vercel with automatic SSL, global CDN, and instant rollbacks
- **Custom Domain Management**: Add, verify, and manage custom domains for your applications
- **Project Dashboard**: Manage and redeploy projects with saved configurations

## Architecture

```
yaml-to-production/
├── worker/ # Cloudflare Workers backend
│ ├── src/
│ │ ├── index.ts # Main entry point (Hono app)
│ │ ├── middleware/ # Auth middleware (Privy JWT)
│ │ ├── routes/ # API route handlers
│ │ ├── services/ # Core services
│ │ │ ├── database.ts # D1 database operations
│ │ │ ├── yaml-parser.ts # YAML validation
│ │ │ ├── code-generator.ts # Claude AI integration
│ │ │ ├── security-auditor.ts # Security scanning
│ │ │ ├── vercel-deployer.ts # Vercel API
│ │ │ └── deployment-session.ts # Durable Object
│ │ ├── types/ # TypeScript types
│ │ └── utils/ # Encryption utilities
│ ├── migrations/ # D1 database migrations
│ ├── wrangler.toml # Cloudflare configuration
│ └── package.json
│
└── frontend/ # React + Vite frontend
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Shared UI components
│ │ ├── deploy/ # Deployment wizard components
│ │ └── dashboard/ # Dashboard components
│ ├── pages/ # Page components
│ ├── services/ # API client
│ ├── hooks/ # Custom React hooks
│ ├── stores/ # Zustand state management
│ └── types/ # TypeScript types
├── tailwind.config.js
├── vite.config.ts
└── package.json
```

## Tech Stack

### Backend (Cloudflare Workers)
- **Runtime**: Cloudflare Workers with Durable Objects
- **Framework**: Hono (fast, lightweight web framework)
- **Database**: D1 (SQLite at the edge)
- **Storage**: R2 (object storage for generated files)
- **Caching**: KV (key-value storage)
- **AI**: Anthropic Claude API

### Frontend (React + Vite)
- **Framework**: React 18 with TypeScript
- **Build Tool**: Vite
- **Styling**: Tailwind CSS
- **State**: Zustand
- **Data Fetching**: TanStack Query
- **Auth**: Privy (passwordless + crypto wallets)
- **UI**: Lucide icons, Sonner toasts, Framer Motion

## Getting Started

### Prerequisites

- Node.js 18+
- npm or pnpm
- Cloudflare account
- Vercel account
- Anthropic API key
- Privy account

### Backend Setup

```bash
cd yaml-to-production/worker

# Install dependencies
npm install

# Create D1 database
wrangler d1 create yaml-to-production-db

# Update wrangler.toml with your database ID

# Run migrations
wrangler d1 execute yaml-to-production-db --file=./migrations/0001_schema.sql

# Create KV namespaces
wrangler kv:namespace create CACHE
wrangler kv:namespace create SECRETS

# Create R2 bucket
wrangler r2 bucket create yaml-to-production-projects

# Set secrets
wrangler secret put ANTHROPIC_API_KEY
wrangler secret put VERCEL_API_TOKEN
wrangler secret put PRIVY_APP_ID
wrangler secret put PRIVY_APP_SECRET
wrangler secret put ENCRYPTION_KEY

# Start development server
npm run dev
```

### Frontend Setup

```bash
cd yaml-to-production/frontend

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Edit .env with your Privy App ID
# VITE_PRIVY_APP_ID=your-privy-app-id

# Start development server
npm run dev
```

### Environment Variables

#### Worker (Cloudflare Secrets)
- `ANTHROPIC_API_KEY` - Your Anthropic API key
- `VERCEL_API_TOKEN` - Default Vercel API token
- `PRIVY_APP_ID` - Privy application ID
- `PRIVY_APP_SECRET` - Privy application secret
- `ENCRYPTION_KEY` - 256-bit hex key for encrypting user secrets

#### Frontend
- `VITE_PRIVY_APP_ID` - Privy application ID

## API Endpoints

### Projects
- `GET /api/v1/projects` - List user projects
- `GET /api/v1/projects/:id` - Get project details
- `POST /api/v1/projects` - Create a new project
- `PATCH /api/v1/projects/:id` - Update project
- `DELETE /api/v1/projects/:id` - Delete project
- `POST /api/v1/projects/:id/redeploy` - Trigger redeployment

### Deployments
- `GET /api/v1/deployments` - List deployments
- `GET /api/v1/deployments/:id` - Get deployment details
- `POST /api/v1/deployments` - Create deployment
- `GET /api/v1/deployments/:id/ws` - WebSocket for real-time updates
- `POST /api/v1/deployments/:id/cancel` - Cancel deployment

### YAML
- `POST /api/v1/yaml/validate` - Validate YAML syntax
- `POST /api/v1/yaml/analyze` - Analyze YAML for dependencies
- `GET /api/v1/yaml/sample/:type` - Get sample YAML
- `POST /api/v1/yaml/preview` - Preview project structure

### Domains
- `GET /api/v1/domains` - List custom domains
- `POST /api/v1/domains` - Add custom domain
- `POST /api/v1/domains/:id/verify` - Verify DNS
- `DELETE /api/v1/domains/:id` - Remove domain

### MCP Servers
- `GET /api/v1/mcp/servers` - List available MCP servers
- `POST /api/v1/mcp/configure` - Configure MCP server
- `GET /api/v1/mcp/keys` - List stored API keys
- `POST /api/v1/mcp/keys` - Store API key

## YAML Specification Format

```yaml
name: my-app
description: A sample application
version: 1.0.0
type: web-app # web-app, api, static, fullstack

framework: react-vite # react-vite, nextjs, cloudflare-workers, static

features:
- name: Landing Page
type: page
description: Hero section with call-to-action

- name: Dashboard
type: page
description: User analytics dashboard

- name: Navigation
type: component
description: Header navigation bar

integrations:
- name: Authentication
type: auth
provider: privy

- name: Database
type: database
provider: supabase

- name: Payments
type: payment
provider: stripe

environment:
VITE_APP_NAME: My App

mcp_servers:
- github
- supabase
```

## Deployment

### Deploy Worker to Cloudflare
```bash
cd worker
npm run deploy:production
```

### Deploy Frontend
The frontend can be deployed to any static hosting:

```bash
cd frontend
npm run build
# Deploy the dist/ folder to Vercel, Netlify, or Cloudflare Pages
```

## Security

- All API keys are encrypted with AES-256-GCM before storage
- Privy JWT tokens are verified on every request
- Row-level security enforced at the database level
- Automated security scanning before every deployment
- No secrets are ever logged or exposed in errors

## License

MIT
5 changes: 5 additions & 0 deletions yaml-to-production/frontend/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Privy Authentication
VITE_PRIVY_APP_ID=your-privy-app-id

# API URL (optional, defaults to same origin)
# VITE_API_URL=http://localhost:8787
1 change: 1 addition & 0 deletions yaml-to-production/frontend/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
dist/
17 changes: 17 additions & 0 deletions yaml-to-production/frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Transform YAML specifications into production-ready applications instantly" />
<title>Prototype Cafe - YAML to Production</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading