Tutorial: Build a SaaS App with Supabase, Stripe, and Clerk

Build a Complete SaaS App in Minutes

In this tutorial, we'll build a task management SaaS with user authentication, database storage, and subscription payments—all using GenMB's integrations.

What We're Building

A task manager where users can:

• Sign up and log in (Clerk)
• Save tasks to a database (Supabase)
• Upgrade to Pro for unlimited tasks (Stripe)

Prerequisites

Before starting, you'll need:

• A Supabase project (free at supabase.com)
• A Stripe account (test mode works)
• A Clerk application (free at clerk.com)

Step 1: Set Up Integrations

1. Open GenMB and create a new app
2. Click the Integrations button (puzzle icon)
3. Enable each integration:

Supabase:

• Project URL: https://xxxxx.supabase.co
• Anon Key: Your public anon key

Stripe:

• Publishable Key: pk_test_...

Clerk:

• Publishable Key: pk_test_...

Step 2: Create the Supabase Table

In your Supabase dashboard, create a tasks table:

```sql

create table tasks (

id uuid default gen_random_uuid() primary key,

user_id text not null,

title text not null,

completed boolean default false,

created_at timestamp default now()

);

`

Step 3: Generate Your App

Use this prompt:

"Create a task management SaaS with:

>

- Landing page with hero, features, and pricing sections

- User authentication with Clerk (sign in/sign up buttons)

- Dashboard showing user's tasks from Supabase

- Add task form that saves to Supabase

- Mark tasks complete with checkbox

- Delete tasks with confirmation

- Free tier limited to 5 tasks

- 'Upgrade to Pro' button that opens Stripe checkout

- Pro users get unlimited tasks

>

Use React with a modern, clean design"

Step 4: Watch GenMB Build

GenMB will generate code that:

• Initializes Clerk for authentication
• Sets up Supabase client for database
• Includes Stripe checkout button
• Handles user state across components
• Implements the free tier limit

Step 5: Test the Flow

1. Authentication: Click sign in, create an account
2. Add tasks: Should save to your Supabase table
3. Free limit: After 5 tasks, upgrade prompt appears
4. Payments: Stripe checkout opens (use test card 4242 4242 4242 4242)

How the Integration Works

Clerk Authentication:

```javascript

import Clerk from 'https://esm.sh/@clerk/clerk-js@5'

const clerk = new Clerk('pk_test_...')

await clerk.load()

// Check if user is signed in

if (clerk.user) {

// Show dashboard

} else {

// Show sign in

}

`

Supabase Database:

```javascript

import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

const supabase = createClient(projectUrl, anonKey)

// Save task

await supabase.from('tasks').insert({

user_id: clerk.user.id,

title: 'New task'

})

// Load user's tasks

const { data: tasks } = await supabase

.from('tasks')

.select('*')

.eq('user_id', clerk.user.id)

`

Stripe Checkout:

```javascript

const stripe = Stripe('pk_test_...')

// Redirect to checkout (you'd get clientSecret from your backend)

await stripe.redirectToCheckout({

lineItems: [{ price: 'price_xxxxx', quantity: 1 }],

mode: 'subscription'

})

`

Customizing Your SaaS

Change the task limit:

"Change the free tier limit from 5 to 10 tasks"

Add more features:

"Add task categories and due dates"

Change the design:

"Use a dark theme with purple accents"

Deploying

Click deploy to get a live URL. Your SaaS is now:

• Authenticating real users
• Storing real data
• Ready to accept real payments (switch to live Stripe keys)

Next Steps

• Add more Supabase tables for user profiles
• Set up Stripe webhooks for subscription status
• Add team features with Supabase row-level security

You've just built a full-stack SaaS in minutes. Iterate, customize, and launch!