SaaS Template by Adrian Hajdin

This template is built using a modern full-stack architecture designed for rapid SaaS deployment:

• Next.js: React framework for server-side rendering and API routes.
• Clerk: Handles authentication, user management, and subscription-based access control.
• Supabase: Provides the PostgreSQL database, real-time capabilities, and storage.
• shadcn/ui: Accessible component library built on Radix UI and Tailwind CSS.
• Tailwind CSS: Utility-first CSS for styling.
• TypeScript: Static typing for improved code quality.
• Zod: Schema validation for data integrity.

Follow these steps to set up the SaaS template locally.

Prerequisites

• Git
• Node.js
• npm

Installation Steps

1. Clone the repository:

   git clone https://github.com/JavaScript-Mastery-Pro/saas-template.git
   cd saas-template

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the root directory and populate it with your Clerk and Supabase credentials (see Environment Variables).
4. Run the development server:

   npm run dev

   The application will be available at http://localhost:3000.

Create a .env file in the root of your project. You must provide valid credentials from Clerk and Supabase to enable authentication and database functionality.

# 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=

Use the getRecipeComments server action to fetch all comments associated with a specific recipeId.

This function performs the following steps:

1. Fetches all rows from the Supabase comments table where recipe_id matches the provided ID, ordered by created_at descending.
2. Retrieves the corresponding user profiles (first name and image URL) from Clerk using the user_id found in the comments.
3. Returns an array of comment objects enriched with userFirstName and userImageUrl properties.

Returns: An array of objects containing the original comment data plus user metadata.

import { getRecipeComments } from '@/lib/actions/comment.actions';

// Usage to fetch comments for a recipe page
const comments = await getRecipeComments("recipe-uuid-here");

// Each comment object in the array will have:
// { ..., userFirstName: string, userImageUrl: string }

Use getRecipes to retrieve a list of all recipes in the database. This function automatically enriches each recipe with the author's Clerk user details (userFirstName, userImageUrl) and determines if the recipe is unlocked for the current user. A recipe is considered unlocked if the user is the author or if they have explicitly unlocked it via the recipes_unlocked table.

const recipes = await getRecipes();
// Each recipe object includes:
// id, name, ingredients, user_id, userFirstName, userImageUrl, unlocked

Use getUnlockedRecipes() to retrieve the list of recipes that the current user has specifically unlocked. This action requires authentication.

const unlocked = await getUnlockedRecipes();

Use unlockRecipe(recipeId: string) to grant the current user access to a specific recipe.

Logic and Limits:

• If the user is not signed in, they are redirected to /sign-in.
• The function checks the user's Clerk Billing Plan features to enforce unlock limits:
  • recipe_limit_unlimited: No limit.
  • recipe_limit_100: Maximum 100 unlocks.
  • recipe_limit_3: Maximum 3 unlocks.
  • Default: 1 unlock.
• If the limit is reached, it returns { success: false, message: "limit reached" }.
• On success, it returns { success: true, message: "recipe unlocked" }.

const result = await unlockRecipe("recipe-id");

if (result.success) {
  console.log("Unlocked!");
} else {
  console.error(result.message); // e.g., "limit reached"
}

Use getUserRecipes() to retrieve all recipes where the user_id matches the currently authenticated user. This action requires authentication.

const myRecipes = await getUserRecipes();

Use getRecipe(id: string) to fetch a specific recipe.

Access Rules:

• If the current user is the author of the recipe, the data is returned immediately.
• If the user is not the author, the function checks if the recipe has been unlocked for them. If not, it returns null.
• If the user is not authenticated, it throws an "Unauthorized" error.

try {
  const recipe = await getRecipe("recipe-id-here");
  if (!recipe) {
    // Handle case where recipe is not unlocked or doesn't exist
  }
} catch (error) {
  // Handle unauthorized error
}

Use createSupabaseClient to instantiate a Supabase client that is automatically integrated with Clerk authentication. This function retrieves the Clerk session token via auth().getToken() and passes it as an accessToken to the Supabase client, allowing you to perform authenticated requests against your Supabase database using the user's current Clerk session.

To use this, ensure the following environment variables are set in your project:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY

import { createSupabaseClient } from '@/lib/supabase';

const supabase = createSupabaseClient();

// Example: Fetching data with the authenticated client
const { data, error } = await supabase.from('your_table').select('*');

Use createRecipe(recipe: Recipe) to insert a new recipe into the database. The user_id is automatically assigned to the currently authenticated user. This action requires the user to be signed in; otherwise, it throws an "Unauthorized" error.

import { Recipe } from "@/types";

const newRecipe: Recipe = {
  name: "Pasta",
  ingredients: ["Flour", "Eggs"],
  instructions: "Mix and boil.",
  // user_id is handled by the server action
};

const createdRecipe = await createRecipe(newRecipe);