yeasir0032/discord-clone

A Discord clone built using Next.js, Tailwind CSS, and LiveKit, providing users with real-time text, voice, and video communication features.

Discord Clone

Welcome to the Discord Clone built with Next.js! This project aims to replicate the functionality and design of the popular communication platform Discord using the Next.js framework.

-> Key Features <-

• Real-time Chatting: Enjoy seamless real-time messaging with friends and communities. Send text messages instantly and engage in conversations effortlessly.
• Voice and Video Calls: Connect with friends through high-quality voice and video calls. Experience crystal-clear audio and video communication, whether you're chatting one-on-one or in a group.
• Server and Channel Management: Create and manage servers and channels to organize your communities and conversations efficiently. Customize permissions and roles to maintain control over your server environment.
• Direct messages: Conversate with any members of the server directly. You can give a video call or an audio call directly.
• Rich Media Support: Share images, videos, GIFs, and other media files within your conversations. Express yourself with a wide range of multimedia options.
• Emojis and Reactions: Spruce up your conversations with emojis and reactions. React to messages to express your feelings or simply add some fun to the chat.

💻 Tech Stacks

Frontend:

Backend :

Contribution

We welcome contributions from the community! Before contributing, please review our Contribution Guidelines to get started.

Local development

Fork the repo

To contribute to this Discord-Clone, you must first fork the Discord-Clone repo.

Clone the repo

1. Clone your GitHub forked repo:

   git clone https://github.com/<github_username>/Discord-Clone

2. Go to the Discord-Clone directory:

   cd discord-clone

Install dependencies

1. Install the dependencies in the root of the repo:

   npm install # install dependencies

2. Copy the example .env.local.example to .env.local

   .env.local.example

Setup Environment variables

• Create a .env.local in your root directory
• Visit Supabase website to create a project, then get its base URL and base anon key.
• Visit UploadThing website to create a new app and get its app ID and secret key.
• Visit ClerkJS website to create a new app and get its public key and secret key.
• Visit LiveKit website to create a new app and get its public key, URL, and secret key.
• Paste the credentials in the respective positions.
• Keep the rest as it is.

Testing

To start a development server

npm run dev # start all the applications

Visit http://localhost:3000/

Deployment

For deployment use services like Railway , Digital Ocean, AWS, Google Cloud, Azure, etc.

Documentation

App Routes

• auth -> For authentication using ClerkJs.
• invite -> For inviting to existing servers.
• main -> contains routes for server, channel, and conversations pages.
  • /servers/serverId -> server route
    • /channels/channelId -> channel specific route
  • /conversations/memberId -> member of server private conversation.
• setup -> To create an initial server create a modal.
• api -> For api handling

Our Contributors ❤️

Thank you for contributing to our repository.😃

Show some ❤️ by starring this awesome repository!

discord-clone's Issues

Add Code of Conduct

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Sample: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/CODE_OF_CONDUCT.md

changes required in the Readme.md file

• some grammatical errors need to be eliminated from the readme file. Also, the deployed link is to be added.

Add issues

As the maintainer of a Collaborate repo, keeping Issues up-to-date will help the student community understand what they can do to contribute. Issues should vary by the easy (update documentation) to the difficult (add a new feature). The more involved you are, the more opportunities there are to collaborate.

Recommendations:

Add issues of varying difficulty to the repo often. you must add the tag GSSoC'24, Level 1, Level2, Level 3 good first issue etc.
How we cacluclate the Scores on Leaderboard: Every PR one point
Level 1: 10 points
Level 2: 25 points
Level 3: 45 points
Try to add some documentation issues as well it would be easy for beginner contributor to explore opensource through your repo.
Generate issues even if you plan on solving them, so the repository appears as active.
Contribute/commit often to the repo so it does not go stale.
Reference https://github.com/Recode-Hive/Stackoverflow-Analysis/issues

Design a Login Page

Just design a login page without any functionality

Make sure your design is as per the picture above
You should not use the same image as above for background you can take any image from unsplash, make sure that you give a url to the image

You have to do:

• Create the page in componets/home-layouts
• Name the file LoginPage
• No need to do the QR thing
• Add Google Login button in place of QR
• Use Tailwind css and Radix UI
• Dark mode and Light mode compatibility.

Light and dark mode for user satisfaction

Currently the users can only use the web-app in light mode. To enhance user experience, we can add a night mode option.

Describe the solution you'd like
I want to add a light/dark mode toggle feature. This feature would allow users to switch between light and dark themes based on their preference or the ambient lighting conditions.

Additional context
This is under GSSOC'2024 Contribuition

Auto comment on issue and self assign the issue

Is your feature request related to a problem? Please describe.
It causes delay for a contributor to know when he or she can start working on the issue and it's a lot of work for a PA to do simple task like this

Describe the solution you'd like
I would like to create a workflow that will auto comment when an issue is raised and will self assign the issue to the user who has opened the issue

Additional context
I have seen your greetings.yml file I would like do enhance that too

make create discord component thing more responsive and ui friendly

please assign me this issue under ggsoc

can i contrubuite any thing i know UI/UX and know next.js ,react,and tailwind css

can i contrubuite any thing i know UI/UX and know next.js ,react,and tailwind css @Yeasir0032

close icon not working

Describe the bug
A clear and concise description of what the bug is.
user click on close icon then it is not closed

Feature for auto commenting on a new issue creation

I would like an automated feature that posts a predefined comment on an issue as soon as it is created. This feature aims to address the problem of delayed and inconsistent communication following the creation of issues. By automatically commenting on issues as soon as they are created, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

Could you please assign me this issue under GSSOC'24.

Auto Commenting when a PR is merged

This feature aims to solve the problem of inconsistent and delayed communication following the merging of PRs. By automating the commenting process, it ensures that contributors receive timely feedback and acknowledgments. It also reduces the administrative burden on maintainers, allowing them to focus more on code reviews and other critical tasks.

Could you please assign me this issue under GSSOC'24.

Setting up the CI/CD pipeline for the Discord-Clone using Github Actions

The problem is the lack of a CI/CD pipeline for the Discord-Clone project, leading to manual deployment processes and potential errors. Implementing a CI/CD pipeline using GitHub Actions for the Discord-Clone project to automate the build, test, and deployment processes.

Augmented Reality (AR) Avatars

Introduce AR avatars that users can customize and animate in real-time, allowing for immersive and expressive interactions within virtual environments and chat channels.

Automate the task to manually create database structure using supabase migration

Is your feature request related to a problem? Please describe.
As of now, even to start the project we have to manually create the table schema in supabase dashboard by executing SQL commands provided in table_setup.md. And even after that to test a functionality we have to manually create table entries which is very inconvenient and delays meaningful time which could have been focused on development

Describe the solution you'd like
We can automate the above process my using migrations
just by executing few commands like

Links the current project with the supabase project

npx supabase link --project-ref <Project-id>

Migrate the Supabase database to the desired structure defined in table_setup.md

npx supabase db push

we can seed the data (filling the table with sample data) after the tables have migrated using seeding

Additional context
All of the above will speedup the process of setting up the project locally

Sign in options using Supabase auth

I'd like to add signin options using firebase authentication, kindly assign me this under GSSoC '24.

Add PR template

I would like to add a pull request template for this repository. I believe that having a standardized template will help streamline the contribution process, ensuring that all necessary information is included and making it easier for maintainers to review and merge pull requests.

Could you please assign this issue to me under GSSOC'24.

Auto commenting feature for new PR raised

This feature aims to address the problem of delayed and inconsistent communication following the raising of PRs. By automatically commenting on PRs as soon as they are raised, it ensures that contributors receive immediate feedback and acknowledgment for their efforts. This fosters a positive and supportive environment for collaboration, encouraging continued participation and engagement from contributors.

Could you please assign me this issue under GSSOC'24.

Contributor showcase not showing

The contributors list in the Readme.md file is showing blank.

Add templates for issues

Issue templates are very helpful for a collaboration repo. When users identify a bug or want to add a new feature, you can provide templates so you can collect all the pertinent information you need to fix a bug or add a new feature.

We recommend creating a “Report Bug” and “Feature Request” issue template.
you can refer this: https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Some suggested prompts/questions you can add to a “Report Bug” template are:

Briefly describe the bug
What is the expected behavior?
Please provide step by step instructions on how to reproduce the bug
Some suggested prompts/questions you can add to a “Feature Request” issue template are:

Briefly describe your feature request
What problem is this feature trying to solve?
How do we know when the feature is complete?

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/issues/new/choose
Click on Get Started button and copy the template to your

Add supabase tables setup in Learn.md

Here is the schema visualizer.

• Add steps to create tables along with sql codes.
• Provide name of columns and datatype in table form
• Specify the ENUMs properly

Supabase storage bucket using for File storage

Functionality to use supabase storage

Currently the project uses uploadthing for storing files. The new mechanism involves using supabase's storage system to store files.
Steps to follow:

1. Read about supabase storage system.
2. Understand how supabase works in this project ( for example you can look into this code snippet page.tsx
3. Trace the references of upload thing.
   • It is used when server is created or edited
   • For file attachment in messaging
4. Replace the functionality from upload thing to supabase storage .
5. Make sure to remove uploadthing from package.json by uninstalling it.

Add Topics

In GSSoC'24, GitHub Topics will help the discoverability of your project.

I see that you already have great topics on your repository!
I would recommend adding the name of the company like the software you use to build like "vs-code, ghdesktop" to improve your discoverability.

If you are happy with the topics you have, feel free to close this issue. 👍

Design a Register User Page

Just design a register page without any functionality

Make sure your design is as per the picture above
You should not use the same image as above for background you can take any image from unsplash, make sure that you give a url to the image

You have to do:

• Create the page in componets/home-layouts
• Name the file RegisterPage
• Add Goggle login button
• No need to do the Date of Birth
• Use Tailwind css and Radix UI
• Dark mode and Light mode compatibility.

Show Image preview before uploading new server image

Is your feature request related to a problem? Please describe.
A modal window appears asking the user to upload their server image and provide a name when they sign up or start a new server. After the user selects the file there is no preview of the image showing before uploading or even after uploading.

Describe the solution you'd like
A preview image should shown before the user uploads the file when they select an image file.

Describe alternatives you've considered
We can upload the image immediately when the user clicks the "create" button, providing a better user experience than uploading the image first and then creating the server by clicking on the "create" button.

Additional context

Before upload

After upload

Missing CONTRIBUTING.md File

The repository currently lacks a CONTRIBUTING.md file, which is an important resource for guiding potential contributors on how to engage with the project effectively. A CONTRIBUTING.md file outlines the contribution guidelines, coding standards, and procedures for submitting pull requests, thus streamlining the contribution process and ensuring consistency across contributions.

Could you please assign this issue to me under GSSOC 24.

Search option must be sticky

Search option must be fixed at top. It should not be scrollable to make easy for users to search.

Expected behavior
Search bar will be sticky at the top and rest of the part scrollable.

Screenshots

Desktop (please complete the following information):

• OS:Windows
• Browser Chrome

Smartphone (please complete the following information):

• Device: Realme narzo 50A
• OS: Android
• Browser Chrome

ADD gitignore file

Hello, I would like to work on this repository. @Yeasir0032 assign it to me.

I want to add a .gitignore file.

Creating a explore page for servers

Server Explorer

A new user who has not been in any server can go to this page and find and join a server.

Current scenario:-
Whenever a new user is created , a server create modal appears.

Solution:
The new user will be redirected to the server explorer page and can select and join any server.

Overview of the solution:

• Create a new route in app directory
• Create page.tsx file
• Get all servers from database
• Display them
• Handle searching and joining

Change the issue templates

Issue templates

Issue templates should be more better.

After Sign in there is a bug

Learn.md

Learn repos should have a LEARN.md file to teach student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

Reference: https://github.com/Recode-Hive/Stackoverflow-Analysis/blob/main/Learn.md

Filter genuine email

Describe the bug
In your application anyone can enter using temporary or disposable email.
I will add a feature so that no one could create an account using temporary or disposable email.
It will allow only genuine users in your database.
It will help to avoid any bot.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'login'
2. See error

Expected behavior
It will allow only genuine users in your database.

Desktop (please complete the following information):

• OS: Windows 11
• Browser Microsoft Edge
• Version 124.0.2478.97

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Assign me this work under GSSoC24, I will implement it.

video calling enhancement!

**feature

video channels and audio channels can be combined and enhanced.

Describe the solution you'd like
I recently made a video call miniproject and here are some changes i would like to add

• 1. a waiting room or a place to go back after you leave the meet
  
• 2. working screenshare and a single video conferencing channel
  
• 3. [optional] recording of videos

Automated Greeting Workflow

I propose to create a GitHub workflow named "Greetings". This workflow will automatically greet users who create new issues or pull requests in this repository. The Greeting will look like "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible."

Please assign this issue to me.

feat:emoji panel to chats in video/audio channels.

feat:adding emoji panel to chats in video,audio channels

• add emoji panel to video, audio channels

Provide scroll bar Smoothness

• .css must be changed
• add some smoothness code

Creating Dockerfile for the Discord-Clone

Is your feature request related to a problem? Please describe.
The problem is the lack of a Dockerfile for the Discord-Clone project.

Describe the solution you'd like
Implementing a Dockerfile for the Discord-Clone project to containerize the application and simplify deployment.

Add Contribuing.md

Add contributing.md file for the repo

Add a button for server explorer in navigation bar

Adding server explorer button in navigation bar

We have to add a button inside of navigation bar that opens the route for Server explorer page.
Steps to do:

• Go to components/navigation/navigation-sidebar.tsx
• Add a button in line number 24

<div className="space-y-4 flex flex-col items-center h-full bg-[#e3e5e8] text-primary w-full dark:bg-[#1e1f22] py-3">
      <NavigationAction />
      {\* We have create the button here */}
      <Separator className="h-[2px] bg-zinc-300 rounded-md mx-auto w-10" />

• Here Navigation Action is a button that creates a server We just have to create one like that
• No need to create another component , you can just do it here
• No need to handle click events
• Use icons from lucide react or just paste a svg

Current scenario

Final scenario needed

AXIOS ERROR

Describe the bug
As soon as i am signing in with clerk and trying to create the channel , this is coming up :-

ans in Vs terminal :-

Gitignore file update

Gitignore file - add .vscode directory to gitignore

In the gitignore file add .vscode directory.

doc : code of conduct file should add on repo

• we need to add code of conduct file in repo

• Sample: CODE_OF_CONDUCT

Update Readme links

**Saw links on readme of texh used not linked **

Picture reference

Please assign me this under GSsoc'24

Add GitHub Desktop Contribution Instructions

• Which file to change
• What to change
• What type of change (for example:- grammatical errors, adding new sections)
  I am interested in contributing to the project by adding detailed instructions on how to contribute using GitHub Desktop.

I believe that by providing clear and comprehensive guidance, we can encourage more contributors to participate in the project, especially those who prefer using GitHub Desktop for their contributions.

Could you please assign me the issue related to adding GitHub Desktop contribution instructions under gssoc24? I am excited about the opportunity to contribute to the project and help streamline the contribution process for others.

Create contributors showcase in the readme file

Add a section named contributors that is a showcase for all the contributors in the repo.
Like this -

Check for guide here https://github.com/Tanu-N-Prabhu/myWebsite.io/blob/master/Docs/Displaying%20Contributors%20Image%20on%20README%20files%20with%20no%20Pain!.md

Can anyone help me with this

When i am creating server its showing this error.

Activity Status Indicators

Display activity status indicators next to user profiles to indicate when users are actively typing, reading messages, or idle, providing real-time context for communication.

about us

The website currently lacks a "about Us" page. This page is crucial for providing users with a direct means to reach out for support, feedback, or inquiries.

Solution: Implement a "about Us" Page

Create a New Page:
Develop a dedicated "about Us" page that can be easily accessed from the main navigation menu.

Direct Messages Incorrectly Marked as Edited

In the Discord clone project, direct messages sent between users are being marked as "edited" even though no edits have been made. This issue causes confusion as users might think their messages have been altered post-sending. This problem appears consistently across all direct messages.

Steps to reproduce the behavior:

1. Log in: Sign in to your account on the Discord clone.
2. Navigate to Direct Messages: Go to the Direct Messages section.
3. Send a Message: Send a new direct message to any user.
4. Observe the Message: Notice that the newly sent message is immediately marked with an "edited" tag.

Expected behavior
There should be no "edited" label along with the messages sent for first time.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Google Chrome, Internet Explorer

Girlscript Summer of Code Introduction/Tracking

👋 Hi @Yeasir0032,

I am Prince,web developer(Core Team) Girlscript Summer of Code. I'll be collaborating with you on preparing your repo for GSSoC'24 Program

Why are these changes required?
After Analysing last year's contributions and feedback it would be great for students to have a couple of standard readme files on the repo to understand what the project is all about and some issues detailing what they can contribute. This will help you to see increased engagement in your repository as well.

As mentioned students get a chance to learn step by step, how to build this project as well as invite mentors to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for Girlscript summer of code 2024 on 10th May.

This issue will serve as a tracking issue to track all issues related to GSSoC'24. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

• #1
• #2
• #4
• #3
• #5