How to vibe codeUsermaven

Prerequisites

• Node.jsfree

  Required runtime environment for building and running the Next.js full-stack web application.

• GitHubfree

  Source control repository and deployment trigger for hosting infrastructure.

• Cloudflare accountfree

  Hosting the event collection API worker and edge proxy routing.

AI coding tools

• Claude Code

  Best-in-class agentic terminal tool for scaffolding complex multi-file database schemas, analytics aggregation queries, and frontend chart components.

• Cursor

  IDE-native assistant ideal for refining dashboard UI views, tailwind layouts, and chart integrations.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the Neon Postgres database schema for tenants, workspaces, users, events, sessions, and attribution touchpoints.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication. Create a Neon Postgres database schema using Drizzle ORM containing tables for: users, workspaces, workspace_members, events (id, workspace_id, visitor_id, user_id, event_type, url, referrer, utm_source, utm_medium, utm_campaign, timestamp, metadata jsonb), sessions (id, visitor_id, first_touch_channel, last_touch_channel, started_at), and conversions (id, workspace_id, user_id, revenue, attributed_channel, created_at). Ensure proper foreign key constraints and indexes on timestamp and workspace_id for fast analytical queries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02JavaScript Tracking SDK & Ingestion Worker

   Build a lightweight client-side JavaScript tracking script that auto-captures pageviews, clicks, and UTM parameters, alongside a Cloudflare Worker ingestion endpoint that securely accepts events and writes them to storage.

   Build a lightweight JavaScript tracking SDK snippet that clients can embed on their websites. The SDK should automatically capture page views, clicks on elements with data-track attributes, and parse UTM parameters from the URL query string into localStorage. When triggered, it should batch and send these events via a beacon or fetch POST request to our ingestion endpoint. Then, build a Cloudflare Worker endpoint at /api/collect that validates the workspace API key, parses incoming JSON event payloads, handles CORS headers, and buffers/inserts the raw event data into our database storage with low latency.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Identity Resolution & Session Stitching Engine

   Implement server-side logic that merges anonymous visitor tracking sessions with identified user accounts upon login or form submission.

   Implement an identity resolution background service in Next.js API routes. When an event contains both an anonymous visitor_id and an authenticated user_id (e.g. after a signup or login event), update all historical visitor sessions and unassociated touchpoints to link directly to that user_id. Write database migration queries and indexes to ensure fast cross-device stitching and prevent duplicate entity creation in the contacts hub.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Multi-Touch Attribution & Funnel Analysis Engine

   Create the core analytics processing engine to calculate multi-touch attribution models (first-touch, last-touch, linear) and multi-step conversion funnels.

   Build the attribution and funnel calculation engine in TypeScript. Create API endpoints that compute multi-touch attribution models (First-Touch, Last-Touch, Linear) by querying touchpoint sequences across a configurable lookback window (up to 365 days) leading up to a revenue conversion event. Also build a funnel calculation route that accepts an ordered array of step event names (e.g., page_view -> product_view -> start_trial -> paid_subscription), queries drop-off counts between steps over a date range, and returns conversion percentages and drop-off rates for visualization.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Analytics Dashboard UI & Chart Visualizations

   Develop the primary SaaS dashboard UI featuring traffic overviews, conversion funnel step charts, revenue attribution breakdown tables, and user journey maps using Recharts and Tailwind CSS.

   Create a comprehensive dashboard UI in Next.js App Router for the analytics workspace. Include a Traffic Overview page with line charts for visitors, pageviews, and sessions using Recharts. Build a Funnel Analysis view displaying conversion steps and drop-off percentages, a Revenue by Channel attribution breakdown bar chart, and a User Journey map component listing top converting paths with user counts and average LTV. Ensure clean dark/light mode styling using Tailwind CSS and responsive table layouts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Maven AI Natural Language Insights Companion

   Integrate the Vercel AI SDK and Anthropic API to create 'Maven AI', a natural language assistant that queries attribution and funnel metrics and presents daily automated recommendations.

   Implement the Maven AI companion feature using the Vercel AI SDK and Anthropic API. Create an API route /api/ai/insights that securely queries recent workspace analytics tables (traffic trends, top conversion channels, funnel drop-off spikes) and injects this structured summary into a system prompt for Claude. Build a chat interface component in the dashboard allowing users to ask natural language questions about their marketing ROI and receive synthesized analytical insights and automated growth recommendations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Usermaven