This repository contains the source code for a full-stack Zoomer-friendly chat application built using Next.js 13, React, LiveKit, Prisma, Tailwind, and MySQL. π»π€
- Real-time Messaging: Users can send and receive messages in real-time using LiveKit. π¬
- Attachment Uploads: Users can send attachments (images, documents, etc.) as messages using UploadThing. π
- Message Editing and Deletion: Users can edit and delete their own messages in real-time, and the changes are reflected for all other users. βοΈποΈ
- Text, Audio, and Video Channels: Users can create and join text, audio, and video call channels. π₯ποΈ
- 1:1 Conversations: Users can initiate private 1:1 conversations with other members. π₯
- 1:1 Video Calls: Users can make 1:1 video calls with other members. π½οΈ
- Member Management: Administrators can kick members and change their roles (Guest/Moderator). π«π
- Invite System: Users can generate unique invite links and use them to invite new members. ππ€
- Infinite Message Loading: The app uses tanstack/query to load messages in batches of 10 for an infinite scrolling experience. π
- Server Creation and Customization: Users can create and customize their own servers. π’π οΈ
- Beautiful UI: The app uses Tailwind CSS and Shadcn UI components for a modern and responsive user interface. π¨
- Light/Dark Mode: The app supports light and dark mode. ππ
- ORM with Prisma: The app uses Prisma as the ORM for interacting with the MySQL database. ποΈ
- Authentication with Clerk: The app uses Clerk for user authentication. π
- Node.js version 18.x.x
git clone https://github.com/AntonioErdeljac/next13-discord-clone.git
-
Install the required packages:
npm i
-
Set up the
.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=
-
Set up Prisma:
- Add a Postgres database (I used NeonDB)
- Run the following commands:
npx prisma generate npx prisma db push
-
Start the app:
npm run dev
Running commands with npm run [command]
:
Command | Description |
---|---|
dev |
Starts a development instance of the app |
Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue. π