CLAUDE.md Template: Next.js + TypeScript + Supabase + Clerk + Stripe API Monitoring SaaS

Overview

\nThe CLAUDE.md template is a copyable Claude Code template designed for building a complete API Monitoring SaaS using Next.js, TypeScript, Supabase, Clerk, and Stripe. It also includes AI incident summaries, uptime checks, and alert rules. This page provides a ready-to-paste CLAUDE.md code block and a guided project structure to jumpstart development on Claude Code.

\nDirect answer: This CLAUDE.md Template provides a ready-to-run Claude Code block to scaffold a production-ready API Monitoring SaaS stack with the specified technologies.

\nWhen to Use This CLAUDE.md Template

\n\n- Starting a new API Monitoring SaaS project with Next.js, TS, and Supabase
\n- Implementing user authentication via Clerk and payments via Stripe
\n- Defining uptime checks, alert rules, and AI incident summaries
\n- Generating a structured CLAUDE.md so teammates can paste and customize quickly
\n\nCopyable CLAUDE.md Template

\n# CLAUDE.md

Project role: You are a senior Full Stack Engineer specializing in API monitoring SaaS using Next.js, TypeScript, Supabase, Clerk, and Stripe. Your task is to deliver a ready-to-paste Claude Code block that configures the project to meet the requirements below.

Architecture rules:
- Use Next.js with the App Router and TypeScript.
- Supabase is the primary Postgres database and auth/row-level security source.
- Clerk handles user authentication and session management.
- Stripe handles billing, subscriptions, and invoices.
- Implement uptime checks and AI-generated incident summaries for outages.
- All server-side secrets must be accessed via environment variables; never hard-code.

File structure rules:
- Treat this as a monorepo with an apps/web Next.js app and supporting libs.
- Keep code in TypeScript; no JavaScript-only code.
- Avoid framework drift; only rely on the specified stack components.

Authentication rules:
- Use Clerk for authentication flows.
- Require signed-in sessions for API endpoints performing monitoring or billing.
- Do not expose API keys in client code.

Database rules:
- Use Supabase Postgres with RLS enabled.
- Create tables: users, monitors, incidents, alerts, and summaries.
- Expose read/write access through server-side endpoints; never from client directly.

Validation rules:
- Validate input payloads for uptime checks, alert rules, and incident summaries.
- Enforce strict numeric bounds and required fields.

Security rules:
- Secrets must be stored in environment variables; never in source.
- Enforce CSRF protection on mutating endpoints.
- Sanitize all user-generated content before storage or display.

Testing rules:
- Unit tests for utilities and API handlers with Vitest.
- Integration tests for monitor creation and incident summarization.
- E2E tests for login, create monitor, and alert rule triggers with Playwright.

Deployment rules:
- Deploy on Vercel or your preferred host; ensure environment variables are configured.
- Run migrations during deployment; seed initial data for testing.
- Use incremental builds and caching to optimize performance.

Things Claude must not do:
- Do not rely on ORMs not in the stack.
- Do not bypass authentication checks.
- Do not bypass Supabase RLS or database constraints.
- Do not expose private keys or API tokens in code or logs.\nRecommended Project Structure

\nmy-api-monitoring/
├── apps/
│   └── web/
│       ├── app/
│       │   ├── page.tsx
│       │   ├── layout.tsx
│       │   └── error.tsx
│       ├── components/
│       │   ├── Header.tsx
│       │   └── DashboardCard.tsx
│       ├── lib/
│       │   ├── supabaseClient.ts
│       │   └── clerkClient.ts
│       ├── services/
│       │   ├── stripeClient.ts
│       │   └── uptimeService.ts
│       └── pages/
│           ├── api/
│           │   ├── uptime.ts
│           │   └── incidents.ts
│           └── index.tsx
├── packages/
│   └── shared/
│       └── ui/
│           ├── Button.tsx
│           └── Card.tsx
└── infra/
    ├── docker/
    └── deployment/\nCore Engineering Principles

\n\n- Security-first by default: encrypt secrets and enforce proper access controls.
\n- Observability: structured logs, metrics, and AI-assisted incident summaries.
\n- Defensive coding: strict input validation and type-safe boundaries.
\n- Single source of truth: clear ownership of data and events in Supabase.
\n- Automation: CI/CD, migrations, and automated tests for every change.
\n\nCode Construction Rules

\n\n- TypeScript everywhere; avoid any when possible.
\n- Next.js App Router patterns; keep API routes in /app/api.
\n- Use Supabase client with role-based access; never embed service keys in client code.
\n- Clerk for authentication; ensure getAuthStore usage for session state on client.
\n- Stripe integration must use webhooks and secure secret handling via environment variables.
\n- All uptime checks are backed by server-side endpoints; monitors stored in Supabase.
\n- AI incident summaries must be generated server-side with safe fallbacks and caching.
\n- Keep Claude Code blocks idempotent; avoid stateful side effects across runs.
\n- Do not rely on ORMs not in the stack.
\n\nSecurity and Production Rules

\n\n- Environment variables for all secrets; never commit keys.
\n- CSRF protection on mutating endpoints; use signed cookies for session management.
\n- Enable Row Level Security on relevant tables in Supabase.
\n- Validate and sanitize all external inputs; avoid overexposure of data in APIs.
\n\nTesting Checklist

\n\n- Unit tests for utilities and handlers with Vitest.
\n- Integration tests for monitor creation, uptime checks, and incident summaries.
\n- End-to-end tests for authentication, monitor flow, and alert triggering with Playwright.
\n- CI must run type checks and linting; fail on any TS errors.
\n\nCommon Mistakes to Avoid

\n\n- Relying on client-side secrets or embedding keys in the frontend.
\n- Ignoring database security rules or lacking test coverage for monitoring endpoints.
\n- Not validating alert rule configurations; allow invalid configurations to slip through.
\n\nFAQ

\n\n- What is this CLAUDE.md Template for API Monitoring SaaS? A copyable Claude Code block for Next.js + TS + Supabase + Clerk + Stripe with uptime checks and AI incident summaries.
\n- Which stack does this template target? Next.js (App Router) + TypeScript, Supabase, Clerk, Stripe, uptime checks, AI incident summaries.
\n- How do I use the CLAUDE.md code block? Copy, paste into CLAUDE.md, and adjust environment variables and endpoints as needed.
\n- Can I customize alerts and AI summaries? Yes; the template includes sections to define alert rules and AI-generated summaries.
\n- What are the deployment considerations? Deploy to Vercel or your hosting, configure environment variables, and ensure migrations/seeding are run.
\n\n

Related implementation resources: AI Use Case for Software Agencies Using Github Copilot To Accelerate Boilerplate Code Generation for New Client Mvps and Production-grade billing logic governed by project rules.