SaaS Template App - Recipe app with Next.js, Supabase & Payments

Build this project step by step. Join Me!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Assets
6. 🚀 More
7. 🎥 Demo

🤖 Introduction

Supercharge your SaaS app launch with this high-powered template – packed with built-in user auth, subscriptions, and payments using Next.js, Supabase, and Stripe! Hit the ground running and turn your idea into reality faster than ever.

⚙️ Tech Stack

• Clerk is a unified platform for authentication, user management, and billing. It offers embeddable UI components, flexible APIs, and admin dashboards for secure user management. Clerk also simplifies subscription management, allowing you to define plans, create pricing pages, and control access based on subscription tiers—all in one solution.

• Next.js is a powerful React framework that enables the development of fast, scalable web applications with features like server-side rendering, static site generation, and API routes for building full-stack applications.

• shadcn/ui is a customizable component library built on Radix UI and Tailwind CSS. It offers a modern, accessible design system with pre-built components that are easy to theme and extend, making it ideal for building polished UIs with minimal effort.

• Supabase is an open-source backend-as-a-service platform that provides instant APIs, real-time subscriptions, authentication, storage, and a PostgreSQL database, enabling developers to build scalable and secure applications with ease.

• Tailwind CSS is a utility-first CSS framework that allows developers to design custom user interfaces by applying low-level utility classes directly in HTML, streamlining the design process.

• TypeScript is a superset of JavaScript that adds static typing, providing better tooling, code quality, and error detection for developers, making it ideal for building large-scale applications.

• Zod is a TypeScript-first schema validation library that provides a simple and expressive way to define and validate data structures. Zod ensures data integrity by catching errors early during development.

🔋 Features

👉 Authentication: Secure user sign-up and sign-in with Clerk; Google authentication and many more.

👉 Billing & Subscriptions: Easily manage plans, upgrades, and payment details.

👉 Code Reusability: Leverage reusable components and a modular codebase for efficient development.

👉 Cross-Device Compatibility: Fully responsive design that works seamlessly across all devices.

👉 Database Integration: Uses Supabase for real-time data handling and storage needs.

👉 No opinionated UI: Easily bring your own style to the app, without the need for removing leftover styles.

👉 Scalable Tech Stack: Built with Next.js for a fast, production-ready web application that scales seamlessly.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/FedyBenMahfoudh/saas-template.git
cd saas-template

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Replace the placeholder values with your actual Supabase and Clerk credentials. You can obtain these by signing up on: Supabase, Clerk.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

🔗 Assets

You can find the example database schema in the root of this repository.

🚀 More

🔗 Clerk

1️⃣ Sign in to Clerk: Go to Clerk and log in.

2️⃣ Configure Sign-In: Set up your preferred authentication providers (e.g., GitHub, LinkedIn).

3️⃣ Access Subscriptions: Navigate to Dashboard → Subscriptions and click Get Started.

4️⃣ Create Plans: Click Create Plan (Clerk will auto-generate a free plan). Then, click Add Plan, fill in the name, price (monthly or annual), and other fields.

5️⃣ Add Features: Define each feature with a name, description, and slug (the slug is critical). Example slugs for this project:

Feature Name	Slug	Description
Limit 3 Recipes	recipe_limit_3	Allows users to access up to 3 recipes
Limit 10 Recipes	recipe_limit_10	Allows users to access up to 10 recipes
Unlimited Recipes	recipe_limit_unlimited	Grants unlimited recipe access

When assigning features, ensure they match the plan according to the table below:

6️⃣ Plan Overview

Plan Name	Price	Comment	recipe_limit_3	recipe_limit_10	recipe_limit_unlimited
Taster	$0/month	No	Yes	No	No
Foodie	$7.99/month	Yes	No	Yes	No
Chef's Table	$14.99/month	Yes	No	No	Yes

🔗 Integrate Clerk with Supabase

Before starting, make sure you have both Clerk and Supabase accounts ready.

Step 1: Enable Clerk Integration

• Go to your Clerk Dashboard → Integrations.
• Find Supabase and enable the integration.

Step 2: Configure Clerk Integration

• Click Manage Integration.
• Fill in all required fields.
• Copy the domain URL provided by Clerk.

Step 3: Connect Supabase

• Go to your Supabase Dashboard → Authentication → Providers → Third-party providers.
• Select Clerk from the list.
• Paste the domain URL you copied from Clerk.
• Save the configuration.

Once done, your Supabase project is now connected to Clerk for authentication. Users can sign in using Clerk while Supabase handles your database and auth logic.

🎥 Demo