Slack Clone

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 Introduction

In this Project create an end-to-end fullstack and real-time slack clone, all with workspaces, channels, 1:1 conversations, threads, reactions, editing and deleting messages as well as member roles.

⚙️ Tech Stack

• Next.js
• TypeScript
• Tailwind CSS
• Convex
• Convex Auth
• React.js
• Next Auth
• Vercel

🔋 Features

• 📡 Real time communication
• 👍 Reactions to messages
• 🧵 Threads / Replies system
• ✏️ Editing messages
• 🗑️ Deleting messages
• 🔐 Role based access control
• 🖼️ Image attachments
• 🔒 Authentication with Next auth v5
• 📺 Channel creation
• 🏢 Workspace creation
• ✉️ Invite system / Invite codes
• 💬 Direct messaging
• 👥 User profiles
• ⚛️ Framework Next.js 14
• 🚀 Deployment on Vercel
• 🎨 ShadCN UI & Tailwind CSS

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/samarth-kamble/Slack-Clone.git
cd Slack-Clone

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

Replace the placeholder values with your actual Convex,Github & google cloud credentials. You can obtain these credentials by signing up on the Convex, Github and Google websites.

Running the Project

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 in your browser to view the project.