Discord Clone

Real-time chat, voice, and community features in a modern, scalable Next.js 14-powered platform.

#clerk #dark-theme #discord #discord-clone #neondb #next #nextjs #postgresql #railway #railway-app

Demo Download

Discord Clone - Real-time chat, voice, and community features in a modern, scalable Next.js 14-powered platform.

:notebook_with_decorative_cover: Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Deploy on Railway
Give A Star
Star History
Give A Star

:bangbang: Folder Structure

Here is the folder structure of this app.

discord-clone/
  |- actions/
    |- challenge-progress.ts
    |- user-progress.ts
    |- user-subscription.ts
  |- app/
    |-- (auth)/
        |--- (routes)/
            |---- account/
            |---- sign-in/
            |---- sign-up/
        |--- layout.tsx
    |-- (invite)/(routes)/invite/[inviteCode]/
    |-- (main)/
        |--- (routes)/servers/[serverId]/
            |---- channels/[channelId]/
            |---- conversations/[memberId]/
            |---- layout.tsx
            |---- page.tsx
        |--- layout.tsx
    |-- (setup)/
        |--- page.tsx
    |-- api/
        |--- channels/
        |--- direct-messages/
        |--- livekit/
        |--- members/
        |--- messages/
        |--- servers/
        |--- uploadthing/
    |-- apple-icon.png
    |-- error.tsx
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
    |-- loading.tsx
    |-- not-found.tsx
  |- components/
    |-- chat/
    |-- clerk/
    |-- modals/
    |-- navigation/
    |-- providers/
    |-- server/
    |-- ui/
    |-- action-tooltip.tsx
    |-- emoji-picker.tsx
    |-- file-upload.tsx
    |-- media-room.tsx
    |-- mobile-toggle.tsx
    |-- mode-toggle.tsx
    |-- socket-indicator.tsx
    |-- user-avatar.tsx
  |- config/
    |-- index.ts
  |- hooks/
    |-- use-chat-query.ts
    |-- use-chat-scroll.ts
    |-- use-chat-socket.ts
    |-- use-modal-store.ts
    |-- use-origin.ts
  |- lib/
    |-- conversation.ts
    |-- current-profile-page.ts
    |-- current-profile.ts
    |-- db.ts
    |-- initial-profile.ts
    |-- uploadthing.ts
    |-- utils.ts
  |- pages/api/socket/
    |-- direct-messages/
    |-- messages/
    |-- io.ts
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- github.png
    |-- logo.png
  |- .env
  |- .env.example
  |- .eslintrc.js
  |- .gitignore
  |- .prettierrc.json
  |- components.json
  |- constants.ts
  |- drizzle.config.ts
  |- environment.d.ts
  |- middleware.ts
  |- next.config.mjs
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

:toolbox: Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
Contents of .env:

# .env

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk redirect urls
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=/

# neon databse url
DATABASE_URL="postgresql://<user>:<password>@<host>:<post>/discord-clone?sslmode=require"

# uploading api key and app id
UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=xxxxxxxxxxxxx

# app base url
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# livekit api keys and public url
LIVEKIT_API_KEY=XXXXXXXXXXXXXXXXX
LIVEKIT_API_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_LIVEKIT_URL=wss://discord-clone-xxxxxxxxxx.livekit.cloud

Next.js Telemetry Disabled:
- Visit the Next.js documentation or repository.
- Find the instructions to disable telemetry.
- Set NEXT_TELEMETRY_DISABLED to 1 in your .env file.
Clerk Authentication Keys:
- Go to the Clerk website and sign in to your account.
- Navigate to the settings or API keys section.
- Generate or locate your Clerk publishable and secret keys.
- Set NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY accordingly in the .env file.
Clerk Redirect URLs:
- Refer to the Clerk documentation or settings.
- Set the required URLs for sign-in, sign-up, after sign-in, and after sign-up.
- Assign these URLs to NEXT_PUBLIC_CLERK_SIGN_IN_URL, NEXT_PUBLIC_CLERK_SIGN_UP_URL, NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL, and NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL respectively in the .env file.
Neon Database URL:
- Access your database provider (e.g., PostgreSQL).
- Retrieve the necessary connection details such as username, password, host, and port.
- Construct the database URL using the obtained information and SSL mode.
- Assign the constructed URL to DATABASE_URL in the .env file.
Uploading API Key and App ID:
- Go to the UploadThing website or application.
- Find the section for API keys or account settings.
- Generate or locate your secret key and app ID.
- Set UPLOADTHING_SECRET and UPLOADTHING_APP_ID in the .env file accordingly.
App Base URL:

Determine the base URL of your application.
Set NEXT_PUBLIC_BASE_URL to the base URL in the .env file.

Livekit API Keys and Public URL:

Visit the Livekit website or dashboard.
Navigate to API settings or keys section.
Generate or locate your API key and secret.
Set LIVEKIT_API_KEY, LIVEKIT_API_SECRET, and NEXT_PUBLIC_LIVEKIT_URL in the .env file according to the obtained information.

Save and Secure:
- Save the changes to the .env.local file.
Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

:camera: Screenshots

Modern UI/UX

Video Conferencing

One-on-one Chat

:gear: Tech Stack

:wrench: Stats

:raised_hands: Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

:gem: Acknowledgements

Useful resources and dependencies that are used in Discord Clone.

Thanks to CodeWithAntonio: https://codewithantonio.com/
@clerk/nextjs: ^4.29.9
@clerk/themes: ^1.7.10
@emoji-mart/data: ^1.1.2
@emoji-mart/react: ^1.1.1
@hookform/resolvers: ^3.3.4
@livekit/components-react: ^2.0.5
@livekit/components-styles: ^1.0.11
@prisma/client: ^5.11.0
@radix-ui/react-avatar: ^1.0.4
@radix-ui/react-dialog: ^1.0.5
@radix-ui/react-dropdown-menu: ^2.0.6
@radix-ui/react-label: ^2.0.2
@radix-ui/react-popover: ^1.0.7
@radix-ui/react-scroll-area: ^1.0.5
@radix-ui/react-select: ^2.0.0
@radix-ui/react-separator: ^1.0.3
@radix-ui/react-slot: ^1.0.2
@radix-ui/react-tooltip: ^1.0.7
@tanstack/react-query: ^4.35.3
@uploadthing/react: ^6.4.1
axios: ^1.6.8
class-variance-authority: ^0.7.0
clsx: ^2.1.0
cmdk: ^1.0.0
date-fns: ^3.6.0
emoji-mart: ^5.5.2
livekit-server-sdk: ^2.1.2
lucide-react: ^0.363.0
next: 14.1.4
next-themes: ^0.3.0
query-string: ^9.0.0
react: ^18
react-dom: ^18
react-hook-form: ^7.51.1
socket.io: ^4.7.5
socket.io-client: ^4.7.5
tailwind-merge: ^2.2.2
tailwindcss-animate: ^1.0.7
uploadthing: ^6.7.0
uuid: ^9.0.1
zod: ^3.22.4
zustand: ^4.5.2
@types/node: ^20
@types/react: ^18
@types/react-dom: ^18
@types/uuid: ^9.0.8
autoprefixer: ^10.0.1
eslint: ^8
eslint-config-next: 14.1.4
postcss: ^8
prisma: ^5.11.0
tailwindcss: ^3.3.0
typescript: ^5

:coffee: Buy Me a Coffee

:rocket: Follow Me

:books: Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

:page_with_curl: Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

:page_with_curl: Deploy on Railway

Deploying your Next.js app on Railway.app is simple and straightforward.

Sign up or Log in:
- Head over to Railway.app and either sign up for a new account or log in to your existing one.
Connect Repository:
- Connect your project repository (e.g., GitHub, GitLab, Bitbucket) to Railway.
Configure Environment Variables:
- Set up your environment variables in Railway's dashboard or using their CLI. Ensure you include all required variables as per your project's configuration.
Set Up Build Command:
- Configure your build command to ensure Railway can build and deploy your Next.js app correctly. Typically, this command will be yarn build or npm run build.
Deploy:
- Trigger the deployment process either from Railway's dashboard or through their CLI.
Monitor Deployment:
- Once deployed, monitor the deployment process and check for any errors or warnings in Railway's dashboard.
Custom Domain (Optional):
- If you have a custom domain, you can set it up with Railway to point to your deployed Next.js app.

For more detailed instructions or troubleshooting, refer to Railway documentation.

:star: Give A Star

You can also give this repository a star to show more people and they can use this repository.

:star2: Star History

(back to top)

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce