How to vibe codeBaremetrics

Prerequisites

• Node.jsfree

  Required runtime for Next.js and TypeScript tooling.

• GitHubfree

  Source control and deployment pipeline integration.

• Stripe Accountfree

  Source billing data and webhook testing for your personal SaaS.

AI coding tools

• Claude Code

  Autonomous multi-file agentic coding tool ideal for building complex calculation backends and database schemas.

• Cursor

  AI-native editor for refining chart components, dashboard layouts, and reviewing code diffs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with TypeScript, Tailwind CSS, and Turso SQLite via better-auth, establishing database tables for organizations, customers, subscriptions, invoices, and webhook audit logs.

   Create a new Next.js 16 project using the App Router, TypeScript, and Tailwind CSS. Configure better-auth with email/password authentication linked to a Turso SQLite database using Drizzle ORM. Set up database tables for: organizations, customers (id, external_id, name, email, created_at), subscriptions (id, customer_id, status, plan_name, mrr, billing_interval, current_period_start, current_period_end, canceled_at), invoices (id, customer_id, subscription_id, amount_due, amount_paid, status, created_at), and webhook_logs (id, event_id, type, payload, processed_at, status). Include proper indexes on customer_id and subscription timestamps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Stripe Webhook Ingestion Engine

   Build secure webhook ingestion endpoints for Stripe events (customer.subscription.created, updated, deleted, invoice.payment_succeeded, invoice.payment_failed), ensuring idempotent processing and robust error catching.

   Build a secure Stripe webhook API route in Next.js (/api/webhooks/stripe) that verifies webhook signatures using the Stripe SDK. Implement idempotent event handling by checking the webhook_logs table. Handle the following events: customer.subscription.created, customer.subscription.updated, customer.subscription.deleted, invoice.payment_succeeded, and invoice.payment_failed. On each event, parse the payload, update or insert customer and subscription records in the Turso database, and log the raw event. Ensure timezone handling normalizes all subscription amounts to monthly recurring revenue (MRR) values regardless of billing interval (annual, monthly).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Financial Calculation Engine (MRR & Churn)

   Implement the core analytics calculation engine that computes MRR, ARR, Net Revenue Retention (NRR), Customer Lifetime Value (LTV), and breaks down MRR movements into new, expansion, contraction, and churn.

   Write a robust calculation utility in TypeScript for SaaS subscription metrics. Implement functions to compute: Total MRR, ARR (MRR * 12), Average Revenue Per User (ARPU), Customer Churn Rate, Revenue Churn Rate, and LTV. Implement an MRR movement breakdown engine that compares a customer's active subscriptions between month N-1 and month N to accurately categorize MRR deltas into: New MRR (first-time subscribers), Expansion MRR (upgrades), Contraction MRR (downgrades), and Churn MRR (cancellations). Write comprehensive unit test cases covering edge cases like mid-cycle proration and trial conversions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dashboard Control Center UI

   Design and build the main analytics dashboard with Recharts, displaying high-level KPI metric cards and historical MRR movement trend charts.

   Build the main dashboard view in Next.js using Tailwind CSS and Recharts. Create KPI metric cards at the top for Current MRR, ARR, Net Churn Rate, ARPU, and Total Active Customers, showing month-over-month percentage changes. Below the KPI cards, implement two interactive charts: an area chart showing MRR growth breakdown (New, Expansion, Contraction, Churn) over the last 12 months, and a line chart tracking customer count and churn over time. Fetch data dynamically from internal API routes querying the Turso metrics tables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Automated Dunning & Payment Recovery

   Implement payment failure detection, automated email dunning sequences via Resend, and branded card-update landing pages.

   Build a payment recovery (dunning) subsystem. When an invoice.payment_failed webhook arrives, record a dunning session and trigger an automated email via Resend to the customer with a secure, tokenized link to a hosted card-update page. Create a frontend page (/billing/update-payment/[token]) where customers can securely update their default payment method via Stripe Elements. Upon successful card update, automatically clear the dunning alert and trigger an API call to retry the failed invoice in Stripe.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Cancellation Insights & Exit Surveys

   Build a cancellation feedback flow and exit survey widget that captures cancellation reasons and feeds into churn analytics.

   Build a cancellation insights module. Create an embeddable exit survey modal component that triggers when a user attempts to cancel their subscription. The survey should collect structured feedback (reasons like 'too expensive', 'missing features', 'switching to competitor', 'other') and optional free-text comments, saving responses to a cancellation_surveys table. Build a dedicated analytics view in the dashboard that visualizes churn reasons by percentage and total lost MRR per cancellation category.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Testing, Deployment & Polish

   Perform end-to-end testing with Stripe CLI test events, verify calculation accuracy, and deploy the application to Cloudflare.

   Perform a comprehensive review and polish of the application. Set up Stripe CLI test webhook forwarding to test end-to-end data flow from test checkout sessions through webhook ingestion to dashboard metric rendering. Add loading skeletons, error boundaries, and mobile-responsive layout adjustments using Tailwind CSS. Configure environment variables for Turso, Stripe, and Resend, and prepare the project deployment configuration for Cloudflare.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Baremetrics