# How to Vibe Code Your Own Plausible (and Stop Paying for It)

> Simple, privacy-friendly Google Analytics alternative

- Site: https://plausible.io
- Category: Analytics
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 2-4 weeks part-time

## Verdict

Build a personal subset with a Next.js frontend and ClickHouse, but note that managing columnar query performance and ingestion scale takes real debugging.

Cloning Plausible for personal use is a rewarding engineering exercise, but building a production-grade analytics engine involves hard architectural tradeoffs. While a simple Postgres backend will choke on raw event logs at scale, setting up and querying ClickHouse requires writing raw SQL analytical aggregations or integrating specialized drivers. Furthermore, handling ad-blocker resilience via CNAME proxies adds frustrating DNS and SSL configuration edge cases. If you just want traffic stats for your side projects, paying $9/mo is vastly more rational than maintaining a time-series ingestion pipeline.

### What you can't replicate

- Plausible's brand reputation and established EU legal/compliance posture
- The massive open-source community testing every edge case across 20,000+ production sites

## What it does

A lightweight web analytics tool that provides essential traffic stats on a single dashboard without using cookies, persistent identifiers, or cross-site tracking.

### Core features

- Lightweight (~1KB) JavaScript tracking script embedding
- High-throughput event ingestion endpoint
- IP and User-Agent hashing with daily rotating salts for cookie-free uniqueness
- Single-page analytics dashboard (pageviews, visitors, bounce rates, visit duration)
- Automatic scroll depth and outbound link tracking
- Goal and custom event tracking
- Traffic channel and UTM campaign grouping
- Built-in bot and data center traffic filtering

## The business

### Pricing

- Starter: $9/month — For personal sites and blogs
- Growth: $14/month — For growing indie projects
- Business: $19/month — For small businesses

Founded 2018.
Team size: ~10.

## The hard parts

- Designing a high-throughput ingestion pipeline that handles bursty web traffic without locking
- Configuring and maintaining ClickHouse columnar tables for instant time-series log aggregation over large row counts
- Implementing rolling daily hashing pipelines to count unique visitors accurately without storing PII
- Building first-party Managed Proxy routing via CNAME DNS records to bypass aggressive ad blockers

## How to vibe code Plausible

### Prerequisites

- Node.js (free): Required for running the Next.js development environment and building the frontend dashboard.
- GitHub (free): Source control and automated deployment pipelines.

### Recommended AI 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.

### Stack

- Frontend: Next.js with Tailwind CSS and Recharts
- Backend: Next.js API Routes / Server Actions
- Database: ClickHouse (for analytics event logs) + PostgreSQL (for user/site settings)
- Auth: better-auth
- Payments: none
- Other: Vercel AI SDK

### Hosting

- Fly.io (Running the ClickHouse analytical database instance and lightweight Node ingestion API server.): ~$5-10/mo
- Vercel (Hosting the Next.js frontend dashboard and serverless API routes.): $0/mo (Hobby)

### Build guide

1. **Scaffold 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.
```

2. **Build 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.
```

3. **Implement 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.
```

4. **Develop 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.
```

5. **Build 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.
```

6. **Add 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.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12 one-time
- Total: ~$32 one-time

**Ongoing costs (monthly):**

- Fly.io (ClickHouse + Ingest API): $5-10/mo
- Vercel Frontend: $0/mo
- Total: ~$5-10/mo

- Paying for the SaaS instead: $9/mo
- Build time: 40 hours
- AI tool credits: $20
- Break-even: Never (paying $9/mo is cheaper than building and maintaining this stack)

## Sources

- [Plausible Analytics Official Website](https://plausible.io)
- [Plausible Documentation & Privacy Specs](https://plausible.io/docs)
- [Plausible Open Source Repository Architecture](https://github.com/plausible/analytics)