How to vibe codePingdom

Prerequisites

• Node.jsfree

  Required runtime for the Next.js application framework and agent tooling.

• GitHubfree

  Source code control and deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding the monitoring backend and dashboard UI.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui components, and configure Turso SQLite connection for checks, incidents, and RUM telemetry.

   Create a new Next.js project with TypeScript, Tailwind CSS, and shadcn/ui. Set up a Turso database connection using Drizzle ORM. Define schemas for users, monitors (url, frequency, type, expected_status), check_results (monitor_id, timestamp, response_time_ms, status_code, is_up, region), incidents (monitor_id, started_at, resolved_at), and rum_events (monitor_id, pageviews, load_time_ms, browser, device, timestamp). Ensure all table relationships and indexes are properly structured for time-series range queries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Dashboard Shell

   Implement authentication using better-auth and build the core SaaS dashboard layout with overview statistics, monitor lists, and navigation.

   Integrate better-auth into the Next.js application supporting email/password and secure session management. Build a responsive dashboard shell featuring a sidebar navigation (Dashboard, Monitors, RUM, Status Pages, Settings), a top bar with user profile actions, and a main content area displaying high-level system uptime metrics, active incident counts, and recent check response time summaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Synthetic Polling Engine & Cron Worker

   Implement the synthetic monitoring cron engine that periodically pings target URLs, measures latency, records status codes, and handles false-positive verification checks.

   Build a robust synthetic monitoring engine using Cloudflare Workers Cron Triggers or Next.js API cron routes. The engine must iterate through active monitors, perform an HTTP GET request with a strict timeout (e.g., 10 seconds), record response time and status code, and execute a secondary validation check upon failure to prevent false positives. Store all telemetry in the check_results table and trigger incident records when state changes from up to down.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Alerting & Notification Dispatcher

   Implement notification channels via Resend email API and webhooks to dispatch instant alerts when monitors go down or recover.

   Create a notification dispatch module that integrates with the Resend API to send immediate downtime and uptime recovery email alerts to configured recipients. Add support for outbound webhook dispatches with payload signing (HMAC). Include configurable alert delay settings and cooldown intervals to avoid notification fatigue during flapping outages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Real User Monitoring (RUM) & Client Snippet

   Build the RUM ingestion endpoint and provide a lightweight JavaScript tracking snippet for users to embed on their websites.

   Develop a lightweight, high-performance JavaScript tracking snippet that collects client-side performance metrics (Navigation Timing API load times, browser user-agent, device type, geographic hints) and beacons them back via an unauthenticated, CORS-enabled Next.js API ingestion route. In the backend handler, ingest these payloads into the rum_events table with minimal latency and aggregate them for user dashboard visualization.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Public Status Pages & Root Cause Analysis

   Build customizable public status pages showing uptime history graphs and incident timelines, along with basic root cause response headers and traceroute diagnostics.

   Build a public status page module allowing users to publish selected monitors to a customizable public URL (e.g., /status/my-service). Render 90-day uptime history bars, active incident banners, and maintenance windows. Also build a root cause analysis view for individual check failures displaying response headers, SSL certificate status, and simulated traceroute logs.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Pingdom