Creating a basic Slack clone with Postgres and React Hooks

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
• Tech stack
• Get the code
• Backend
• Frontend

---

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

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

---

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

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

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

That's it! Visit https://localhost:3000 you will be presented with a 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:

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

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".