Creating a Slack clone with Supabase and Next.js

Intro

Recently, I came across a new cloud backend service, called Supabase, that claimed to be a firebase alternative. I think Firebase is a great tool but I have had my fair share of headaches working with it. So I decided to try out Supabase and see what it was all about.

On Supabase's GitHub page they have a lot of cool example projects to help you learn their platform. One that really caught my eye was their Slack clone project. In this article, I'm going to go over the steps in that example. I'll talk about my experience and what my opinions are. Enjoy!

Here is the repo that I forked from Supabase to make this project. You can follow along there with the README if you want as well.

Setup

Not much setup was needed for this project. The three things you need are all accounts: GitHub account, Vercel account (Next.js), and a Supabase account. Sidenote, you can use your GitHub credentials to make a Vercel and a Supabase account, so if you want to be technical, you really only need one account. Either way, once you have all of that setup you are ready to start the project!

Supabase things

Once you have set up your Supabase account you'll see a dashboard page. When you first sign up you won't have any projects, but we shall change that soon. On the left side of the screen, you'll see a vertical toolbar. Select the third icon that looks like a code icon/terminal logo. This will bring you to a page with specific scripts and quick start guides to help you get up and running with the Supabase platform. Select the "Slack Clone" option in the Quick start section.

Once you click on the Slack clone script you'll be directed to a page where you can see the code for the script query. On the right side of that screen, there will be a "Run" button. Make sure to give that a click. Look at that! You're well on your way to making your own Slack clone with Supabase!

Next, we are going to click on the Settings button on the left vertical toolbar. It will be the last icon in the column and looks like your typical settings gear. Once there, you'll want to click on the API tab from the project menu on the left. There you will find the API URL and the anon key for your project.

If you're wondering what the anon key is here is how the Supabase documentation explains it:

"The anon key is your client-side API key. It allows "anonymous access" to your database until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row-level security for your data."

Deploy to Next.js

Ok, so now that we have created our slack clone backend, we have to host it somewhere. The easiest way to do this is by following step 4 in the GitHub repo that Supabase provides. Essentially what you will do:

• Fork their repo into your own GitHub account.
• After you fork, click the deploy button on step 4 in your newly created repo.
• This will take you to the Vercel website where you will have to log in with your Vercel account (It's way easier if you just log in with your GitHub credentials).
• Once you log in, it will ask you to create a project name. I kept it the same as what was generated, but you can change it to whatever you want.
• This is where I got a little confused but hang in there. In the previous step, you created the project, for this step you are now creating the repository. You'll want to link your GitHub again by clicking on the GitHub button. The steps look very identical and it almost feels like your doing the same thing over again, but trust me you're on the right track.
• Once you have created your project and repo, you'll be brought to an "import project" screen where you will be asked for a NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_KEY. Use the API URL and anon key from step 3 of the GitHub README. This is also what we went over just previously at the end of the Supabase things section above.
• Lastly, all you have to do is click the "Deploy" button on the Vercel website!

Final touches

Ok so after you click the deploy button, everything will build and hopefully succeed. You'll see a congratulations message and two buttons. One to go to the dashboard and the other to visit your newly created Slack clone!

Before I get into the actual Slack clone, I wanted to touch on the Vercel dashboard really quickly. The only change I made here was the domain name. When on the dashboard, head over to the settings tab in the top navigation. Then click on "Domains" to see and edit what domain your site is under. Ok, that's it for the dashboard stuff.

Now to the actual, newly created Slack clone site! Initially, you will be prompted with a login screen. I was initially confused when trying to sign up for an account because when I clicked the "Sign up" button nothing happened. It took me a couple of minutes to realize that when I clicked the "Sign up" button it sent me a confirmation email to confirm my account. I think a good fun exercise for this app would be to give some sort of feedback to the user when they sign up for an account. Just something to let them know to check their email for a confirmation link. Anyways, after I figured that out I was able to log in and start messaging away!

Conclusion

Supabase seems like a really well-built tool. I can definitely see it competing with Firebase. It is very easy to use, and setup. I think the key differentiator for me will be the price. Currently, Supabase is in its alpha version. In other words, they are still not a final product yet. Since it's not officially in its final version, Supabase is offering its service for free. But when they do finally get to a version one I'm curious to see how much it costs compared to Firebase.

That's my only outstanding question so far. I think Supabase is really cool and will be a force to be reckoned with. I can't wait to see how it evolves in the future!

That's all for now. Thank you everyone for following along, and happy coding!