How to vibe codeHeroku

Prerequisites

• Node.jsfree

  Required for running the Next.js control plane dashboard and backend API services.

• Dockerfree

  Required locally and on the server to simulate container runtimes for deployed apps.

• GitHubfree

  Hosts the code repositories for both the control plane and user-deployed sample apps.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex full-stack apps, database schemas, and API routes.

Build guide

1. 01Control Plane Dashboard & Database Schema

   Scaffold the Next.js web application with Tailwind CSS and set up the SQLite database schema using Turso and better-auth to handle user accounts, applications, dynos, and environment variables.

   Create a Next.js application with Tailwind CSS, TypeScript, and set up better-auth for user authentication. Define a Turso database schema using Drizzle ORM with tables for users, apps (name, owner_id, git_url, region), dynos (app_id, size, status, port), config_vars (app_id, key, value), and addons (app_id, type, status). Build a dashboard UI matching Heroku's dark-header layout where users can view their application list, create a new app with a unique name, and access an application details overview page showing runtime metrics and settings tabs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Application Settings & Config Vars Manager

   Build the application settings interface and backend endpoints for managing environment variables (config vars) and domain configurations.

   Implement the Config Vars management interface inside the application settings page. Create backend API routes to securely create, update, and delete key-value pairs stored in the database for each specific app. Encrypt values at rest before saving to the database. Add an interface component that lets developers toggle visibility of secret environment variables, export them as a .env file, and bulk-paste new variables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Docker Container Runtime Integration

   Implement a backend Node.js service that interacts with the Docker socket on a VPS to programmatically spawn, inspect, restart, and terminate user application containers.

   Build a Docker management service in TypeScript that connects to the local Docker socket (or a remote Docker daemon via SSH). Implement functions to pull base images, build user code tarballs into containers, assign dynamic internal ports, mount environment variables from the database, and monitor container health statuses (running, crashed, stopped). Expose internal API endpoints for starting, stopping, and restarting specific app dynos.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dynamic Routing Proxy & Log Streamer

   Implement an HTTP reverse proxy using Node.js/Express or Nginx that routes incoming subdomain traffic to the correct internal container port and streams container stdout logs over Server-Sent Events (SSE).

   Write a dynamic reverse proxy server in Node.js that intercepts incoming HTTP requests on subdomains (e.g., appname.localdomain.com) and looks up the active container port from the database or an in-memory route table, forwarding traffic transparently. Additionally, implement a log streaming endpoint using Server-Sent Events (SSE) that tails the live stdout/stderr logs of a running Docker container and streams them in real-time to the web dashboard CLI terminal view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05CLI Tool Scaffolding & Authentication

   Build a companion Node.js command-line interface (CLI) tool supporting authentication, app listing, logs viewing, and remote command execution.

   Create a standalone Node.js CLI tool using Commander.js that mimics core Heroku CLI commands. Implement 'clone-cli login' which opens a local browser loop to authenticate against the Next.js control plane and saves an auth token securely in the OS system keychain using keytar or native storage. Implement commands: 'clone-cli apps' to list applications, 'clone-cli logs <app>' to stream container logs over HTTP/SSE, and 'clone-cli run <app> <command>' to execute one-off operational commands inside a ephemeral container.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Heroku