Create a Slack clone with Next.js and Supabase

Supabase - Jul 31 '20 - - Dev Community

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .