How to vibe codeOutseta

Prerequisites

• Node.jsfree

  Runtime environment for building and running the full-stack Next.js application.

• GitHubfree

  Source control and deployment pipeline integration.

• Stripe accountfree

  Required for test-mode subscription billing and webhook event handling.

AI coding tools

• Claude Code

  Best-in-class multi-file agentic coding tool for scaffolding complex relational models and backend logic.

• Cursor

  Ideal AI-native editor for refining dashboard UI grids, forms, and embed widgets.

Build guide

1. 01Project Scaffolding & Unified Database Schema

   Initialize a Next.js application with TypeScript, Tailwind CSS, and Prisma connected to Neon PostgreSQL. Establish relational tables for users, accounts, subscriptions, CRM records, support tickets, and email campaigns.

   Initialize a Next.js 16 project with Tailwind CSS, TypeScript, and Prisma ORM. Configure the Prisma schema in prisma/schema.prisma to support a unified multi-tenant SaaS backend. Define models for Account (id, name, createdAt), User (id, email, name, passwordHash, accountId, role), Subscription (id, accountId, stripeSubscriptionId, status, planId, currentPeriodEnd), CrmActivity (id, accountId, type, metadata, timestamp), Ticket (id, accountId, subject, status, assignedTo), and EmailCampaign (id, name, subject, body, sentAt). Ensure foreign key constraints and indexes are correct. Provide a migration script and seed data for local testing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Session Management

   Implement authentication using better-auth with email/password and Google OAuth login, securing internal dashboard routes and user profile management.

   Integrate better-auth into the Next.js app to handle secure user registration, email/password login, and Google OAuth callback flows. Store users in the Neon database using Prisma. Create protected API routes and frontend dashboard pages for user profile management, team member invitations, and password resets. Ensure session cookies are secure, httpOnly, and properly validated across server actions and API endpoints.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Stripe Billing & Subscription Lifecycle

   Build the checkout flow, subscription management portal, and robust webhook handlers for Stripe events (`invoice.payment_succeeded`, `invoice.payment_failed`, `customer.subscription.updated`).

   Implement Stripe integration for recurring subscription billing. Create server actions to initiate Stripe Checkout sessions for plans (Founder, Startup, Growth). Build a robust webhook handler endpoint at /api/webhooks/stripe that securely verifies signatures and handles events: checkout.session.completed, invoice.payment_succeeded, invoice.payment_failed, and customer.subscription.updated. Ensure subscription statuses in the database accurately reflect trialing, active, past_due, and cancelled states with proper error logging.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Unified CRM Grid & Account Management

   Build a centralized dashboard table grid displaying customer accounts, subscription statuses, and custom metadata with filtering and search capabilities.

   Build a responsive CRM dashboard page featuring a searchable, filterable data table of customer accounts and contacts. Display account names, emails, subscription lifecycle states (Active, Trialing, Cancelled), MRR contribution, and creation dates fetched via a server action from the Neon database. Include a detail slide-over view for individual accounts showing related subscription history, activity logs, and custom metadata fields.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Email Marketing & Transactional Alerts

   Integrate Resend for sending transactional registration confirmations, password resets, and automated onboarding email sequences.

   Integrate the Resend API to handle transactional and marketing emails. Create reusable React Email templates for registration confirmation, password reset, and payment receipts. Implement a background processing queue or server action to trigger onboarding drip sequences when new accounts register or subscription states change. Include error handling and bounce logging in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Help Desk Ticketing & Embed Widgets

   Build a support ticketing system with internal assignment views and embeddable JavaScript login/signup widgets for external sites.

   Build a support ticketing module featuring a shared team inbox, ticket status management (Open, Pending, Closed), assignment to team members, and message threads. Additionally, build an embeddable JavaScript widget bundle (using standard web components or an iframe script) that third-party sites can drop in via a <script> tag to render sign-up, login, and user profile modals communicating securely with this backend application.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Outseta