How to vibe codeChartMogul

Prerequisites

• Node.jsfree

  Required runtime for Next.js full-stack development and TypeScript execution.

• GitHubfree

  Source control and deployment pipeline integration.

• Stripe Accountfree

  Source of test subscription events and webhooks for ingestion testing.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding complex multi-file data pipeline logic and database schemas.

• Cursor

  Ideal for fine-tuning the analytics dashboard UI and complex charting components.

Build guide

1. 01Scaffold Database Schema and Authentication

   Initialize a Next.js project with Tailwind CSS, configure better-auth for single-user admin access, and set up Neon Postgres tables for organizations, customers, subscriptions, invoices, and raw webhook events.

   Create a new Next.js 16 project with TypeScript and Tailwind CSS v4. Set up better-auth connected to a Neon Postgres database using Drizzle ORM. Define database schemas for tenants, customers, subscriptions (with status, plan_id, current_period_start, current_period_end), invoices (amount_paid, currency, status, created_at), and raw_webhook_events (id, provider, payload, processed_at, error). Ensure proper indexing on customer_id and subscription_id foreign keys.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Stripe Webhook Ingestion Engine

   Build an idempotent webhook ingestion endpoint that receives Stripe events (customer.subscription.created, updated, deleted, invoice.payment_succeeded), stores raw payloads, and handles duplicate deliveries safely.

   Implement a secure API route at `/api/webhooks/stripe` that verifies Stripe webhook signatures. Store every incoming event in the `raw_webhook_events` table with idempotency checks based on Stripe's event ID. Parse the event payload and upsert corresponding records into customers, subscriptions, and invoices tables without throwing unhandled exceptions if events arrive out of order.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03MRR Calculation & Event Sourcing Pipeline

   Develop background worker logic or utility functions to compute Monthly Recurring Revenue (MRR) movements—New, Expansion, Contraction, and Churn—on a daily or monthly calendar basis.

   Create a calculation engine function in TypeScript that processes subscription state transitions from the database. Implement logic to calculate monthly recurring revenue (MRR) per customer, classifying changes between consecutive months into New MRR, Expansion MRR, Contraction MRR, Churned MRR, and Reactivation MRR. Store computed historical snapshots in a daily_metrics table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Core Metrics Dashboard UI

   Build the main analytics dashboard displaying high-level SaaS KPI cards (MRR, ARR, ARPU, Churn Rate, LTV) and time-series charts using Recharts.

   Build a dashboard page in Next.js using Tailwind CSS and Recharts. Create KPI summary cards for MRR, ARR, Churn Rate, and ARPU based on data queried from the daily_metrics table. Add interactive area charts showing MRR growth broken down by movement components (New, Expansion, Contraction, Churn) over the last 12 months.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Customer Segmentation and Detail View

   Implement a customer table view with search, filtering by plan or status, and a detailed customer drawer showing timeline history and LTV metrics.

   Create a customers list page with search filtering by email and status (active, trialing, canceled). Clicking a customer opens a detail view displaying their full subscription timeline, total revenue generated, active plans, and invoice history. Ensure all queries are optimized with proper database indexes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for ChartMogul