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

Todo List
- Create, view, and delete personal todo lists.
Google Calendar Integration
- Authenticate with Google to manage events in the primary Google Calendar linked to the user's account.
Direct Messaging
- Initiate and manage conversations, share text and images (up to 50MB).
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).
Search Functionality
- Search for channels and users(with whom conversation is started) within the Slack Clone.
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

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

Step 2: Set Up a New Project

Choose a name for your project and select the region closest to you.
For the database password, enter a strong password (you'll need this to access your database, so keep it safe).
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

Once your project is created, go to the Settings tab on the left-hand menu.
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

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
);
```

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

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

lugnitdgp / GSoC_Slack-Clone

readme