How to vibe codePostHog

Prerequisites

• Node.jsfree

  Runtime environment for building the TypeScript web application and ingestion scripts.

• GitHubfree

  Source control and deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for bootstrapping complex full-stack architectures.

• Cursor

  AI code editor ideal for iterative UI component building and reviewing complex frontend diffs.

Build guide

1. 01Scaffold Core Monolith and Database Schema

   Initialize a Next.js application with Tailwind CSS, configure TypeScript, and set up the connection pooling to ClickHouse and Postgres for user management.

   Create a new Next.js project using App Router, TypeScript, and Tailwind CSS. Configure a Prisma schema for Postgres to store user accounts, organizations, projects, and feature flag definitions. Simultaneously, write a ClickHouse client utility connection module to execute analytical queries for event trends and funnels. Ensure environment variables are properly typed and validated using Zod.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement Event Ingestion API Endpoint

   Build a high-throughput HTTP POST endpoint that receives client telemetry batches, validates payload structures, and bulk-inserts rows into ClickHouse.

   Build a high-performance Next.js API route at `/api/v1/capture` that accepts batch event payloads (distinct_id, event name, properties, timestamp, and url). Validate incoming payloads lightweightly, sanitize user inputs, and batch-insert them asynchronously into the ClickHouse events table. Implement CORS headers so client-side tracking scripts can send requests cross-origin without failing preflight checks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Client-Side Autocapture SDK Script

   Develop a lightweight JavaScript snippet that captures pageviews, clicks, and form submissions automatically and flushes them to the ingestion endpoint.

   Create a vanilla JavaScript client SDK that hooks into window load and history change events to autocapture pageviews. Add global click and form submit listeners to record user interactions without manual tagging. Implement a batching mechanism using `navigator.sendBeacon` and `fetch` with a background queue to flush events reliably before the page unloads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop Product Analytics Trend and Funnel Dashboard

   Build dashboard UI components that query ClickHouse and render interactive charts for trends and conversion funnels.

   Build a React dashboard interface with a sidebar and chart components using Recharts. Implement an insights builder view allowing users to configure Trends (counting events over time grouped by property) and Funnels (sequential step conversion rates). Write the underlying SQL/HogQL query builder functions that translate UI filter parameters into optimized ClickHouse analytical queries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Implement Session Replay Recording and Player

   Integrate rrweb on the client to capture DOM mutations and build a playback viewer on the dashboard.

   Integrate the `rrweb` library into the client SDK to record DOM mutations, mouse movements, and console logs efficiently. Store serialized recording chunks in object storage and map session IDs to events. Build a dashboard session replay viewer page utilizing the rrweb-player component to let developers visually watch user interaction sessions alongside event timelines.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Build Feature Flag Evaluation Engine

   Create a feature flag management system with client-side evaluation endpoints supporting multivariate rules and percentage rollouts.

   Create a feature flags management CRUD interface in the Next.js app. Build an edge-optimized evaluation API endpoint (`/api/v1/feature_flag`) that accepts a distinct_id and feature key, evaluates targeting rules, boolean toggles, and percentage rollouts using consistent hashing, and returns the flag state with minimal latency.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for PostHog