How to vibe codePlausible

Prerequisites

• Node.jsfree

  Required for running the Next.js development environment and building the frontend dashboard.

• GitHubfree

  Source control and automated deployment pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal agent for multi-file scaffolding, writing complex aggregation queries, and debugging end-to-end.

• Cursor

  Ideal for iterative UI work on the dashboard charts and data visualization components.

Build guide

1. 01Scaffold Project Structure & Database Schemas

   Initialize the Next.js application, configure Tailwind CSS, and set up the dual database connection to PostgreSQL (for users and sites) and ClickHouse (for high-volume pageview events).

   Scaffold a new Next.js project with TypeScript and Tailwind CSS. Set up a PostgreSQL schema using Prisma or Drizzle for users, sites, and site settings (id, domain, user_id, timezone, created_at). Concurrently, write a ClickHouse database migration script to create a `pageviews` table optimized with ReplacingMergeTree or SummingMergeTree engines, containing fields: timestamp (DateTime), site_id (UUID), hostname (LowCardinality(String)), pathname (String), referrer (String), browser (LowCardinality(String)), os (LowCardinality(String)), country (LowCardinality(FixedString(2))), and visitor_hash (UInt64). Include robust connection pooling modules for both databases.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Privacy-Preserving Tracking Script

   Create a lightweight vanilla JavaScript script (~1KB) that collects pageview beacons without cookies and sends them to the ingestion endpoint.

   Write a minimal, dependency-free vanilla JavaScript tracking script that compiles to under 2KB. The script should automatically capture the current URL pathname, document referrer, screen width, and language on page load. Implement automatic scroll depth tracking using window scroll events (batching updates or recording max scroll percentage) and capture outbound link clicks and file downloads via event delegation. Send these payloads asynchronously using `navigator.sendBeacon()` or `fetch(..., { keepalive: true })` to a `/api/event` ingestion endpoint. Ensure the script sets zero cookies and stores no persistent browser identifiers.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement the High-Throughput Ingestion Pipeline

   Build the backend API endpoint that receives tracking beacons, extracts request metadata, hashes identifiers with a rotating salt, and inserts rows into ClickHouse.

   Build a Next.js API route at `/api/event` that acts as the high-throughput ingestion endpoint. The route must validate the incoming hostname against registered sites in PostgreSQL. Extract the visitor's IP address and User-Agent string from request headers, combine them with a daily rotating cryptographic salt (stored securely in environment variables), and compute a secure hash (`visitor_hash`) for cookie-free unique visitor counting. Parse the User-Agent using a lightweight parser to extract browser, operating system, and device type. Batch or directly insert these parsed fields along with timestamp, site_id, pathname, and referrer into the ClickHouse `pageviews` table with sub-millisecond response latency.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Develop Analytical Aggregation Queries & API Routes

   Write high-performance ClickHouse SQL queries to calculate metrics like unique visitors, pageviews, bounce rates, and traffic sources.

   Implement backend API routes for the analytics dashboard that query ClickHouse efficiently. Write parameterized analytical SQL queries to aggregate pageviews by time range (e.g., today, last 7 days, 30 days). The queries must compute: total pageviews, unique visitors (using `uniqExact(visitor_hash)` or `uniqHLL`), bounce rate (percentage of sessions with exactly 1 pageview), visit duration, top pages, top referrers, and device/browser breakdowns. Ensure queries accept filters for date ranges, specific pages, and traffic channels, returning JSON payloads suitable for frontend charts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Build the Single-Page Analytics Dashboard UI

   Construct a clean, minimalist web interface using React and charting libraries to display traffic metrics on a single page without training requirements.

   Build a clean, minimalist single-page analytics dashboard in Next.js inspired by Plausible's UI. The layout should feature a top date-range picker and site selector, followed by primary summary stat cards (Unique Visitors, Pageviews, Bounce Rate, Visit Duration). Below the summary cards, implement responsive data tables and visual progress bars for Top Pages, Top Sources/Referrers, Countries, and Devices. Use Recharts or Tailwind CSS bars to render time-series trend graphs. The UI must load instantly, update cleanly when filters change, and include zero multi-layer menu clutter.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Add Bot Filtering and Site Management Settings

   Implement automated filtering for known bots, data center traffic, and referrer spam, alongside basic site creation settings.

   Add bot filtering middleware to the ingestion pipeline at `/api/event`. Inspect incoming User-Agent strings against a comprehensive regex list of known web scrapers, monitoring bots, and data center IP ranges (e.g., AWS, GCP data center blocks), dropping or ignoring invalid traffic so stats reflect human visitors. Additionally, build a site management settings page in the dashboard where authenticated users can add new website domains, view their assigned tracking script snippet (`<script defer data-domain="..." src="..."></script>`), and delete sites.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Plausible