How to vibe codeDataFast

Prerequisites

• Node.jsfree

  Required for running the Next.js development server, building the CLI tool, and executing MCP scripts.

• GitHubfree

  Version control and automated deployment configuration for the tracking backend and dashboard.

• Cursorfree tier / $20/mo Pro

  AI-native code editor to rapidly build out the dashboard views, event ingestion router, and MCP protocol handlers.

AI coding tools

• Cursor

  Best-in-class IDE for iterating rapidly across backend API routes, tracking scripts, and complex dashboard UI layouts.

• Claude Code

  Ideal agentic CLI companion for scaffolding the `@datafast/cli` package and implementing the MCP server specification.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso database connection, and define schemas for websites, events, visitors, and revenue attribution.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Turso client using `@libsql/client` with environment variables `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN`. Write a migration script to create tables: `websites` (id, domain, user_id, created_at), `events` (id, website_id, visitor_id, event_type, path, referrer, utm_source, utm_medium, utm_campaign, timestamp), `visitors` (id, website_id, first_seen, user_agent, country), and `payments` (id, website_id, visitor_id, amount, currency, processor, external_id, created_at). Ensure proper indexes on `website_id`, `visitor_id`, and `timestamp` for fast analytics querying.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Lightweight Tracking Script & Ingestion API

   Build the client-side JavaScript tracking snippet (`script.js`) and the high-throughput ingestion endpoint to record pageviews and custom events.

   Build an ingestion API route at `POST /api/send` that accepts analytics events containing `site_key`, `event_type`, `path`, `referrer`, and UTM parameters. Extract visitor IP and User-Agent headers, hash them securely for GDPR compliance if needed, assign a persistent visitor cookie if not present, and asynchronously batch insert records into the `events` and `visitors` tables in Turso. Next, create a lightweight vanilla JavaScript tracking script (`public/js/script.js`) that captures page views using `navigator.sendBeacon` or `fetch`, automatically parsing document.referrer and URL query parameters.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Payment Webhook Attribution Engine

   Implement webhook listeners for Stripe and LemonSqueezy to capture checkout events and link external customer payments back to visitor sessions.

   Create API route handlers for payment webhooks at `POST /api/webhooks/stripe` and `POST /api/webhooks/lemonsqueezy`. When a checkout session completes or an invoice is paid, extract the customer email, payment amount, and metadata (or fallback to matching recent visitor sessions by metadata or customer fingerprint). Store the transaction in the `payments` table linked to the appropriate `website_id` and `visitor_id`. Compute revenue attribution metrics by aggregating event traffic sources leading up to the matched `visitor_id`.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Analytics Dashboard UI & Revenue Metrics

   Construct the main analytics dashboard with overview charts, referrer tables, goal tracking, and revenue-per-visitor metrics.

   Build the main analytics dashboard UI in Next.js using Tailwind CSS and Recharts. Create components for: 1) Overview summary cards (Total Visitors, Pageviews, Conversion Rate, Total Revenue, Revenue per Visitor), 2) Time-series line chart for traffic and revenue trends, 3) Referrer breakdown table with traffic counts and attributed revenue, and 4) Goal and conversion funnel configuration screens. Add date-range filtering (today, 7d, 30d, custom) and website selector dropdowns querying internal analytics endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Model Context Protocol (MCP) Server

   Implement a Streamable HTTP MCP server allowing AI coding assistants like Claude Code and Cursor to query analytics data and manage website settings in natural language.

   Implement an MCP server endpoint at `POST /api/mcp` using the Model Context Protocol TypeScript SDK supporting Streamable HTTP transport. Authenticate requests via Bearer token validation checking against user account tokens (`dft_...`) or website keys (`df_...`). Implement tools following the naming convention `datafast_<resource>_<action>`: `datafast_analytics_overview`, `datafast_visitors_search`, `datafast_websites_list`, and `datafast_goals_create`. Enforce safety checks: require `confirm: true` for destructive tools, ensure API keys never expose full secret strings, and validate token permissions against the requested website ID.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Command Line Interface (CLI)

   Build the `@datafast/cli` package allowing users to log in, manage websites, and query analytics directly from the terminal.

   Create a companion Node.js CLI package `@datafast/cli` using Commander.js. Implement commands: `datafast login` (opens browser or prompts for token input, saving credentials securely to `~/.config/datafast/config.json`), `datafast websites list`, `datafast analytics overview`, and `datafast visitors search`. Add global flags `--json` for compact JSON output and `--verbose` for request debugging. Support environment variable overrides via `DATAFAST_TOKEN` and `DATAFAST_API_BASE`.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for DataFast