DEV Community

Supabase for Supabase

Posted on

Creating a basic Slack clone with Postgres and React Hooks

Slack clone

While the world is working from home, collaborative tools are booming. If you want to build a tool for a thriving market, why not a collaborative tool like Slack? Here's how!

Contents


Introduction

This is a quick 'n dirty "get it running post". If you want a step-by-step guide, we will be publishing a series of posts on our blog.

There's one small prerequisite for this guide: you'll need Docker to run the backend. We don't want to complicate this post with Docker installation instructions. We promise that if you have it installed it'll be very simple to follow this guide! There's only one docker command (docker-compose up).


Get the code

The example code lives in the Supabase examples folder. We don't need the whole repo so we can use sparse checkout to clone the folder we need:

# Copy the repo to your machine
git clone --no-checkout https://github.com/supabase/supabase
cd supabase

# Checkout the Slack example!
git sparse-checkout init --cone
git sparse-checkout set examples/slack-clone-basic
cd examples/slack-clone-basic
Enter fullscreen mode Exit fullscreen mode

The project is setup across several files and folders:

├── components              # Frontend: React/Next.js
├── lib                     # Frontend: React/Next.js
├── pages                   # Frontend: React/Next.js
├── next.config.js          # Frontend: React/Next.js
├── db                      # Backend: Postgres
├── docker-compose.yml      # Backend: Postgres + Supabase
└── styles                  # Tailwind
Enter fullscreen mode Exit fullscreen mode


Tech stack

The Slack clone uses 4 key technologies:

  • Postgres - the world's best database
  • Supabase - turns Postgres into a realtime database! And provides instant RESTful APIs for Postgres so we don't have to manually code the CRUD functionality
  • Next.js - a React framework for building server-rendered apps
  • Tailwind - a utility CSS framework for quickly styling our frontend


Backend

This is the simplest part. Open a terminal and run this command:

docker-compose up
Enter fullscreen mode Exit fullscreen mode

That's it! This command looks at our docker-compose file, pulls down Postgres and Supabase, then runs them:

Supabase and Postgres

We'll talk about how the backend works in our blog series, but in summary:

  1. We start Postgres with a schema and data by mounting the db folder when Docker starts
  2. Supabase introspects Postgres to automatically provide REST and realtime APIs. This saves a huge amount of time (and we end up writing much less code).


Frontend

Start the frontend just like any other React app:

# 1. Install all dependencies:
npm install

#2. Run
npm run dev
Enter fullscreen mode Exit fullscreen mode

That's it! Visit https://localhost:3000 you will be presented with a login screen.

Login Screen


Side note: Creating a full login and authorization system beyond the scope of this simple example, but make sure you subscribe if you're interested - it's definitely something we'll be covering in the future.

Type any username, click Login, and you'll be presented with a very simple Slack-like interface:

Slack clone

Open two tabs, and you'll see that whenever you send a message in one tab, it automatically appears in the other!

Slack clone

And that's it! A basic Slack clone to kickstart your next project. Happy hacking!


Need help?

If you get stuck, leave a comment below and we'll help you out.

We'll be releasing many more examples for building realtime apps. Follow us to make sure you get notified for our next article: "Building a basic WhatsApp clone".

Alt Text

Top comments (0)