How to vibe codeBetter Stack

Prerequisites

• Node.jsfree

  Required for running the Next.js full-stack control plane and backend worker scripts.

• GitHubfree

  Source code repository and CI/CD deployment connection.

• 

  Twilio AccountPay-per-use (~$1.15/mo phone number + per-message/call fees)

  Required for phone call and SMS incident alerting.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex backend data pipelines and API routers.

• Cursor

  Ideal for iterative UI design of observability dashboards and status page components.

Build guide

1. 01Scaffold the Control Plane & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth for user authentication, and set up Neon Postgres database schemas for monitors, incidents, and escalation policies.

   Create a new Next.js 16 project with Tailwind CSS and TypeScript. Set up better-auth with email/password authentication. Create a Drizzle ORM schema targeting Neon Postgres with tables for 'monitors' (id, url, interval, status, last_checked_at), 'incidents' (id, monitor_id, status, triggered_at, resolved_at), 'escalation_policies' (id, name, steps_json), and 'status_pages' (id, name, subdomain, custom_css). Ensure proper foreign key relations and indexes on status and timestamps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Uptime & Heartbeat Polling Worker

   Implement a background worker that pings target URLs on fixed cron intervals, records response codes and latency, and handles failure tracking.

   Create a Node.js background worker module using node-cron or similar scheduler that queries active monitors from the database, performs an HTTP HEAD or GET request with a timeout limit, records response time and status code, and updates the monitor state. If a monitor transitions from up to down for 2 consecutive checks, trigger an incident record in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement Twilio Voice and SMS Alert Dispatcher

   Build an alert routing engine that checks active incidents, evaluates escalation policies, and dispatches automated phone calls and SMS messages using Twilio.

   Build an alert dispatch service that integrates with the Twilio API. When a new incident is created, look up the owner's escalation policy, send an SMS alert, and place an automated phone call using Twilio Voice XML to read out the incident details. Include retry logic and logging of delivery status in an 'alert_logs' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Construct the Public Status Page Renderer

   Create a dynamic routing layer that serves branded public status pages on custom subdomains, displaying component health grids and incident update feeds.

   Build a public status page module in Next.js with dynamic subdomain routing (e.g., status.yourdomain.com). Fetch active monitors and recent incidents for that status page ID, render an uptime history grid (90-day bars), display current operational status, and provide an email subscription form for incident notifications managed via Resend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Develop the Log Ingestion & Query Endpoint

   Build an authenticated HTTP log ingestion endpoint and lightweight query interface to mimic structured log storage and basic filtering.

   Create an API endpoint /api/v1/logs that accepts JSON-structured log batches with authentication headers. Store incoming logs into a ClickHouse or partitioned Postgres table. Build a companion dashboard view with a simple query bar allowing filtering by log level, service name, and text search strings, displaying results in a real-time table view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Better Stack