{"id":19222829,"url":"https://github.com/rendy752/discord-clone","last_synced_at":"2026-01-07T07:46:31.837Z","repository":{"id":242191137,"uuid":"754910604","full_name":"Rendy752/Discord-Clone","owner":"Rendy752","description":"A Discord Clone that includes chat features, text, voice, video channels, user authentication using Clerk, and web socket for real-time chat","archived":false,"fork":false,"pushed_at":"2024-07-28T15:06:18.000Z","size":339,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"production","last_synced_at":"2025-02-03T08:46:50.916Z","etag":null,"topics":["axios","clerk","clsx","emoji-picker","eslint","livekit","lucide-react","nextjs14","prisma","query-string","radix-ui","socket-io","socket-io-client","tailwind","tanstack-react-query","typescript","uploadthing","websocket","zod"],"latest_commit_sha":null,"homepage":"https://rendyp-discord.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rendy752.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-09T02:05:03.000Z","updated_at":"2024-08-08T01:13:59.000Z","dependencies_parsed_at":"2024-06-01T08:41:39.823Z","dependency_job_id":"881899e7-532e-4bed-becd-a0aeefe9dbac","html_url":"https://github.com/Rendy752/Discord-Clone","commit_stats":null,"previous_names":["rendy752/discord-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FDiscord-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FDiscord-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FDiscord-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FDiscord-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rendy752","download_url":"https://codeload.github.com/Rendy752/Discord-Clone/tar.gz/refs/heads/production","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246106691,"owners_count":20724401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","clerk","clsx","emoji-picker","eslint","livekit","lucide-react","nextjs14","prisma","query-string","radix-ui","socket-io","socket-io-client","tailwind","tanstack-react-query","typescript","uploadthing","websocket","zod"],"created_at":"2024-11-09T15:05:33.581Z","updated_at":"2026-01-07T07:46:31.831Z","avatar_url":"https://github.com/Rendy752.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Discord Clone :speech_balloon:\n\n---\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)  \n[![Next.js](https://img.shields.io/badge/Next.js-14.1.0-black.svg?logo=next.js)](https://nextjs.org/)  \n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg?logo=typescript)](https://www.typescriptlang.org/)  \n[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.3.0-blue.svg?logo=tailwindcss)](https://tailwindcss.com/)\n\n---\n\n## Overview\n\nWelcome to **Discord Clone**, a feature-rich replication of the popular Discord chat application built with **[Next.js](https://nextjs.org/)**. This project delivers a modern, real-time communication platform where users can create servers, manage channels, send messages, and engage in video/audio calls. Styled with **[Tailwind CSS](https://tailwindcss.com/)** and powered by a robust tech stack, it offers a seamless and responsive user experience.\n\n---\n\n## Features\n\n- **User Authentication**: Secure login and profile management using [Clerk](https://clerk.com/).\n- **Server Management**:\n  - Create, edit, and leave or delete servers as needed.\n    \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/b84eb461-56a6-47dd-8a48-ece626025c1d\" width=\"300\" alt=\"Create Server\"\u003e\n          \u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/e7750072-9e97-46bf-96b0-9eb9db7b20d2\" width=\"300\" alt=\"Edit Server\"\u003e\n          \u003c/td\u003e\n           \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/1ea37b4b-56ea-431c-a63b-f60463de1091\" width=\"300\" alt=\"Delete Server\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Generate unique invite codes to add members.\n    \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/77c88e05-beeb-4ca2-8b50-17df68b44aa8\" width=\"700\" alt=\"Invite Codes\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n- **Channel Management**:\n  - Create, edit, and delete channels (text, audio, video).\n    \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/3363d1e1-4f6b-4df4-8fc2-c8e42d84b1a0\" width=\"300\" alt=\"Create Channel\"\u003e\n          \u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/520dd447-9c07-4190-a91b-99c270d1ef87\" width=\"300\" alt=\"Edit Channel\"\u003e\n          \u003c/td\u003e\n           \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/28e22a97-e29a-4572-926f-3c1c84cb74f0\" width=\"300\" alt=\"Delete Channel\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Organize channels by type for efficient navigation.\n- **Real-Time Messaging**:\n  - Send, edit, and delete messages in channels or direct messages.\n    \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/7b3240b6-1ab6-4520-86fd-80e344e5e4a2\" width=\"300\" alt=\"Send Message\"\u003e\n          \u003c/td\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/6cc0f8b5-8d3f-4f29-80bb-50006ade85a0\" width=\"300\" alt=\"Edit Message\"\u003e\n          \u003c/td\u003e\n           \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/5c757086-1fc8-4dde-a033-a51d1327817e\" width=\"300\" alt=\"Delete Message\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Real-time updates with [Socket.IO](https://socket.io/).\n  - Typing indicators to show active users.\n- **Media Sharing**:\n  - Upload and share images and PDFs via [UploadThing](https://uploadthing.com/).\n     \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/042ca727-5b05-4307-a6f3-f9d766b333ad\" width=\"300\" alt=\"Media Sharing\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Preview media directly in chats.\n- **Video and Audio Rooms**:\n  - Real-time audio and video communication powered by [LiveKit](https://livekit.io/).\n    \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/7111dbdd-0d2f-48d0-8df7-354ba704e2e1\" width=\"700\" alt=\"Video and Audio Rooms\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n- **Member Management**:\n  \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/5536f9d7-19db-473e-aa14-0cad5216cf17\" width=\"700\" alt=\"Member Management\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Assign roles (Admin, Moderator, Guest).\n  - Kick members from servers.\n- **Direct Messaging**:\n  \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/7ec24279-80e5-410d-973e-45400eea89d6\" width=\"700\" alt=\"Direct Messaging\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - One-on-one chats with real-time messaging support.\n- **UI Enhancements**:\n  \u003ctable\u003e\n        \u003ctr\u003e\n          \u003ctd style=\"text-align: center\"\u003e\n            \u003cimg src=\"https://github.com/user-attachments/assets/398ec564-5632-41c2-9470-3ca344841eac\" width=\"700\" alt=\"Group Messaging\"\u003e\n          \u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/table\u003e\n  - Dark/light mode toggle with [Next Themes](https://github.com/pacocoursey/next-themes).\n  - Emoji picker for expressive messaging.\n  - Fully responsive design with Tailwind CSS.\n- **State Management**:\n  - Efficient data fetching with [Tanstack Query](https://tanstack.com/query).\n  - Client-side state management with [Zustand](https://github.com/pmndrs/zustand).\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see feature details\u003c/summary\u003e\n\n- **Authentication Flow**: Users sign in with Clerk, creating a profile linked to a unique `userId`.\n- **Real-Time Sync**: Socket.IO ensures messages and typing indicators are updated instantly across all connected clients.\n- **Media Handling**: UploadThing supports file uploads up to 8MB for images and 4MB for PDFs, with automatic deletion on message removal.\n- **Video Rooms**: LiveKit provides low-latency audio/video streams with customizable permissions.\n\n\u003c/details\u003e\n\n---\n\n## Tech Stack\n\n| **Category**         | **Technology**                              | **Version/Notes**                  |\n|-----------------------|---------------------------------------------|------------------------------------|\n| **Framework**         | Next.js                                    | 14.1.0 (SSR/SSG)                  |\n| **Language**          | TypeScript                                 | 5.x (type-safe)                    |\n| **Styling**           | Tailwind CSS                               | 3.3.0 (with custom animations)     |\n| **Authentication**    | Clerk                                      | Latest (secure auth/profiles)      |\n| **Database**          | CockroachDB with Prisma                    | Latest (ORM)                       |\n| **Real-Time**         | Socket.IO                                  | 4.7.5 (messaging/events)           |\n| **Video/Audio**       | LiveKit                                    | Latest (real-time comms)           |\n| **File Uploads**      | UploadThing                                | 6.3.3 (image/PDF uploads)          |\n| **State Management**  | Tanstack Query, Zustand                    | Query: 5.29.2, Zustand: 4.5.2      |\n| **UI Components**     | Radix UI, Lucide React, Framer Motion      | Latest (accessible/animated)       |\n| **Form Handling**     | React Hook Form with Zod                   | Hook Form: 7.50.1, Zod: 3.22.4     |\n| **Emoji Support**     | Emoji Mart                                 | 5.5.2 (emoji picker)               |\n| **Notifications**     | Browser Notification API                   | Native browser support             |\n| **Utilities**         | Axios, Class Variance Authority, etc.      | Axios: 1.6.8, etc. (various)       |\n\n---\n\n## Project Structure\n\nThe project is modularly organized for scalability and maintainability. Below is a detailed breakdown:\n\n- **`app/`**:\n  - Root directory for Next.js pages and layouts.\n  - Subdirectories:\n    - `(auth)/`: Authentication routes (e.g., login flows).\n    - `(routes)/`: Route-specific files (e.g., `invite/[inviteCode]/page.tsx`).\n    - `(main)/(routes)/servers/[serverId]/`: Server-specific routes and layouts.\n    - `layout.tsx`: Global layout component.\n    - `page.tsx`: Default homepage.\n\n- **`components/`**:\n  - Reusable UI components.\n  - Subdirectories:\n    - `chat/`: Chat-related components (e.g., `chat-header.tsx`, `chat-input.tsx`, `chat-messages.tsx`).\n    - Other files: `chat-video-button.tsx`, `chat-welcome.tsx`, etc.\n\n- **`modals/`**:\n  - Modal components for actions like server/channel management.\n  - Examples: `create-channel-modal.tsx`, `delete-message-modal.tsx`, `invite-modal.tsx`.\n\n- **`server/`**:\n  - Server-side logic and API routes.\n  - Files: `server-channel.tsx`, `server-header.tsx`, `server-member.tsx`, etc.\n  - Subdirectory: `ui/` (e.g., `emoji-picker.tsx`, `file-upload.tsx`).\n\n- **`ui/`**:\n  - Shared UI utilities and components.\n  - Examples: `action-tooltip.tsx`, `theme-toggle.tsx`, `user-avatar.tsx`.\n\n- **`hooks/`**:\n  - Custom React hooks for functionality (e.g., chat, state management).\n\n- **`lib/`**:\n  - Utility functions and configurations.\n  - Files: `current-profile.ts`, `db.ts`, `use-origin.ts`.\n\n- **`prisma/`**:\n  - Prisma schema and database configurations.\n  - File: `schema.prisma` (defines models like `Profile`, `Server`, `Channel`).\n\n- **`public/`**:\n  - Static assets (e.g., images, fonts).\n\n---\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js (v18 or later)\n- npm or yarn\n- CockroachDB instance\n- Clerk, LiveKit, and UploadThing API keys\n\n### Installation\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/yourusername/discord-clone.git\n   cd discord-clone\n   ```\n\n2. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Set Up Environment Variables**:\n   Create a `.env` file in the root directory and add:\n   ```\n   DATABASE_URL=\"your-cockroachdb-connection-string\"\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\"your-clerk-publishable-key\"\n   CLERK_SECRET_KEY=\"your-clerk-secret-key\"\n   LIVEKIT_API_KEY=\"your-livekit-api-key\"\n   LIVEKIT_API_SECRET=\"your-livekit-secret-key\"\n   NEXT_PUBLIC_LIVEKIT_URL=\"your-livekit-url\"\n   ```\n\n4. **Generate Prisma Client**:\n   ```bash\n   npx prisma generate\n   ```\n\n5. **Run the Development Server**:\n   ```bash\n   npm run dev\n   ```\n   Open [http://localhost:3000](http://localhost:3000) in your browser.\n\n6. **Build for Production**:\n   ```bash\n   npm run build\n   npm start\n   ```\n\n---\n\n## Contributing\n\nWe welcome contributions! Follow these steps:\n\n1. Fork the repository.\n2. Create a feature branch (`git checkout -b feature-name`).\n3. Commit your changes (`git commit -m \"Add feature-name\"`).\n4. Push to the branch (`git push origin feature-name`).\n5. Open a pull request.\n\nEnsure code adheres to the existing style and include tests for new features.\n\n---\n\n## License\n\nThis project is licensed under the **[MIT License](LICENSE)**. See the `LICENSE` file for details.\n\n---\n\n*Last updated: 03:54 PM WIB, Saturday, May 24, 2025*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendy752%2Fdiscord-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendy752%2Fdiscord-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendy752%2Fdiscord-clone/lists"}