Discord Clone web application using Next.js, Socket.io and Tailwind CSS
Tags: discord, nextjs
Published: 2024-01-08 07:32:03

---
title: Discord Clone web application using Next.js, Socket.io and Tailwind CSS
published: true
date: 2024-01-05 00:12:00 UTC
tags: Discord,Nextjs
canonical_url: https://reactjsexample.com/discord-clone-web-application-using-next-js-socket-io-and-tailwind-css/
---

# Fullstack Discord Clone 🚀

## Description:
 ![Discord Clone web application using Next.js, Socket.io and Tailwind CSS](https://reactjsexample.com/content/images/2023/12/Code_2023-12_11-06-57.jpg)

The Discord Clone Project is an immersive full-stack web application designed for real-time communication and collaboration within online communities. Developed using cutting-edge technologies such as Next.js 14, React, Socket.io, Prisma, TailwindCSS, and MySQL, this clone provides a dynamic and responsive platform for users to engage seamlessly. From instant messaging with Socket.io to multimedia channels and 1:1 video calls, the Discord Clone delivers a comprehensive communication experience.

## 🌐 Key Features:

- Real-time messaging using Socket.io
- Send attachments as messages using UploadThing
- Delete & Edit messages in real time for all users
- Create Text, Audio and Video call Channels
- 1:1 conversation between members
- 1:1 video calls between members
- Member management (Kick, Role change Guest / Moderator)
- Unique invite link generation & full working invite system
- Infinite loading for messages in batches of 10 (tanstack/query)
- Server creation and customization
- Beautiful UI using TailwindCSS and ShadcnUI
- Fully responsivity and mobile UI
- Light / Dark mode
- Websocket fallback: Polling with alerts
- ORM using Prisma
- MySQL database using Railway
- Authentication with Clerk

## Working Videos

### Server
#<svg aria-hidden="true" height="16" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>bandicam.2023-12-27.23-07-01-591.mp4<video src="https://private-user-images.githubusercontent.com/103236128/293077916-46ef7ce4-87a6-4c6f-8155-9f8fa48e5ef2.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc3OTE2LTQ2ZWY3Y2U0LTg3YTYtNGM2Zi04MTU1LTlmOGZhNDhlNWVmMi5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MDU0NjQyMzkxYzQ1NzNlM2Y1MGZmMDI2N2VhOWU1MWM4NzRhYzNmYTE0ZmRmYzVlOWI3NzU4N2I4MjMyODNhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.E8HuwPsVOaPvn-cWeDAmLOdzvUjC_dS3XbtIwYVHcF4" data-canonical-src="https://private-user-images.githubusercontent.com/103236128/293077916-46ef7ce4-87a6-4c6f-8155-9f8fa48e5ef2.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc3OTE2LTQ2ZWY3Y2U0LTg3YTYtNGM2Zi04MTU1LTlmOGZhNDhlNWVmMi5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MDU0NjQyMzkxYzQ1NzNlM2Y1MGZmMDI2N2VhOWU1MWM4NzRhYzNmYTE0ZmRmYzVlOWI3NzU4N2I4MjMyODNhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.E8HuwPsVOaPvn-cWeDAmLOdzvUjC_dS3XbtIwYVHcF4" controls="controls" muted="muted" style="max-width:100%; min-height: 200px">

  </video>
### Live chat in channel
#<svg aria-hidden="true" height="16" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>bandicam.2023-12-27.23-11-44-843.mp4<video src="https://private-user-images.githubusercontent.com/103236128/293078025-a9bb3f43-597d-48db-9212-aedff3368dce.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4MDI1LWE5YmIzZjQzLTU5N2QtNDhkYi05MjEyLWFlZGZmMzM2OGRjZS5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03NDMzNWE0MDQyNTNjMDc0NjMxOTRkNDg2MGRlYTgzMGU1YTFkZWRjYzUwZWQzOGRiYzE2YjMwNTEzMWM2NDQzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bvnOSvYApDFRNmmhcqlu4fEhVHIbRE3lpMsszuhdCtg" data-canonical-src="https://private-user-images.githubusercontent.com/103236128/293078025-a9bb3f43-597d-48db-9212-aedff3368dce.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4MDI1LWE5YmIzZjQzLTU5N2QtNDhkYi05MjEyLWFlZGZmMzM2OGRjZS5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03NDMzNWE0MDQyNTNjMDc0NjMxOTRkNDg2MGRlYTgzMGU1YTFkZWRjYzUwZWQzOGRiYzE2YjMwNTEzMWM2NDQzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.bvnOSvYApDFRNmmhcqlu4fEhVHIbRE3lpMsszuhdCtg" controls="controls" muted="muted" style="max-width:100%; min-height: 200px">

  </video>
### Direct chat with user and video call
#<svg aria-hidden="true" height="16" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>bandicam.2023-12-27.23-16-38-910.mp4<video src="https://private-user-images.githubusercontent.com/103236128/293078135-3e77f3c2-c63e-4556-bb13-1cb6b2f904be.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4MTM1LTNlNzdmM2MyLWM2M2UtNDU1Ni1iYjEzLTFjYjZiMmY5MDRiZS5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMTkwNTZkYTI4ZmFjZDcyN2ZkN2VkNjViYzdlYTdmMWRkNmIwNjVmMjcxZWU2NTJmYjgxNGQ1MmY1OTIxY2E2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aZsOpkHvxEEN7k1IhwAar-9G5Gdljh1Mekjp2M1raQ0" data-canonical-src="https://private-user-images.githubusercontent.com/103236128/293078135-3e77f3c2-c63e-4556-bb13-1cb6b2f904be.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4MTM1LTNlNzdmM2MyLWM2M2UtNDU1Ni1iYjEzLTFjYjZiMmY5MDRiZS5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yMTkwNTZkYTI4ZmFjZDcyN2ZkN2VkNjViYzdlYTdmMWRkNmIwNjVmMjcxZWU2NTJmYjgxNGQ1MmY1OTIxY2E2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aZsOpkHvxEEN7k1IhwAar-9G5Gdljh1Mekjp2M1raQ0" controls="controls" muted="muted" style="max-width:100%; min-height: 200px">

  </video>
### search users, channels and infinite loading
#<svg aria-hidden="true" height="16" viewbox="0 0 16 16" version="1.1" width="16" data-view-component="true">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>bandicam.2023-12-27.23-26-08-845.mp4<video src="https://private-user-images.githubusercontent.com/103236128/293078457-65a64c3e-83cc-444f-8410-573fe1d08667.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4NDU3LTY1YTY0YzNlLTgzY2MtNDQ0Zi04NDEwLTU3M2ZlMWQwODY2Ny5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZmE0Mzc3OGI4Zjg0MzlkYmM0YWQ0NjkwMGFkNDIxOGMyOTRiMWJiMDQxYTRlZGEwOGFjNzYyZGYxY2U4OTRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.uTkfU8TC5kH7PKMU-2JjZRy5ik0bDTy7aN1dE3JflEo" data-canonical-src="https://private-user-images.githubusercontent.com/103236128/293078457-65a64c3e-83cc-444f-8410-573fe1d08667.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDM5OTIyMzAsIm5iZiI6MTcwMzk5MTkzMCwicGF0aCI6Ii8xMDMyMzYxMjgvMjkzMDc4NDU3LTY1YTY0YzNlLTgzY2MtNDQ0Zi04NDEwLTU3M2ZlMWQwODY2Ny5tcDQ_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjMxMjMxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIzMVQwMzA1MzBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZmE0Mzc3OGI4Zjg0MzlkYmM0YWQ0NjkwMGFkNDIxOGMyOTRiMWJiMDQxYTRlZGEwOGFjNzYyZGYxY2U4OTRmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.uTkfU8TC5kH7PKMU-2JjZRy5ik0bDTy7aN1dE3JflEo" controls="controls" muted="muted" style="max-width:100%; min-height: 200px">

  </video>
## Deployed on Railway.app

[Dicord Clone](https://discord-clone-app-production-59e9.up.railway.app/)

## Stay Connected:

Follow me on LinkedIn [Prayansh Parmar](https://www.linkedin.com/in/prayansh-parmar/) for updates and announcements.

Happy Chatting! 📝✨

## GitHub

[View Github](https://github.com/PrayanshParmar/Discord-Clone-App?ref=reactjsexample.com)