How to vibe codeFullstory

Prerequisites

• Node.jsfree

  Required for running the Next.js development environment and build tools.

• GitHubfree

  Source code control and deployment pipeline integration.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding complex full-stack pipelines, ingestion handlers, and UI dashboards.

• Cursor

  Essential for iterative UI development, reviewing session player components, and inspecting complex React code.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js application with Tailwind CSS, configure better-auth with Neon Postgres, and establish ClickHouse tables for high-volume event ingestion.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for user authentication using Neon Postgres as the primary relational store. Create a database migration script for projects, user sessions, and organization settings. Add ClickHouse client configuration for storing high-volume event streams with schema fields: event_id, session_id, user_id, event_type, timestamp, target_selector, and payload JSON.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Client-Side Tracking and Recording SDK

   Develop a lightweight client-side JavaScript snippet using rrweb or custom mutation observers to autocapture DOM mutations, clicks, inputs, and console errors.

   Build a lightweight client-side tracking script (SDK) written in TypeScript that can be injected into target web apps. Implement rrweb or an optimized MutationObserver to capture DOM snapshots, DOM mutations, mouse movements, clicks, scrolls, and rage clicks. Ensure sensitive form inputs (passwords, credit card fields) are masked automatically using CSS selectors or attributes. Batch recorded events in memory and flush them via navigator.sendBeacon or compressed POST requests to our ingestion endpoint every 5 seconds.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03High-Throughput Ingestion API Pipeline

   Build a robust backend ingestion endpoint in Next.js that validates incoming event payloads, buffers bursts, and writes them efficiently to ClickHouse and Cloudflare R2.

   Create a high-performance API endpoint `/api/v1/collect` in Next.js that accepts batch event payloads from our tracking SDK. Implement request validation, rate limiting, and deduplication. Write raw event streams asynchronously into ClickHouse, and aggregate large session DOM recording chunks into Cloudflare R2 object storage with compressed zlib format. Handle CORS headers securely to allow cross-origin tracking requests from client applications.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Session Replay Player Dashboard

   Build an interactive session replay dashboard featuring a timeline scrubber, playback speed controls, event log inspector, and DOM player canvas.

   Develop a session replay player page in the Next.js frontend using rrweb-player or a custom canvas renderer. Fetch session metadata from Postgres and replay chunks from Cloudflare R2. Build UI controls for play, pause, variable speed (1x-8x), timeline scrubbing, and skip-inactivity. Create a side panel displaying synchronous console logs, network requests, and user interaction events indexed by timestamp during the session.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Product Analytics and Funnel Queries

   Implement product analytics views including event trends, user segmentation filters, and conversion funnel step analysis backed by ClickHouse queries.

   Create a product analytics dashboard featuring custom charts (bar charts, line graphs) for event frequency and user trends over time. Implement a conversion funnel query builder where product managers can define ordered event steps (e.g., Page Viewed -> Add to Cart -> Checkout Completed) and compute conversion drop-off percentages using ClickHouse window functions and aggregations. Ensure filters for date ranges and user segments are fully interactive.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Heatmaps and Rage Click Detection

   Build visual click heatmaps and aggregation layers to highlight user friction points and rage-click clusters on recorded pages.

   Build a heatmap visualization module that fetches click and interaction coordinates for a specific URL path from ClickHouse. Render an overlay canvas on top of a wireframe or snapshot of the target page, displaying click density heat spots and highlighting clusters classified as 'rage clicks' (rapid repeated clicks in a tight bounding box). Include filtering by device type and date.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Error Handling, and Testing

   Conduct end-to-end testing, optimize SDK payload sizes, secure database connection pools, and polish the dashboard UI for production deployment.

   Perform a comprehensive review of the tracking SDK and dashboard application. Optimize ClickHouse indexing for fast session lookups and funnel aggregations. Implement error boundary handling across all dashboard views, add loading skeletons for asynchronous analytics queries, and ensure responsive layout design across desktop viewports. Write integration tests for the event collection and replay pipeline.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Fullstory