How to Build and Deploy a Basic SaaS with Vercel, Supabase, and Stripe

Building a SaaS with Next.js, Supabase, and Stripe

Creating a SaaS product may seem complex, but with the right tools, you can build and deploy your app super quickly. In this guide, I'll walk you through building a basic SaaS application, deploying it on Vercel, connecting to Supabase for database management, and integrating Stripe for payments.

Prerequisites

Before we start, ensure you have the following:

1. Node.js installed (v16 or higher).

2. A free Supabase account.

3. A free Stripe account.

4. Basic understanding of JavaScript and React.

Step 1: Setting Up Your Development Environment

1. Create a new Next.js app:

npx create-next-app@latest my-saas-app
cd my-saas-app

2. Install required dependencies:

npm install @supabase/supabase-js stripe

Step 2: Configuring Supabase

1. Create a new Supabase project:

- Go to Supabase and create a new project.

- Note down the API URL and API Key from the project settings.

2. Set up your database:

- Use the Supabase dashboard to create a table. For example, a users table with the following schema:

- id (UUID, primary key)

- email (Text, unique)

- subscription_status (Text)

3. Integrate Supabase in your app:

Create a new file lib/supabase.js:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl, supabaseKey);

4. Add environment variables:

Create a .env.local file in your project and add:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

Step 3: Setting Up Stripe

1. Create a Stripe account:

- Go to Stripe and sign up.

2. Create a product:

- In the Stripe dashboard, create a product and a pricing plan.

- Note down the Price ID.

3. Integrate Stripe in your app:

Create a new API route pages/api/checkout.js:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
          {
            price: 'your_price_id',
            quantity: 1,
          },
        ],
        mode: 'subscription',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancel`,
      });

      res.status(200).json({ url: session.url });
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

4. Add Stripe keys to .env.local:

STRIPE_SECRET_KEY=your_stripe_secret_key

Step 4: Building the Frontend

1. Create a subscription button:

Update your pages/index.js:

import { useState } from 'react';

export default function Home() {
  const [loading, setLoading] = useState(false);

  const handleSubscribe = async () => {
    setLoading(true);
    const res = await fetch('/api/checkout', { method: 'POST' });
    const { url } = await res.json();
    window.location.href = url;
  };

  return (
    

      
Welcome to My SaaS
      
    
  );
}

Step 5: Deploying on Vercel

1. Push your code to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin your_repo_url
git push -u origin main

2. Deploy on Vercel:

- Log in to Vercel and import your GitHub repository.

- Add your environment variables in the Vercel dashboard.

- Deploy your project.

Step 6: Testing

1. Visit your deployed URL.

2. Click the subscription button and complete a test payment using Stripe's test card numbers.

3. Verify the payment in your Stripe dashboard.

4. Check the database updates in Supabase.

Conclusion

Congratulations! You've built and deployed a basic SaaS app using Vercel, Supabase, and Stripe. This setup can be extended with more features like user authentication, advanced database operations, and analytics.

Start building your dream SaaS today!