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!
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 (
# Copy the repo to your machine
git clone --no-checkout https://github.com/supabase/supabase
# Checkout the Slack example!
git sparse-checkout init --cone
git sparse-checkout set 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
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
This is the simplest part. Open a terminal and run this command:
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:
- We start Postgres with a schema and data by mounting the
dbfolder when Docker starts
- 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).
Start the frontend just like any other React app:
# 1. Install all dependencies:
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!
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".