Skip to content

A clone of slack from scratch with essential features.

Notifications You must be signed in to change notification settings

TheCrowd/slack-clone

 
 

Repository files navigation

How to Build a Team Messenger Site With React (Slack Clone)

This repo is a fork of slack-clone

Added a few features to make it nicer:

  • Better UI
  • Rich text editor for messages
  • Emojis for messages
  • Mentions for messages
  • Allow users update their avatar
  • Grouped messages by date

Read the full tutorial here: >> How to Build a Team Messenger Site With React (Slack Clone)

This example shows How to Build a Team Messenger Site With React (Slack Clone):

Slack Clone

Slack Clone

Slack Clone

Slack Clone Call Screen

Slack Clone

Slack Clone Message Screen

Slack Clone

Slack Clone Login Screen

Technology

This demo uses:

  • CometChat Pro 3.0.10
  • Firebase
  • React
  • Material Icons
  • node v16.14.2
  • slatejs
  • emoji-picker-react

Todo list

  • update message input box to support emoji,markdown and attachments
  • enable users to expand/collapse channel list and DM list
  • [] enable users to create a new chat from the clicking on sidebar button
  • [] refactor the code to use redux
  • [] refactor the code to use docker
  • [] refactor the code to use typescript

Running the demo

To run the demo follow these steps:

  1. Head to CometChat Pro and create an account
  2. From the dashboard, add a new app called "slack-clone"
  3. Select this newly added app from the list.
  4. From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
  5. Also copy the REST_API_KEY from the API & Auth Key tab.
  6. Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
  7. Download the repository here or by running git clone https://github.com/TheCrowd/slack-clone.git and open it in a code editor.
  8. Head to Firebase and create a new project
  9. Create a file called app.config.js in the src folder of your project.
  10. Import and inject your secret keys in the app.config.js file containing your CometChat and Firebase in this manner.
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  authDomain: "xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  databaseURL: "xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  projectId: "xxx-xxx-xxx",
  storageBucket: "xxx-xxx-xxx-xxx-xxx",
  messagingSenderId: "xxx-xxx-xxx",
  appId: "xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  measurementId: "xxx-xxx-xxx",
};

const cometChat = {
  APP_ID: "xxx-xxx-xxx",
  AUTH_KEY: "xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  REST_KEY: "xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx",
  APP_REGION: "xx",
};

export { firebaseConfig, cometChat };
  1. Make sure to exclude app.config.js in your gitIgnore file from being exposed online.
  2. Run the following command to install the app.
    npm install
    npm start

Questions about running the demo? Open an issue. We're here to help ✌️

Useful links

About

A clone of slack from scratch with essential features.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 77.0%
  • CSS 21.7%
  • HTML 1.3%