How to vibe codeUmami

Prerequisites

• Node.jsfree

  Runtime environment for building and running the Next.js application.

• GitHubfree

  Version control and automated deployment trigger.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full Next.js stack, database schema, and tracking script end-to-end.

• Cursor

  Ideal for fine-tuning dashboard charts, UI components, and SQL aggregation queries with direct code diff reviews.

Build guide

1. 01Scaffold Next.js App & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Prisma ORM, and set up the PostgreSQL database schema for websites, sessions, and website events.

   Create a new Next.js App Router project in TypeScript with Tailwind CSS and Shadcn/ui. Initialize Prisma ORM configured for PostgreSQL. Create a database schema with models for 'Website' (id, name, domain, userId, createdAt), 'Session' (id, websiteId, hostname, browser, os, device, country, createdAt), and 'WebsiteEvent' (id, websiteId, sessionId, url, eventName, eventData, createdAt). Add proper indexes on websiteId and createdAt for high-performance time-series aggregations. Provide the complete prisma/schema.prisma file and an initial migration script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Tracker Ingestion API

   Create a high-performance, lightweight API endpoint that receives telemetry data, parses user-agent headers for device and browser stats, and writes records asynchronously without blocking.

   Implement a Next.js API route at POST /api/send that acts as the telemetry ingestion endpoint. It must accept a JSON payload containing payload type, website token, url, referrer, and optional custom event data. Extract client metadata from request headers (user-agent for browser/OS/device estimation via standard lightweight parsing, and geo-ip headers if available). Implement bot filtering heuristics to discard requests from common automated web crawlers and scrapers. Save the session and event data efficiently to PostgreSQL using Prisma, returning a 200 OK status immediately. Include input validation and error handling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Write the Vanilla JS Tracker Script

   Develop the ultra-lightweight, dependency-free JavaScript snippet that website owners embed to collect pageviews and custom events asynchronously.

   Create a vanilla JavaScript tracking script (target size <2KB minified) designed to be embedded in external websites via a script tag. The script should automatically capture page views on load and history changes (SPA navigation), record referrer data, and expose a global `umami.track(eventName, eventData)` function for custom event tracking. It must send data asynchronously via `navigator.sendBeacon` or `fetch` with `keepalive` to the `/api/send` endpoint without setting any cookies or storing PII. Provide instructions on how to bundle or minify this script.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Implement Analytics Dashboard & Aggregation Queries

   Build the core dashboard views and SQL aggregation queries to display real-time metrics, pageviews, referrers, and custom events over custom date ranges.

   Build a dashboard page in the Next.js App Router at /websites/[id] that displays web analytics metrics for a selected website. Implement backend API routes and helper query functions using Prisma/SQL to aggregate total pageviews, visitors, bounces, and average visit time grouped by time ranges (today, last 7 days, last 30 days). Include breakdown lists for top URLs, referrers, browsers, operating systems, and countries. Use Recharts to render clean time-series charts for traffic over time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add Authentication & Multi-Website Management

   Integrate better-auth for secure user authentication and build settings UI allowing users to register new websites and retrieve their tracker script tags.

   Integrate better-auth into the Next.js application supporting email/password and GitHub sign-in. Secure all analytics dashboard routes so users can only view websites they own. Build a dashboard home view allowing users to create new website entries (specifying a name and domain), generate a unique tracking ID/token, and view the exact HTML script tag snippet required to embed tracking on their external sites.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Bot Filtering & Deployment

   Refine bot detection filters, add loading states, handle empty states, and deploy the application to Vercel connected to Neon Postgres.

   Review and enhance the bot-filtering utility in the ingestion route to filter out known search engine indexers and automated scanners based on user-agent strings and IP patterns. Add smooth loading skeletons, date-range filter pickers, and clean empty states across the analytics dashboard. Ensure all environment variables are correctly documented in a .env.example file for seamless deployment on Vercel and Neon.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Umami