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

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env file in root directory.
4. 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

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.

10. App Base URL:

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

11. 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.

12. Save and Secure:

    • Save the changes to the .env.local file.

13. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

14. 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.

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.

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

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!

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

1. 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.

2. Connect Repository:

   • Connect your project repository (e.g., GitHub, GitLab, Bitbucket) to Railway.

3. 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.

4. 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.

5. Deploy:

   • Trigger the deployment process either from Railway's dashboard or through their CLI.

6. Monitor Deployment:

   • Once deployed, monitor the deployment process and check for any errors or warnings in Railway's dashboard.

7. 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.

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

(back to top)