English

Português

Discourse - Real-Time Chat, Video & Audio Calls

Fullstack WebApp made with NextJs, Socket.IO and Prisma.

This project started as part of this course by the extremely generous Code With Antonio, and now it has a new design and some new features outside of the course scope. Check it out:

🚀 Deploy: https://discourse-live-chat.onrender.com

💡 Main Features

• 💬 Messaging

  • Real-time messaging using Socket.IO WebSocket and a @tanstack/query polling fallback.

    

• 🔊 Video and Audio call

  • Realtime video and audio call with LiveKit

    

• 📎 Attachments

  • Send attachments as messages using UploadThing.

• 🗄️ ORM & Database

  • ORM setup using Prisma with MySQL.

• 🔐 Authentication

  • Secure authentication implemented with Clerk.

• 📜 Infinite Scrolling

  • Load messages in batches of 15 using @tanstack/query for infinite scrolling.

• 🏠 Servers

  • Create and customize servers where you can add audio, text and video channels.

    

• ✏️ Message Management

  • Delete and edit messages in real time.

• 🛠️ Member Management

  • Manage members with options to kick, change roles (Guest/Moderator), and more.

    

✨ Changes and new Features

• 💅 Brand new UI

  • Aesthetically pleasing UI built with TailwindCSS and Figma (click here to see the design).

• 🌗 Light / Dark Mode

  • Support for both light and dark themes with TailwindCSS

    

• 📱 Fully Responsive

  

• 🗄️ New MySql server

  • Because of the end of Planetscale's hobby free "forever" plan, I'm now hosting the MySql database on Aiven

• 👋 Welcome Page

  • Initial page with CTA to invite friends to chat or create a server.

• ✉️ 1:1 Directs

  • Direct messaging and 1:1 video and audio calls.

• 📞Direct Call notification

  • Get notified of calls with options to reject or accept.

    

• 🔔 Direct messages notification

  • Using sonner for new direct message notification.

    

• 🔗 Invitation System

  • Generate unique invite links for servers and direct messages.

🛠️ Running Discourse Locally

1. Clone the Repository

git clone https://github.com/ericaugusto-git/discord-clone.git
cd discord-clone

2. Install Dependencies

npm install
# or
yarn install

3. Set up Environment Variables

Create a .env file in the root of your project and add the following environment variables:

# Clerk (Authentication)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/setup
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/setup

# Prisma (Database)
DATABASE_URL='mysql://<your-database-credentials>'

# UploadThing (File Uploads)
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
UPLOADTHING_TOKEN=

# LiveKit (Real-time Video/Audio)
LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=wss://<your-livekit-url>

# Misc
WDS_SOCKET_PORT=0
NODE_ENV=production

4. Prisma Setup

prisma init
npx prisma migrate dev

5. Run the Development Server :D

npm run dev
# or
yarn dev

⚠️ Disclaimer

This project is intended for educational purposes only. Please be aware that, as with any platform where users can upload content, there is a risk of inappropriate or offensive material being shared. The project maintainers are not responsible for any content uploaded by users. It is recommended to implement content moderation practices if deploying this project publicly.