A modern, full-featured Discord clone built with Next.js 13, React, Socket.io, Prisma, TailwindCSS, MySQL, and TypeScript. This application provides real-time messaging, voice/video calls, server management, and a beautiful, responsive user interface.
- Secure Authentication with Clerk
- Role-based Access Control (Admin, Moderator, Guest)
- Protected Routes and API endpoints
- Real-time messaging using Socket.io
- WebSocket fallback with polling for reliability
- Message editing and deletion in real-time
- File attachments support (images, PDFs) via UploadThing
- Emoji picker for enhanced messaging experience
- Text, Audio, and Video channels
- 1:1 video calls between members
- Group voice/video calls using LiveKit
- High-quality audio/video streaming
- Create and customize servers with images and names
- Channel creation (Text, Audio, Video)
- Member management (Kick, Role changes)
- Unique invite link generation with full invite system
- Server settings and permissions
- Beautiful UI with TailwindCSS and ShadcnUI components
- Dark/Light mode theme switching
- Fully responsive mobile and desktop design
- Infinite scroll message loading (batches of 10)
- Loading states and error handling
- Form validation using react-hook-form and Zod
- RESTful API with route handlers (app/api)
- Database ORM with Prisma
- File upload system with UploadThing
- Real-time updates across all connected clients
| Technology | Purpose | Version |
|---|---|---|
| Next.js | React framework with SSR/SSG | 13.x |
| React | Frontend library | 18.x |
| TypeScript | Type-safe JavaScript | 5.x |
| TailwindCSS | Utility-first CSS framework | 3.x |
| Prisma | Database ORM | 5.x |
| Socket.io | Real-time communication | 4.x |
| MySQL | Database (PlanetScale) | - |
| Clerk | Authentication service | 4.x |
| LiveKit | Video/Audio streaming | 1.x |
| UploadThing | File upload service | 5.x |
| Zod | Schema validation | 3.x |
| React Hook Form | Form handling | 7.x |
- Node.js version 18.x.x or higher
- npm or yarn package manager
- MySQL database (PlanetScale recommended)
- Clerk account for authentication
- UploadThing account for file uploads
- LiveKit account for video/audio calls
-
Clone the repository
git clone https://github.com/devang47/discord-clone.git cd discord-clone -
Install dependencies
npm install # or yarn install -
Environment Setup
Create a
.env.localfile in the root directory:# Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ # Database DATABASE_URL=your_mysql_database_url # UploadThing (File Uploads) UPLOADTHING_SECRET=your_uploadthing_secret UPLOADTHING_APP_ID=your_uploadthing_app_id # LiveKit (Video/Audio) LIVEKIT_API_KEY=your_livekit_api_key LIVEKIT_API_SECRET=your_livekit_api_secret NEXT_PUBLIC_LIVEKIT_URL=your_livekit_url
-
Database Setup
# Generate Prisma client npx prisma generate # Push database schema npx prisma db push # (Optional) Seed the database npx prisma db seed
-
Start the development server
npm run dev # or yarn devOpen http://localhost:3000 in your browser.
discord-clone/
├── app/ # Next.js 13 app directory
│ ├── (auth)/ # Authentication routes
│ ├── (invite)/ # Invite handling routes
│ ├── (main)/ # Main application routes
│ ├── (setup)/ # Initial setup page
│ ├── api/ # API routes
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── chat/ # Chat-related components
│ ├── modals/ # Modal components
│ ├── navigation/ # Navigation components
│ ├── providers/ # Context providers
│ ├── server/ # Server-related components
│ └── ui/ # UI components (shadcn/ui)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and configurations
├── pages/ # API routes for Socket.io
├── prisma/ # Database schema and migrations
└── public/ # Static assets
| Command | Description |
|---|---|
npm run dev |
Start development server |
npm run build |
Build production bundle |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run lint:fix |
Fix ESLint errors |
npm run type-check |
Run TypeScript checks |
- Messages are instantly delivered using Socket.io
- Support for text, images, and PDF files
- Message editing and deletion with real-time updates
- Emoji reactions and rich text formatting
- Create unlimited servers with custom names and images
- Organize conversations with Text, Audio, and Video channels
- Manage members with role-based permissions
- Generate shareable invite links
- High-quality audio/video streaming powered by LiveKit
- Support for both 1:1 conversations and group calls
- Screen sharing capabilities
- Adaptive bitrate for optimal performance
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- shadcn/ui for the beautiful UI components
- Clerk for authentication
- LiveKit for video/audio streaming
- UploadThing for file uploads
- PlanetScale for the database
If you have any questions or need help, please open an issue on GitHub or contact the maintainers.
Built with ❤️ using Next.js and modern web technologies