Creating a comprehensive Discord clone using Next.js and Socket.io for both front-end and back-end functionality.

29 August 2023
0
55

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Copy of Copy of Copy of Fullstack Twitter Clone (5)

This is a repository for Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

VIDEO TUTORIAL

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
Full responsivity and mobile UI
Light / Dark mode
Websocket fallback: Polling with alerts
ORM using Prisma
MySQL database using Planetscale
Authentication with Clerk

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-discord-clone.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=


DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

LIVEKIT_API_KEY=
LIVEKIT_API_SECRET=
NEXT_PUBLIC_LIVEKIT_URL=