Yoom - Modern Next.js powered Video calling app

:bangbang: Folder Structure

Here is the folder structure of this app.

zoom-clone/
  |- actions/
    |-- stream.actions.ts
  |- app/
    |-- (auth)/
    |-- (root)/
    |-- apple-icon.png
    |-- favicon.ico
    |-- globals.css
    |-- icon1.png
    |-- icon2.png
    |-- layout.tsx
  |- components/
    |-- modals/
    |-- ui/
    |-- call-list.tsx
    |-- end-call-button.tsx
    |-- home-card.tsx
    |-- loader.tsx
    |-- meeting-card.tsx
    |-- meeting-room.tsx
    |-- meeting-setup.tsx
    |-- meeting-type-list.tsx
    |-- mobile-nav.tsx
    |-- navbar.tsx
    |-- sidebar.tsx
  |- config/
    |-- index.ts
  |- constants/
    |-- index.ts
  |- hooks/
    |-- use-get-call-by-id.ts
    |-- use-get-calls.ts
  |- lib/
    |-- utils.ts
  |- providers/
    |-- stream-client-provider.tsx
  |- public/
  |- types/
    |-- styles.d.ts
  |- .env.example
  |- .env/.env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- middleware.ts
  |- netlify.toml
  |- next.config.mjs
  |- package.json
  |- postcss.config.mjs
  |- tsconfig.json

:toolbox: 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

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk auth redirect urls
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# stream api keys
NEXT_PUBLIC_STREAM_API_KEY=xxxxxxxxxxxxxxxxxxxxxx
STREAM_SECRET_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

5. Obtain Clerk Authentication Keys

1. Source: Clerk Dashboard or Settings Page
2. Procedure:
   • Log in to your Clerk account.
   • Navigate to the dashboard or settings page.
   • Look for the section related to authentication keys.
   • Copy the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY provided in that section.

6. Specify Public App URL

1. Procedure:
   • Replace http://localhost:3000 with the URL of your deployed application.

7. Set Up Stream

1. Create a Stream Account:

   • If you don't have a Stream account, sign up at GetStream.io.

2. Create a New App:

   • After logging in, navigate to the Stream dashboard.
   • Click on "Create App" to set up a new application for Zoom-Clone.
   • Provide a name for your app and select the appropriate region.

8. Obtain the Stream API Key and Secret Key

1. Navigate to the App Settings:

   • In your Stream dashboard, select the app you created for Zoom-Clone.
   • Go to the "Overview" or "Keys" section.

2. Copy the API Key:

   • You will find the "API Key" listed in the app details. Copy this key.

3. Copy the Secret Key:

   • In the same section, you will find the "Secret Key". Copy this key as well.

9. Save and Secure:

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

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

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

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

• @clerk/nextjs: ^5.7.5
• @radix-ui/react-dialog: ^1.1.15
• @radix-ui/react-dropdown-menu: ^2.1.16
• @radix-ui/react-slot: ^1.2.4
• @radix-ui/react-toast: ^1.2.15
• @stream-io/node-sdk: ^0.7.59
• @stream-io/video-react-sdk: ^1.36.0
• @tailwindcss/postcss: ^4.2.4
• @types/node: ^25
• @types/react: ^19
• @types/react-datepicker: ^7.0.0
• @types/react-dom: ^19
• class-variance-authority: ^0.7.1
• clsx: ^2.1.1
• eslint: ^9.0.0
• eslint-config-next: 15.5.18
• eslint-plugin-unused-imports: ^4.4.1
• lucide-react: ^1.14.0
• next: 15.5.18
• postcss: ^8.5.13
• prettier: ^3.8.1
• prettier-plugin-tailwindcss: ^0.8.0
• react: ^19
• react-datepicker: ^8.10.0
• react-dom: ^19
• tailwind-merge: ^3.6.0
• tailwindcss: ^4.3.0
• tailwindcss-animate: ^1.0.7
• typescript: ^6.0.3

: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 Netlify

The simplest way to deploy your React.js app is to use the Netlify Platform - a powerful platform for modern web projects.

Explore the Netlify deployment documentation for step-by-step instructions on deploying your React.js app on Netlify.

Happy coding, and feel free to share your thoughts and improvements with the Netlify community!

: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)