Skip to content

Confer is a state-of-the-art video calling application built on the robust Next.js framework. Designed for modern communication needs, Confer delivers high-quality video and audio, ensuring seamless and reliable connections. Perfect for personal and professional use, Confer offers an intuitive user experience, enhanced security features.

License

Notifications You must be signed in to change notification settings

tsolutionsx/zoom-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

90 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Yoom - Modern Next.js powered Video calling app

πŸ“” Table of Contents

‼️ Folder Structure

Here is the folder structure of this app.

zoom-clone/
  |- actions/
    |- stream.actions.ts
  |- app/
    |-- (auth)/
        |--- sign-in/[[...sign-in]]/
        |--- sign-up/[[...sign-up]]/
    |-- (root)/
        |--- (home)
        |--- meeting
        |--- layout.tsx
    |-- 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
  |- public/
    |-- icons/
    |-- images/
  |- scripts/
    |-- prod.ts
    |-- reset.ts
    |-- seed.ts
  |- store/
    |-- use-exit-modal.ts
    |-- use-hearts-modal.ts
    |-- use-practice-modal.ts
  |- types/
    |-- canvas.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.js
  |- .gitignore
  |- .prettierrc.json
  |- components.json
  |- environment.d.ts
  |- middleware.ts
  |- next.config.mjs
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- 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

# 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.
  1. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

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

πŸ“· Screenshots

Modern UI/UX

Upcoming Meetings

View Recordings

βš™οΈ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel

πŸ”§ Stats

Stats for Yoom

πŸ™Œ 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 Yoom.

πŸ“š Learn More

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

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

πŸ“ƒ 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!

⭐ Give A Star

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


(back to top)

About

Confer is a state-of-the-art video calling application built on the robust Next.js framework. Designed for modern communication needs, Confer delivers high-quality video and audio, ensuring seamless and reliable connections. Perfect for personal and professional use, Confer offers an intuitive user experience, enhanced security features.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published