How to Build a Real-Time App with Supabase (Step by Step)

How to Build a Real-Time App with Supabase

We’re building a real-time app tutorial that showcases the power of Supabase, and why it matters in today’s development landscape.

Prerequisites

• Node.js 14+ (Check your version with node -v)
• NPM 6+ (Check your version with npm -v)
• Supabase account (Sign up at supabase.io)
• Basic understanding of JavaScript and REST APIs

Step 1: Setting Up Your Supabase Project

First things first, you need to create a project in Supabase. This process is straightforward, but let’s break it down.

# Go to the Supabase dashboard
# Create a new project
# Fill in the project name and password

Why? Well, this is where all your real-time data will reside. Without a project, you’re just shouting into the void. Trust me, I learned that the hard way.

Step 2: Creating a Table

Next, you’ll want to create a table to store your data. In this case, let’s say you want to create a simple chat application.

CREATE TABLE messages (
 id SERIAL PRIMARY KEY,
 content TEXT NOT NULL,
 created_at TIMESTAMPTZ DEFAULT NOW()
);

Here’s the thing: if you don’t set a default timestamp, your data will be lost in the ether. I’ve been there, endlessly debugging, only to realize I forgot the created_at field.

Step 3: Setting Up Realtime Subscriptions

Now for the fun part: enabling real-time functionalities. Supabase makes this super easy, allowing you to listen to changes in the database.

const { createClient } = require('@supabase/supabase-js');

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

supabase
 .from('messages')
 .on('INSERT', payload => {
 console.log('New message!', payload);
 })
 .subscribe();

This code sets up a subscription to your messages table. You’ll receive a payload every time a new message is inserted. If it doesn’t work initially, double-check your Supabase URL and key. You’d be surprised how many folks overlook that.

Step 4: Sending Messages

Time to send some messages through your app. You’ve got your table and subscription set up. Now, let’s write a function to insert messages.

async function sendMessage(content) {
 const { data, error } = await supabase
 .from('messages')
 .insert([{ content }]);

 if (error) {
 console.error('Error sending message:', error);
 } else {
 console.log('Message sent!', data);
 }
}

Why do we handle the error here? It’s crucial. You don’t want your app to just crash when something breaks. Learn from my past mistakes: I’ve missed many a deadline because I ignored error handling.

Step 5: Displaying Messages

It’s all fun and games until you need to show those messages in real-time. Here’s how you can append messages to the UI.

function appendMessage(message) {
 const messageContainer = document.getElementById('message-container');
 const messageElement = document.createElement('div');
 messageElement.textContent = message.content;
 messageContainer.appendChild(messageElement);
}

You’ll call appendMessage(payload.new) inside your subscription to update the UI in real-time. If your messages don’t show up, make sure you have the correct DOM element ID. Misnaming an ID is a rookie mistake — trust me.

The Gotchas

There are a few things that can bite you when you push your app to production:

• Connection Limits: Supabase has a limitation on how many connections you can have. When you hit that wall, it’ll start dropping connections and you’ll see errors that might confuse you.
• Latency: Real-time features depend on WebSocket connections. If you’re working with a heavy load of data, you might experience latency issues. Optimize your queries.
• Security Rules: Ensure that your RLS (Row Level Security) policies are properly set. It’s easy to accidentally expose your data.

Full Code

Here’s a complete example of the code you might want to consider using:

const { createClient } = require('@supabase/supabase-js');

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

async function sendMessage(content) {
 const { data, error } = await supabase
 .from('messages')
 .insert([{ content }]);

 if (error) {
 console.error('Error sending message:', error);
 } else {
 console.log('Message sent!', data);
 }
}

function appendMessage(message) {
 const messageContainer = document.getElementById('message-container');
 const messageElement = document.createElement('div');
 messageElement.textContent = message.content;
 messageContainer.appendChild(messageElement);
}

supabase
 .from('messages')
 .on('INSERT', payload => {
 appendMessage(payload.new);
 })
 .subscribe();

What’s Next

Now that you have a real-time app up and running, consider adding user authentication. Supabase provides built-in auth features that can simplify user management.

FAQ

• Q: How do I connect to Supabase from a different framework?
  A: Supabase has SDKs for various frameworks including React and Vue. Check the official docs for examples.
• Q: What if I encounter CORS issues?
  A: Ensure that your Supabase project settings allow requests from your frontend domain.
• Q: Can I use Supabase with existing databases?
  A: Yes, if your existing database is PostgreSQL, you can migrate easily.

Data Sources

For further details, refer to the following links:

• Supabase Documentation
• Supabase Blog

Repository	Stars	Forks	Open Issues	License	Last Updated
supabase/supabase	102,924	12,526	1,036	Apache-2.0	2026-05-24

Last updated May 24, 2026. Data sourced from official docs and community benchmarks.

🕒 Published: May 24, 2026