How to vibe codeCrazy Egg

Prerequisites

• Node.jsfree

  Required local runtime for running Next.js and package management

• GitHubfree

  Source control and deployment pipeline connection

• Cloudflare accountfree

  Hosting the Next.js frontend, API routes, and SQLite database storage

AI coding tools

• Claude Code

  Autonomous terminal agent capable of scaffolding both the client-side tracking script and the dashboard full-stack

• Cursor

  Ideal for fine-tuning CSS heatmap overlay components and canvas coordinate mapping

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth for single-user access, and design the SQLite schema for websites, heatmap reports, and tracked events.

   Scaffold a new Next.js project with Tailwind CSS and TypeScript. Set up better-auth with SQLite using Drizzle ORM or native bindings for Cloudflare D1. Create database tables for: `websites` (id, user_id, domain, created_at), `heatmaps` (id, website_id, page_path, created_at), and `click_events` (id, heatmap_id, x_coordinate, y_coordinate, viewport_width, element_selector, created_at). Implement an authentication check so only the owner can access the dashboard. Ensure the setup is compatible with Cloudflare Workers deployment.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Client-Side Tracking Snippet

   Build a lightweight, asynchronous JavaScript tracking script that targets external sites, captures click coordinates and viewport data, and batches payload dispatch via beacon API.

   Create a vanilla JavaScript tracking snippet (tracker.js) designed to be embedded in external websites via a single script tag. The script should read a site identifier from its attributes, listen for document click events, capture clientX, clientY, document scroll offsets, viewport dimensions, and the target element's CSS selector. Implement batched event collection using `navigator.sendBeacon()` or `fetch` with `keepalive: true` to avoid blocking page unloads. Ensure it safely ignores sensitive password fields and inputs to protect user privacy.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Data Ingestion API Endpoint

   Create a high-performance backend API endpoint that receives click payloads from the tracking script, validates website ownership tokens, and writes events to Cloudflare D1.

   Build a Next.js API route (/api/collect) that accepts POST requests containing batched click and behavioral telemetry from the tracking snippet. Validate the incoming request against the `websites` table using a site token. Sanitize all incoming payload fields (x/y coordinates, viewports, paths) and perform bulk inserts into the `click_events` table in Cloudflare D1. Implement appropriate CORS headers so the tracking script can report from any external domain.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Heatmap Report Visualization UI

   Develop the dashboard interface that visualizes click coordinates over a rendered preview or screenshot of the target web page using HTML5 Canvas or SVG overlays.

   Build a dashboard page in Next.js that lists created heatmaps for a selected website and path. When viewing a specific heatmap, fetch the associated `click_events` from the database. Create an interactive React component using an HTML5 Canvas or absolute-positioned SVG layer overlaid on a frame or screenshot container. Scale the recorded x/y click coordinates relative to the current viewport width and render glowing heatmap radial gradients or dot plots representing user click density.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Dashboard Overview & Web Analytics

   Implement a real-time traffic overview dashboard displaying total pageviews, unique visitors, and basic conversion funnel metrics.

   Build a Web Analytics overview dashboard page in Next.js. Query the database to display total tracked pageviews, active domains, and a time-series chart of traffic over the last 7 and 30 days using a charting library like Recharts. Add summary metric cards and a table showing top visited paths and referrer sources captured by the tracking snippet.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Crazy Egg