Discord Clone

Welcome to Discord Clone, a full-stack application built with Next.js, React, Socket.io, Prisma, Tailwind, and MySQL. This project aims to replicate the popular Discord platform, providing real-time messaging, server management, and other essential features.

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

Technologies Used

Front-end

• Next.js
• React
• Socket.io
• Tailwind CSS

Back-end

• Prisma
• MySQL

Additional Libraries

• Clerk
• Emoji Mart
• LiveKit

Table of Contents

• Introduction
• Technologies Used
• Installation and Setup
• Scripts
• Dependencies
• Dev Dependencies

Introduction

This Discord Clone is a feature-rich platform that includes real-time messaging, server management, and various interactive components. It leverages Next.js for the front-end, React for UI components, Socket.io for real-time communication, Prisma as the database ORM, and Tailwind CSS for styling.

Installation and Setup

1. Clone the repository:

   git clone https://github.com/soul-xettri/discord-clone.git
   cd discord-clone
   

2. Install dependencies:

   npm install
   

3. Set up the database using Prisma:

   npx prisma db push --force-reset
   

4. Run the development server:

   npm run dev
   

5. Open http://localhost:3000 in your browser to explore the Discord Clone.

6. You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Scripts

• dev: Run the Next.js development server.
• build: Build the Next.js application.
• start: Start the Next.js production server.
• lint: Lint the project files.
• db:reset: Reset the database using Prisma.

Dependencies

• List of production dependencies from package.json.

Dev Dependencies

• List of development dependencies from package.json.

Feel free to contribute and enhance the Discord Clone! 🚀

Screenshots

1) Sign Up Using Clerk

2) Server

Add new server with Uploadthing

Server Setting

Delete Server

3) Main Page

White Mode

Dark Mode

4) Server Top Navbar

Client View

Admin View

5) Channel

Create Channel

Edit Channel

Delete Channel

5) Members

Invite Members

Edit Member

6) Navigation and Server Sidebar

7) Search Inside Server

8) Audio and Video Call

Screen share

9) Realtime Chat

Channel Realtime Chat

Personal one on one realtime chat with other member

Edit chat

Delete chat

10) Sign Out using Clerk