Collaborate with your team in this Slack clone built using Next.js

📔 Table of Contents

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

‼️ Folder Structure

Here is the folder structure of this app.

slack-clone/
  |- convex/
    |-- _generated/
    |-- auth.config.ts
    |-- auth.ts
    |-- channels.ts
    |-- conversations.ts
    |-- http.ts
    |-- members.ts
    |-- messages.ts
    |-- reactions.ts
    |-- README.md
    |-- schema.ts
    |-- tsconfig.json
    |-- upload.ts
    |-- users.ts
    |-- workspaces.ts
  |- public/
    |-- logo.svg
  |- src/
    |-- app/
        |--- auth/
        |--- join/
        |--- workspace/
        |--- apple-icon.png
        |--- favicon.ico
        |--- globals.css
        |--- icon1.png
        |--- icon2.png
        |--- layout.tsx
        |--- page.tsx
    |-- components/
        |--- ui/
        |--- channel-hero.tsx
        |--- conversation-hero.tsx
        |--- convex-client-provider.tsx
        |--- editor.tsx
        |--- emoji-popover.tsx
        |--- hint.tsx
        |--- jotai-provider.tsx
        |--- message-list.tsx
        |--- message.tsx
        |--- modal-provider.tsx
        |--- reactions.tsx
        |--- renderer.tsx
        |--- thread-bar.tsx
        |--- thumbnail.tsx
        |--- toolbar.tsx
    |-- config/
        |--- index.ts
    |-- features/
        |--- auth/
        |--- channels/
        |--- conversations/
        |--- members/
        |--- messages/
        |--- reactions/
        |--- upload/
        |--- workspaces/
    |-- hooks/
        |--- use-channel-id.ts
        |--- use-confirm.tsx
        |--- use-member-id.ts
        |--- use-panel.ts
        |--- use-workspace-id.ts
    |-- lib/
        |--- utils.ts
    |-- middleware.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- .prettierrc.mjs
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- next-env.d.ts
  |- next.config.mjs
  |- package.json
  |- postcss.config.js
  |- README.md
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

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

# .env.local

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# deployment used by `npx convex dev` or `bunx convex dev`
CONVEX_DEPLOYMENT=dev:<deployment-name> # team: <team-name>, project: <project-name>

# convex public url
NEXT_PUBLIC_CONVEX_URL="https://<deployment-name>.convex.cloud"

5. Convex Deployment

• Visit the Convex website: https://convex.dev
• Log in to your Convex account or sign up if you don't have one.
• Once logged in, navigate to the "Deployments" section.
• Create a new deployment or select an existing one.
• Replace <deployment-name>, <team-name>, and <project-name> in the .env.local file with your Convex deployment details.
• In the Convex dashboard, find the public URL associated with your deployment.
• Replace <your-convex-url> in the .env.local file with your Convex public URL.

6. Initialise Convex Auth Development Keys

• Run the initialization command: npx @convex-dev/auth or bunx @convex-dev/auth to setup your project for authenticating via the library.
• Make sure your SITE_URL environment variable is set correctly. This is the URL where your app is hosted, e.g., http://localhost:3000 for development.
• Your project authentication is setup for logging in with credentials.

7. Setting Up Google OAuth

Step 1: Create a Google Cloud Project

• Go to the Google Cloud Console.
• Create a new project (if you don’t have one) by clicking on Select a project > New Project, and give it a name.
• Enable the Google OAuth 2.0 API by navigating to APIs & Services > Library and searching for Google OAuth 2.0.

Step 2: Create OAuth Credentials

• In the APIs & Services > Credentials section, click Create Credentials and choose OAuth 2.0 Client IDs.

• Select Web Application as the application type.

• Set the Authorized Redirect URI to your Convex callback URL. The origin (domain) of the callback URL is your Convex backend's HTTP Actions URL. You can find it in your Convex dashboard and it is similar to your CONVEX_URL, but with .site instead of .cloud.

• After setting the redirect URI, click Create. You’ll be provided with a Client ID and Client Secret.

Step 3: Set Google OAuth Environment Variables in Convex To configure Google OAuth in your Convex backend, run the following commands with your actual values:

npx convex env set AUTH_GOOGLE_CLIENT_ID your-google-client-id
npx convex env set AUTH_GOOGLE_CLIENT_SECRET your-google-client-secret

OR

bunx convex env set AUTH_GOOGLE_CLIENT_ID your-google-client-id
bunx convex env set AUTH_GOOGLE_CLIENT_SECRET your-google-client-secret

8. Setting Up GitHub OAuth

Step 1: Create a GitHub OAuth Application

• Go to GitHub Developer Settings.

• Under OAuth Apps, click New OAuth App.

• Fill in the following:

  • Application Name: Name your app (e.g., "Slack Clone").
  • Homepage URL: Your app’s homepage URL, like http://localhost:3000 for local development.
  • Authorization Callback URL: Set this to your Convex callback URL (Similar to Google OAuth Authorized Redirect URI).

• After registering the app, you’ll get a Client ID and Client Secret.

Step 2: Set GitHub OAuth Environment Variables in Convex

• To configure GitHub OAuth in your Convex backend, run the following commands with your actual values:

npx convex env set AUTH_GITHUB_ID your-github-client-id
npx convex env set AUTH_GITHUB_SECRET your-github-client-secret

OR

bunx convex env set AUTH_GITHUB_ID your-github-client-id
bunx convex env set AUTH_GITHUB_SECRET your-github-client-secret

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

10. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun dev.

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

📷 Screenshots

⚙️ Tech Stack

🔧 Stats

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

💎 Acknowledgements

Useful resources and dependencies that are used in Slack Clone.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @auth/core: ^0.34.2
• @convex-dev/auth: ^0.0.65
• @radix-ui/react-alert-dialog: ^1.1.1
• @radix-ui/react-avatar: ^1.1.0
• @radix-ui/react-dialog: ^1.1.1
• @radix-ui/react-dropdown-menu: ^2.1.1
• @radix-ui/react-popover: ^1.1.1
• @radix-ui/react-separator: ^1.1.0
• @radix-ui/react-slot: ^1.1.0
• @radix-ui/react-tooltip: ^1.1.2
• @radix-ui/react-visually-hidden: ^1.1.0
• class-variance-authority: ^0.7.0
• clsx: ^2.1.1
• cmdk: 1.0.0
• convex: ^1.15.0
• date-fns: ^4.1.0
• emoji-picker-react: ^4.12.0
• jotai: ^2.9.3
• lucide-react: ^0.439.0
• next: 14.2.8
• next-themes: ^0.3.0
• nuqs: ^1.19.1
• quill: ^2.0.2
• react: ^18
• react-dom: ^18
• react-icons: ^5.3.0
• react-resizable-panels: ^2.1.2
• react-use: ^17.5.1
• react-verification-input: ^4.1.2
• sonner: ^1.5.0
• tailwind-merge: ^2.5.2
• tailwindcss-animate: ^1.0.7
• @babel/eslint-parser: ^7.25.1
• @trivago/prettier-plugin-sort-imports: ^4.3.0
• @types/node: ^20
• @types/react: ^18
• @types/react-dom: ^18
• eslint: ^8
• eslint-config-next: 14.2.8
• eslint-config-prettier: ^9.1.0
• eslint-plugin-prettier: ^5.2.1
• postcss: ^8
• prettier-plugin-tailwindcss: ^0.6.6
• tailwindcss: ^3.4.1
• typescript: ^5

☕ Buy Me a Coffee

🚀 Follow Me

📚 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!

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

⭐ Give A Star

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

🌟 Star History

(back to top)