Skip to content

Latest commit

 

History

History
238 lines (179 loc) · 9.82 KB

README.md

File metadata and controls

238 lines (179 loc) · 9.82 KB
Raw

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

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

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

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

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

  2. 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.
  1. 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.

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