How I Built a SaaS Project with Makerkit, Next.js, and Supabase Authentication

Hi everyone! Today I want to share my experience of building my SaaS project. If you’ve ever dreamed of launching your own application quickly — without reinventing the wheel — and with a beautiful interface, this article is for you. I’ll walk you through how Makerkit, Next.js, and Supabase helped me get started, explaining each step in simple terms.

Why I Chose This Stack

When I first started thinking about launching my SaaS product, I was attracted by the idea of a fast start without having to build everything from scratch. Makerkit turned out to be a lifesaver since it provides ready-made structures and a variety of useful components. Combined with Next.js, known for its speed and ease of development, and Supabase, which offers database storage, authentication, and even real-time updates, I found the perfect combination for a modern web application.

Step 1. Creating a Next.js Project

Let’s start with the basics — creating a new Next.js project with TypeScript support. All you need to do is run the following command:

Next.js immediately sets up an excellent project structure, and TypeScript helps you avoid many common errors, especially in larger projects.

Step 2. Integrating Makerkit

Makerkit is a collection of templates and ready-to-use solutions for SaaS applications. I opted for the free Makerkit Starter Kit Lite version, which you can find on GitHub. Here’s how I got started:

1. Visit the Makerkit Lite GitHub repository.

2. Clone the repository or download the ZIP.

3. Copy the necessary files into your project, or start with a fork of the repository.

   
   

The result is a ready-made structure: landing pages, components for sign-up/sign-in, dashboard examples, and more. Now you can focus on fine-tuning your application’s logic.

Step 3. Connecting Supabase

Creating a Project in Supabase

To store data, manage users, and even enable real-time updates, I chose Supabase. It’s an excellent alternative to Firebase, built on PostgreSQL.

1. Sign up at supabase.com.

2. Create a new project, select the Free tier, and choose your desired region.

3. In the API settings, find your Project URL and Anon key — you’ll need these to connect your app.

   
   

Setting Up the Supabase Client

In your Next.js project (now integrated with Makerkit), create a file called lib/supabaseClient.ts and add the following code:

Also, create a .env.local file at the project root and add:

This way, your frontend can securely connect to Supabase.

Step 4. Setting Up Supabase Authentication

Makerkit already includes ready-to-use components for registration and sign-in. All that’s left is to connect Supabase to these authentication forms. For example, on the sign-in page, you might do something like this:

With just a few adjustments like these, you can easily integrate Supabase authentication into your app.

Step 5. Creating a “Projects” Table in Supabase

For demonstration purposes, I decided to create a projects table to store user projects.

1. Log in to the Supabase Dashboard.

2. Navigate to Table Editor and create a new table named projects.

3. Add the following columns (as an example):
   

   - id: Integer, auto-increment, primary key.

   - created_at: Timestamp with a default value of now().

   - title: Text (or varchar) for the project title.

   - description: Text (or varchar) for the project description.

   - status: Text (or varchar) to indicate, for example, “in progress” or “completed.”

   
   

Save the table, and you’re ready to work with your data!

Step 6. Displaying Data on the Frontend

Now comes the fun part — displaying the data from Supabase on your website. I added a page where projects are shown. For example, for the /dashboard/projects page, you could create a component like this:

When you visit /dashboard/projects, you’ll see a list of projects loaded from Supabase.

Step 7. Enabling Real-Time Updates

One of the coolest features of Supabase is real-time subscriptions. This means that if someone changes data in the table (for example, adds a new project), the changes appear on your site immediately.

To enable this feature:

1. Ensure that real-time is enabled for your projects table in Supabase. You can do this in the Table Editor by checking the “Enable Realtime” option.

2. If Row Level Security (RLS) is enabled, create a policy that allows SELECT for everyone. For example:

   
   

3. On the client side, create a component that subscribes to changes:

Now, whenever data in the projects table changes (for example, when you add a new project in the Supabase dashboard), the component automatically updates without needing to refresh the page.

Step 8. Deploying Your Project

Once everything is working and you’ve tested your app thoroughly, it’s time to deploy. Personally, I love using Vercel for Next.js projects. It’s super easy to set up:

• Connect your Git repository to Vercel.

• Add your environment variables (NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY).

• Sit back and enjoy your live SaaS application!

Final Thoughts

By using Makerkit, Next.js, and Supabase, you can build a fully functioning SaaS MVP in just a few hours. This stack lets you focus on your core idea without getting bogged down by the boilerplate of authentication, database setup, and frontend structure.

I hope this article has given you a clear idea of how to quickly launch a project with real-time data updates. If you have any questions or want to share your own experiences, feel free to leave a comment — I’m always excited to connect and learn more from fellow developers!

Happy coding, and see you in the next article! Post created by Uladzislau is available for your project here