plug-saas

No DB. No Cost. Just Plug In Your Product.

Production-ready SaaS infrastructure with Auth, Billing, and Usage Tracking built-in.

Customize your landing page, pricing tiers, and features with AI-powered configuration.

🚀 Live Demo • ⚡ Quick Start

$0 hosting until 10k users • Deploy in 15 minutes • Global edge network (300+ cities)

🎬 Watch It In Action

🎥 What is Plug-SaaS? • ⚡ Clone to Live Testing in 10 Minutes • 🌍 Deploy to the Global Edge

This is a Complete, Working SaaS Application

👉 Try the live demo now - See it in action:

Sign up with Google
Upgrade to Pro (use test card 4242 4242 4242 4242)
Click "Process Document" to test usage tracking
Watch the dashboard update in real-time
Access billing portal to manage subscription

That's auth + billing + usage tracking + customer portal. All working. Right now.

The "Process Document" button is where YOUR product logic goes. Everything else is already built.

What You Get vs What You Add

✅ You Get (Complete & Working)

Landing page with pricing
Clerk authentication (email + OAuth)
Stripe checkout + subscriptions
Usage tracking with monthly resets
Dashboard with real-time counter
Customer billing portal
Rate limiting (100 req/min)
Edge deployment (300+ cities)
CI/CD pipeline
Zero database maintenance - No DB needed for auth/billing

🎯 You Add (Your Product)

Replace the "Process Document" button with your actual logic:

// api/src/index.ts - around line 650
const result = await yourFunction(userId, plan, requestBody);
// That's it. Auth, billing, usage tracking already handled.

Who This Is For

Got an app? Deploy this, wire it up, start charging. Got an API? Same deal. 15 minutes to connect. Got an idea? Build your thing, plug it in later. The hard part's done. Got nothing but ambition? Clone this, figure out your product while your competitors are still setting up Stripe.

Perfect for:

Indie hackers who've built the 10th auth system and are done with that
Developers with APIs that need monetization yesterday
Teams who'd rather ship features than debug webhooks
Anyone allergic to $150/month hosting bills before their first customer

✨ The Hard Parts, Already Built

🎨 Complete Frontend Template

Working React template included: Pricing pages, protected routes, customer portal, dashboard, tier cards. All wired up and ready to use.

🤖 AI-Assisted Setup & Deployment

Configured via Claude Code commands: Answer questions, we handle the rest.

/configure-tiers - Frontend routes, pricing cards, backend limits, Stripe setup
/deploy-worker - Validates secrets, creates KV, deploys API, generates webhook URL

See commands →

🔐 Stateless JWT Authentication

User's plan lives in the token. Zero database lookups for authorization.

🔍 Architecture deep dive →

💳 Subscription Billing

Stripe integration with webhooks, customer portal, and tier management.

💰 Cost breakdown →

📊 Usage Limits & Tracking

Per-tier request limits with monthly resets. Built-in enforcement.

🏗️ Architecture guide →

🌍 Global Edge Deployment

Runs in 300+ cities. ~50ms response times worldwide. Zero cold starts.

📐 How it works →

🛡️ Security Hardening

Rate limiting, webhook verification, CORS, security headers. Built-in.

🔒 Security guide →

💵 $0 Hosting Costs

Free until 10k+ users on Cloudflare's free tier. Then ~$31/month.

📈 See cost breakdown →

What Makes This Different

1. Your Product Plugs In

This template is the infrastructure layer. You provide the product logic:

// api/src/index.ts - Add your endpoint

if (url.pathname === '/api/your-feature' && request.method === 'POST') {
  // JWT already verified, userId and plan available
  // Tier limits already checked

  // YOUR CODE HERE
  const result = await yourBusinessLogic(userId, plan);

  // Usage automatically tracked
  return new Response(JSON.stringify({ result }), { status: 200 });
}

The JWT, usage tracking, and tier enforcement are already wired up. You write the features.

2. Edge-Native Architecture

Your API runs globally, not in a single region. Cloudflare deploys your code to 300+ cities. Users in Tokyo, London, and New York all get ~50ms response times.

Zero cold starts. No Lambda spin-up delays. Always-on Workers.

3. No Database Until You Need One

User identity → Clerk stores it
Subscription status → Stripe stores it
Usage counters → Cloudflare KV (key-value store)

You only add a database when YOU need to store YOUR app's data (documents, files, posts, etc.). Not for auth/billing infrastructure.

JWT as Single Source of Truth:

Traditional SaaS: Request → Verify auth → Query DB for plan → Check limits → Process

This template: Request → Verify JWT (plan included) → Check limits → Process

No database lookups. The user's subscription tier is embedded in their JWT. When they upgrade, Stripe webhooks update Clerk metadata, and the next JWT automatically includes the new plan.

📖 Deep dive: Architecture Guide

Quick Start

Prerequisites

Before you begin, make sure you have:

Node.js 20+ installed
Wrangler CLI - Cloudflare's deployment tool: npm install -g wrangler
Stripe CLI - For webhook testing: Install guide
Accounts created (all free to start):
- Cloudflare account (free tier)
- Clerk account (free up to 10k users)
- Stripe account (test mode)

1. Clone & Install

📹 Video Guide: Watch Step 1 Setup Video

Open your terminal and run these commands:

a) Clone the repository

git clone https://github.com/Fruitloop24/plug-saas.git
cd plug-saas

b) Install backend dependencies

cd api
npm install
cd ..

c) Install frontend dependencies

cd frontend-v2
npm install
cd ..

✅ Now open the project in VS Code (or your preferred IDE/editor) to continue with configuration:

code .

d) Rename the example configuration files (IMPORTANT - required for the app to work):

In your IDE, locate and rename these files by removing .example from the filename:

api/.dev.vars.example → rename to api/.dev.vars
frontend-v2/.env.example → rename to frontend-v2/.env

These files will be filled in with your API keys in the next steps.

2. Set Up Clerk Authentication

Clerk handles all user authentication and JWT tokens for this application.

📹 Video Guide: Watch Step 2 Setup Video

📖 Follow the detailed setup guide: Clerk Setup Guide

This guide will walk you through:

Creating your Clerk application
Setting up the JWT template (required for tier system)
Getting your API keys

✅ When complete, add your Clerk keys to the config files you renamed in Step 1:

📋 See complete examples: Backend .dev.vars | Frontend .env

Your api/.dev.vars should look like this:

# Clerk Configuration
CLERK_SECRET_KEY=sk_test_abc123...      # From Clerk Dashboard
CLERK_PUBLISHABLE_KEY=pk_test_xyz789... # From Clerk Dashboard
CLERK_JWT_TEMPLATE=pan-api              # Exact value (must match template name)

Your frontend-v2/.env should look like this:

# Clerk Configuration
VITE_CLERK_PUBLISHABLE_KEY=pk_test_xyz789... # Same as above
VITE_API_URL=http://localhost:8787           # Local backend URL

3. Set Up Stripe Payments

Stripe handles all payment processing and subscription billing for this application.

📹 Video Guide: Watch Step 3 Setup Video

📖 Follow the detailed setup guide: Stripe Setup Guide

This guide will walk you through:

Getting your Stripe API keys
Creating products for each paid tier (Pro, Enterprise, etc.)
Setting up the Customer Portal for subscription management
Getting your Price IDs and Portal Configuration ID

📋 See complete backend config: Backend .dev.vars Example

✅ When complete, you should have:

Your api/.dev.vars should now look like this:

# Clerk Configuration (from Step 2)
CLERK_SECRET_KEY=sk_test_abc123...
CLERK_PUBLISHABLE_KEY=pk_test_xyz789...
CLERK_JWT_TEMPLATE=pan-api

# Stripe Configuration
STRIPE_SECRET_KEY=sk_test_def456...           # From Stripe Dashboard
STRIPE_PRICE_ID_PRO=price_1Abc23DEfg45HIjk    # Pro tier product price ID

# Add a STRIPE_PRICE_ID for each paid tier you created in Stripe
# The variable name should match whatever you named your tiers/products
STRIPE_PRICE_ID_ENTERPRISE=price_1Xyz98WVut76 # Enterprise tier product price ID (if applicable)

STRIPE_PORTAL_CONFIG_ID=bpc_1SK6M             # For customer subscription management

4. Configure Your Pricing Tiers

The default template includes a complete multi-tier system (Free, Pro, Enterprise) with frontend routes, pricing cards, and backend enforcement. Customize it in minutes:

📹 Video Guide: Watch Step 4-5 Setup Video (includes Step 5: Run Locally)

Run the configuration command:

/configure-tiers

Answer questions about your tiers (name, price, limit, features), and it automatically updates:

✅ Backend tier limits and Stripe integration
✅ Frontend pricing cards and routes
✅ Dashboard tier displays
✅ All environment variables

Works with Claude Code, Gemini CLI, Codex CLI, or DeepSeek. See the command →

Prefer manual setup? Follow the Manual Tier Setup Guide for step-by-step instructions.

5. Run Locally (3 Terminals)

Terminal 1 - Backend:

cd api && npm run dev
# http://localhost:8787

Terminal 2 - Frontend:

cd frontend-v2 && npm run dev
# http://localhost:5173

Terminal 3 - Stripe Webhooks (Local Testing):

stripe listen --forward-to http://localhost:8787/webhook/stripe

⚠️ IMPORTANT: After running this command, the Stripe CLI will output a webhook signing secret starting with whsec_...

Copy this secret and add it to your api/.dev.vars file:

STRIPE_WEBHOOK_SECRET=whsec_... # Paste the value from the terminal

Then restart Terminal 1 (the backend server) for the change to take effect.

5. Test End-to-End

Open http://localhost:5173
Sign up with email
Make 5 free requests (hit the limit)
Click "Upgrade to Pro"
Use test card: 4242 4242 4242 4242
Verify unlimited access after refresh

It works! 🎉

Deploy to Production

Once local development is working, you're ready to deploy your SaaS to production.

6. Deploy Backend API (Cloudflare Workers)

Deploy your API to Cloudflare's global edge network (300+ cities) in minutes:

📹 Video Guide: Watch Step 6 Setup Video

Run the deployment command:

/deploy-worker

The command handles all the tedious parts:

✅ Validates all your Clerk & Stripe environment variables
✅ Creates your KV namespace for usage tracking
✅ Sets all production secrets securely in Cloudflare
✅ Deploys your Worker to the edge
✅ Returns your live API URL
✅ Generates your webhook endpoint URL for Step 7

Works with Claude Code, Gemini CLI, Codex CLI, or DeepSeek. See the command →

✅ When complete:

Your API is live at: https://your-worker.workers.dev
All secrets configured securely
KV namespace created and bound
Ready to configure Stripe webhooks (Step 7)

Prefer manual control? Follow the Cloudflare Workers Deployment Guide for step-by-step instructions.

⭐ Optional - Auto-Deploy with GitHub Actions:

This repo includes GitHub Actions for automatic Worker deployment on push. To enable it, you'll need to add Cloudflare secrets to your repository.

📖 See setup guide: GitHub Actions Auto-Deploy

7. Configure Production Webhooks

Set up real production webhooks so Stripe can notify your API when subscriptions are created, updated, or cancelled. You'll use the webhook URL from Step 6.

📹 Video Guide: Watch Step 7 Setup Video

📖 Follow the deployment guide: Stripe Webhooks Deployment

This guide walks you through:

Migrating your Stripe products from test mode to live mode
Updating environment variables with live Stripe keys and Price IDs
Creating a production webhook endpoint in Stripe (using your URL from Step 6)
Testing webhook delivery and the full upgrade flow

✅ When complete:

All products in Stripe live mode with correct metadata
Live Stripe keys and Price IDs configured in your worker
Production webhook endpoint live and receiving events
Real-time subscription updates working (upgrade/downgrade/cancel)

8. Deploy Frontend

Deploy your React frontend to Cloudflare Pages for global access and fast load times.

📹 Video Guide: Watch Step 8 Setup Video

📖 Follow the deployment guide: Cloudflare Pages Frontend Deployment

This guide walks you through:

Pushing your code to GitHub and connecting your repository
Creating a Cloudflare Pages project
Configuring build settings for Vite
Adding production environment variables (live Clerk keys and API URL)
Verifying your live frontend connects to your backend API

✅ When complete:

Your frontend is live at: https://your-project.pages.dev
Connected to your production backend from Step 6
Automatic deployments on every git push
Full authentication and subscription flows working end-to-end

Architecture

Want to understand how the stateless JWT architecture works? How Stripe webhooks sync with Clerk? How usage tracking works without a database?

📖 Read the complete architecture guide: Architecture Guide

This guide covers:

JWT as single source of truth (how plan metadata flows)
Complete data flow diagrams (sign-up → upgrade → tier enforcement)
Webhook integration architecture (Stripe → Clerk sync)
Usage tracking with Cloudflare KV
Why this approach scales without a database

Tech Stack

Layer	Technology	Purpose
Frontend	Vite + React 19	Pure client-side SPA
Frontend Hosting	Cloudflare Pages	Static CDN (free, unlimited)
Auth	Clerk	User management + JWT issuance
Payments	Stripe	Subscriptions + webhooks + portal
API	Cloudflare Workers	Serverless edge functions
Storage	Cloudflare KV	Usage counters (key-value store)
CSS	Tailwind CSS v3	Utility-first styling
CI/CD	GitHub Actions	Automated Worker deployment

Cost Breakdown

$0/month until 10,000+ users. Then ~$31/month. At 100k users: ~$109/month.

Compare that to typical SaaS stacks costing $75-150/month from day one.

📖 See the complete cost analysis: Cost Breakdown & Comparison

This guide includes:

Detailed cost breakdown at every scale (0-100k+ users)
What triggers each cost increase (so you can forecast)
Comparisons to other stacks (Vercel, AWS, Firebase, other SaaS templates)
Cost optimization strategies (batch operations, caching, aggregation)
Real-world cost projections with revenue scenarios
Hidden costs you avoid (database maintenance, CDN, SSL, monitoring)

TL;DR: Infrastructure costs ~3% of revenue instead of 15%. More money for building your product.

Testing

📖 See the complete testing guide: Testing Guide

The testing guide covers:

Setting up local development with Stripe webhooks
End-to-end flow testing (sign up → upgrade → usage tracking)
Test card numbers for different payment scenarios
Webhook verification and debugging

Important Note: The specific test cases in the guide are examples. Since you'll be replacing the "Process Document" logic with your own product functionality, your actual tests will differ. Use the guide as a framework for testing the infrastructure (auth, billing, usage tracking), then add tests specific to your product logic.

File Structure

Backend: api/ - Cloudflare Worker with JWT auth + Stripe webhooks (~1,020 lines) Frontend: frontend-v2/ - React + Vite SPA (~1,500 lines) Docs: docs/ - Complete setup and deployment guides

📖 See the complete project structure: Project File Structure

This guide includes:

Full directory tree with explanations
Key files and what they do
Environment variables reference
Build artifacts and gitignored files
Common file operations (adding pages, endpoints, tiers)

FAQ

Got questions about the template? How to customize it? What works with what?

📖 Read the complete FAQ: Frequently Asked Questions

Common topics covered:

Framework compatibility (Next.js, Vue, Svelte, React Native)
Alternative payment providers (Paddle, LemonSqueezy, PayPal)
Platform alternatives (Vercel Edge, Netlify, Deno Deploy)
Adding a database (when and how)
Troubleshooting common issues
Security best practices
Performance optimization

Security

Small attack surface. No servers to hack. Enterprise-grade security included for free.

Built-in: JWT verification, webhook signing, rate limiting, security headers, PCI compliance. Cloudflare: DDoS protection, WAF, Bot Fight Mode, IP restrictions, Access policies - all free.

📖 Read the complete security guide: Security Guide

This guide covers:

Why edge deployment means fewer vulnerabilities (no servers to SSH into!)
All 8 built-in security features explained (with code locations)
Cloudflare's 11 free security features (DDoS, WAF, Bot Fight, Rate Limiting, Access, and more)
Security best practices and monitoring
Incident response procedures
Compliance (SOC 2, ISO 27001, PCI DSS, GDPR)

Work Together

🚀 Need Help?

Stuck on setup? Want custom features? Need it deployed ASAP?

I offer paid consulting and setup services:

Complete deployment and configuration
Custom tier structures and integrations
Additional payment providers or databases
Architecture consulting and optimization

Contact: [email protected]

⭐ Show Support

Star this repo - Helps others discover it
Fork and build - Make something awesome
Share it - Help other builders find this

💬 Get Involved

Questions? Open a GitHub issue or email me
Bug? Submit an issue with details
Built something cool? Share it!
Want to contribute? PRs welcome

🤝 Open to Opportunities

Interested in partnerships, revenue shares, or white-label licensing?

Let's talk: [email protected]

Known Limitations

This template is optimized for speed and simplicity. We've identified some trade-offs:

📖 Read the full analysis: Known Limitations & Trade-Offs

KV eventual consistency (pay-per-use apps)
Multi-dashboard observability
No built-in CRM or customer success tools
Single-region KV writes
No testing suite

Found something we missed? Let us know - we're always improving this template.

License

MIT - Use this template for commercial or personal SaaS projects.

Acknowledgments

Built with:

Claude Code - AI pair programming
Gemini CLI - AI assistance
Codex CLI - AI code generation
DeepSeek - AI development
Cloudflare Workers - Edge compute
Clerk - Authentication
Stripe - Payments

Contributors:

Claude Code
Gemini CLI
Codex CLI
DeepSeek
ChatGPT (OpenAI)

Documentation

Core Guides

Architecture Guide - How JWT routing works, data flow diagrams, and system design
Cost Breakdown - Detailed cost analysis at every scale, pricing comparisons
Security Guide - Built-in security features + Cloudflare's free enterprise protections
Testing Guide - End-to-end testing checklist, 3-terminal local setup
FAQ - Common issues, troubleshooting, best practices
Known Limitations - Trade-offs and upgrade paths as you scale

Platform Setup Guides

Clerk Setup - Authentication configuration and JWT template setup
Stripe Setup - Payment processing and subscription configuration

Deployment Guides

Cloudflare Workers (Backend) - Deploy your API to the edge
Stripe Webhooks Setup - Production webhook configuration
Frontend Deployment - Deploy to Cloudflare Pages
GitHub Actions CI/CD - Automated deployment pipeline

Configuration & Reference

Manual Tier Setup - Add/modify pricing tiers manually
Project File Structure - Complete directory layout and file organization
Backend Config Example - Sample environment variables (.dev.vars)
Frontend Config Example - Sample frontend environment (.env)

⭐ If this template saves you time, consider starring the repo!

Name		Name	Last commit message	Last commit date
Latest commit History 117 Commits
.claude/commands		.claude/commands
.github		.github
api		api
docs		docs
frontend-v2		frontend-v2
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md

License

Fruitloop24/plug-saas

Folders and files

Latest commit

History

Repository files navigation

plug-saas

No DB. No Cost. Just Plug In Your Product.

🎬 Watch It In Action

This is a Complete, Working SaaS Application

What You Get vs What You Add

✅ You Get (Complete & Working)

🎯 You Add (Your Product)

Who This Is For

✨ The Hard Parts, Already Built

🎨 Complete Frontend Template

🤖 AI-Assisted Setup & Deployment

🔐 Stateless JWT Authentication

💳 Subscription Billing

📊 Usage Limits & Tracking

🌍 Global Edge Deployment

🛡️ Security Hardening

💵 $0 Hosting Costs

What Makes This Different

Quick Start

Prerequisites

1. Clone & Install

2. Set Up Clerk Authentication

3. Set Up Stripe Payments

4. Configure Your Pricing Tiers

5. Run Locally (3 Terminals)

5. Test End-to-End

Deploy to Production

6. Deploy Backend API (Cloudflare Workers)

7. Configure Production Webhooks

8. Deploy Frontend

Architecture

Tech Stack

Cost Breakdown

Testing

File Structure

FAQ

Security

Work Together

🚀 Need Help?

⭐ Show Support

💬 Get Involved

🤝 Open to Opportunities

Known Limitations

License

Acknowledgments

Documentation

Core Guides

Platform Setup Guides

Deployment Guides

Configuration & Reference

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Packages