DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Supabase for Supabase

Posted on

30 13

Create a Slack clone with Next.js and Supabase

In this post we're going to show you how to deploy a fully functional Slack clone in less than 2 minutes.

See the final result here: https://supabase-slack-clone.vercel.app/

(☝️ You should probably use a fake email when you sign up)

Intro

The video shows all the steps so in case you haven't already watched it, here's what you need to know!

This is a real-time Slack clone built with Postgres' Row Level Security. It's a simple POC, and you can deploy your own, which takes a few minutes. The database, auth, real-time, and APIs are handled by Supabase, which is an open source Firebase alternative. The front end is built with Next.js, deployed on Vercel.

Show me how

You can also find these instructions in the project repo.

1. Create new project

Sign up to Supabase - https://app.supabase.io and create a new project. Wait for your database to start.

2. Run "Slack Clone" Quickstart

Once your database has started, run the "Slack Clone" quickstart.

Slack Clone Quick Start

3. Get the URL and Key

Go to the Project Settings (the cog icon), and find your API URL and anon key.

image

4. Deploy the front end

Click this button to deploy the front end:

Deploy with Vercel

You will be asked for a NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_KEY. You can use the keys in step 3.

Conclusion

Congrats! You just deployed a functioning Slack clone, without writing a line of code. Feel free to hack the frontend and share your own slack URL in the comments.

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (1)

Collapse
 
supabase_io profile image
Supabase

See the final result here: supabase-slack-clone.vercel.app/

You can also find these instructions in the project repo: github.com/supabase/supabase/tree/...

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Please show some love ❤️ or share a kind word in the comments if you found this useful!

Got it!