Slack Clone

Tech Stacks Used

• Vite React(for frontend)
• Node.js (for backend)
• Supabase (as a backend service)
• Docker (for containerization)

Features Overview

Authentication

• Users can login using OAuth with Google and GitHub, or using their email and password.
• Password reset functionality via email.

Homepage Features

1. Todo List

   • Create, view, and delete personal todo lists.

2. Google Calendar Integration

   • Authenticate with Google to manage events in the primary Google Calendar linked to the user's account.

3. Direct Messaging

   • Initiate and manage conversations, share text and images (up to 50MB).

4. Channel Management

   • Create channels, add/remove admins, assign/delete tasks to channel members and assign task to any member of the channel also, direct message members,channel deletion.
   • Role-based access (Admin, Member).

5. Search Functionality

   • Search for channels and users(with whom conversation is started) within the Slack Clone.

6. Responsive Design

   • User interface adapts to different screen sizes for optimal user experience.

Setup Instructions

Setting Up Supabase

Follow these steps to create a Supabase account, set up a new project, and obtain your project URL and API key.

Step 1: Create a Supabase Account

1. Go to Supabase.
2. Click on Sign Up and enter your details to create a new account.
3. Once signed in, click on New Project to start setting up a project.

Step 2: Set Up a New Project

1. Choose a name for your project and select the region closest to you.
2. For the database password, enter a strong password (you'll need this to access your database, so keep it safe).
3. Click Create New Project. Supabase will take a few moments to set up your project.

Step 3: Access the Project Settings for URL and Key

1. Once your project is created, go to the Settings tab on the left-hand menu.
2. Click on API in the Settings menu. Here, you'll see:
   • URL: This is the unique URL for your Supabase project.
   • anon key: This is your public API key for accessing the Supabase API.

Environment Variables

• Create a .env file in the root directory of your project and define the following variables:

VITE_SUPABASE_URL=<your_supabase_project_url>
VITE_SUPABASE_KEY=<your_supabase_api_key>
VITE_Backend_Port=<backend_port_number>

• Create a .env file in the Back_end directory with following variables:

Port=<Your backend port>
EMAIL_USER=<your mail for nodemailer>
EMAIL_PASS=<the secret key given by google cloud for nodemailer>
CLIENT_ID=<your cloud project cleint id>
CLIENT_SECRET=<your cloud project cleint secret>
REDIRECT_URL=<redirect url after oauth is done>
API_KEY=<API key from google cloud>
SESSION_SECRET=<session secret generated by you>

Database Tables

1. user_data: Disable the RLS and Enable the Realtime

   Name	Type	Default value	Extra options
   id	uuid	NULL	- primary
   updated_at	timestamp	NULL	Is Nullable
   username	text	NULL	Is Nullable
   avatar_url	text	NULL	Is Nullable
   email	text	NULL	Is Nullable
   phone	text	NULL	Is Nullable
   hashed_password	text	NULL	Is Nullable

   • Purpose: Stores user information including username, avatar URL, email, phone number, and hashed password.

   • Foreign keys

     schema	auth
     table	users
     public.user_data	id
     auth.users	id
     Action if updated	No action
     Action if removed	Cascade

     THROUGH SQL EDITOR

     • The above tables are the manual explanations for creating the user_data tables use the below code in the SQL EDITOR for Handling the triggers

  -- Create the user_data table
  create table user_data (
  id uuid references auth.users on delete cascade not null primary key,
  updated_at timestamp with time zone,
  username text,
  avatar_url text,
  email text,
  phone text,
  hashed_password text
  );

  -- Trigger function for new user sign-up
  create function public.handle_new_user()
  returns trigger
  set search_path = ''
  as $$
  begin
  insert into public.user_data (id, username, avatar_url, email, phone)
  values (
    new.id,
    new.raw_user_meta_data->>'username', 
    new.raw_user_meta_data->>'avatar_url', 
    new.email,
    new.raw_user_meta_data->>'phone'
  );
  return new;
end;
$$ language plpgsql security definer;

-- Trigger for user sign-up
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

2. direct_messages: Disable the RLS and Enable the Realtime

   Name	Type	Default Value	Extra options
   id	uuid	gen_random_uuid()	primary
   created_at	timestamp	now()	-
   dm_chats	json	NULL	Is Nullable define as Array

No foreign keys needed

• Purpose: Stores contact information related to direct messaging.

3. chats_dm: Disable the RLS and Enable the Realtime

   Name	Type	Default Value	Extra options
   id	text	NULL	primary
   created_at	timestamp	now()	-
   messages	jsonb	NULL	Is Nullable define as Array

No foreign keys needed

• Purpose: Stores direct messages between users.

4. channels_messages: Disable the RLS and Enable the Realtime

   Name	Type	Default Value	Extra options
   channel_id	uuid	gen_random_uuid()	primary
   created_at	timestamp	now()	-
   messages	json	NULL	Is Nullable define as Array
   channel_name	text	NULL	-
   channel_members	json	NULL	Is Nullable define as Array

No foreign keys needed

• Purpose: Stores messages and metadata for channels.

5. channels_list: Disable the RLS and Enable the Realtime

   Name	Type	Default Value	Extra options
   id	uuid	auth.uid()	primary
   created_at	timestamp	now()	-
   messages	json	NULL	Is Nullable define as Array

   No foreign keys needed

   • Purpose: Lists channels that a user is a member of.

6. Todo_list: Disable the RLS and Enable the Realtime

Name	Type	Default Value	Extra options
id	uuid	gen_random_uuid()	primary
created_at	timestamp	now()	-
todo_list	json	NULL	Is Nullable define as Array

No foreign keys needed

• Purpose: Stores user-specific todo lists.

7. Mails_sent: Disable the RLS and Enable the Realtime

Name	Type	Default Value	Extra options
task_id	uuid	gen_random_uuid()	primary
created_at	timestamp	now()	-
last_sent	text	NULL	Is Nullable
t_f	bool	NULL	Is Nullable

No foreign keys needed

• Purpose: Tracks emails sent as reminders for tasks.

8. Channels_todolist: Disable the RLS and Enable the Realtime

   Name	Type	Default Value	Extra options
   id	uuid	gen_random_uuid()	primary
   created_at	timestamp	now()	-
   todo_list	json	NULL	Is Nullable Define as Array

No foreign keys needed

• Purpose: Stores tasks assigned to everyone in a channel.

Storage bucket

1. Go to the Storage section and click on new bucket.
2. Name the bucket as photos, enable the Public bucket, and save it.
3. Under the configuration section, Click on policies.
4. Other Policies under storage.objects, Create a New policy as For full customisation.
5. Give the Policy name and All for allowed operation, keep the Target roles as default.
6. Provide true or 1 for USING expression and With CHECK expression.