Zoom-Clone using NextJS-14, Clerk, TailwindCSS, StreamSDK
Tags: nextjs, tailwindcss, webdev, development
Published: 2024-05-01 16:55:39

## Importance of Video Conferencing Applications:
In an era marked by remote work and virtual communication, the significance of video conferencing applications cannot be overstated. Especially in the wake of the global pandemic, these platforms have become essential tools for businesses, educational institutions, and individuals alike. Facilitating real-time communication, collaboration, and connection across distances, they bridge the gap between physical and digital interactions.

## Development Tools:
For the development of my Zoom clone application, I leveraged a stack comprising **Next.js**, a popular React framework, provided a solid foundation for building a dynamic and responsive user interface. **Clerk**, with its authentication and user management features, ensured secure access to our application. **TailwindCSS**, streamlined the styling process with its utility-first approach, **Shadcn** for utilizing built-in components, while **StreamSDK** empowered us to integrate video streaming capabilities seamlessly.

## NextJS Project Structure:


![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7s1ngk5yo1sx8aullg6.png)

This is the basic Folder Structure of our Application utilizing the NextJS App Router.
 
- 
`.env.local` includes the Environment variables. 

- `components` folder contains the UI reusable components and also contains the components from Shadcn.

- 
`actions` folder that ensures secure communication between my application and the Stream service. **For Example**: generating authentication tokens for interacting with the Stream service.

- 
`constants` folder to store the constants used throughout the application, centralizing configuration values and avoiding hard-coded literals.

- `hooks` folder to store the custom React Hooks.

- `public` folder that contains the images and icons used in my application.


## Project Functionalities:

## Creating a New Meeting

![Create Instant Meeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl2fzb5czzstcwju6ozo.png)



![Meeting Created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/837j97kdiodop8kk2ou1.png)


Users can Start a New meeting by simply clicking on the **Start Meeting** button. I have used the shadcn **dialog** component.
Here is a Summary of this feature:

- 
**Generate Call ID**:
It generates a random (id) to serve as the unique identifier for the call.

- 
**Create Call Object**:
Using the Stream client, it creates a new call object with the generated ID.

- 
**Handle Call Creation**:
If the call object is successfully created, the function proceeds to set the starting time of the meeting.

- 
**Update Call Details and Redirect**:
Upon successful creation of the call, the function updates the state with the newly created call object. It redirects the user to the meeting page using Next.js router.

- 
**Display Feedback**:
Finally, the function displays a toast notification, indicating that the meeting has been successfully created.



## Scheduling a Meeting

![Schedule Meeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9lg5il2wgbtsqz490h8.png)



![Upcoming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la60sgfkt3gz23ei5y1c.png)


![Upcoming Meeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s79jghzc0jsd1f051u0y.png)


The application allows users to schedule future meetings by adding the description of the Meeting and the Scheduled Time. 
Here is a Summary of this feature:

- **Preparation**
Check if a user is logged in and if the Stream client is available
then generate a random id to serve as the unique identifier for the call.

- **Call Creation**
Utilizes the Stream client to create a new call object with the generated ID.

- **Handling Call Creation**
If the call object is successfully created, it proceeds to set the starting time of the meeting and sets the meeting description based on user input.

- **Display Feedback**
If the meeting is successfully scheduled, it displays a toast notification indicating that the meeting has been created.


## Joining Meeting

![Join Meeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9iqkzxp9m1l7ii2u2us.png)
The user is asked to enter the Meeting Link they want to join, and upon entering the meeting link they are directed to the meeting Room through NextJS router.



## View Recordings

![Recordings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evumbnwveti60ygl80xb.png)

Users can keep track of their Recorded Meetings and view the recorded Meeting anytime.
Here is a Summary of this feature:

- **Data Retrieval**
The application utilizes the custom hook to fetch call data and filter call recordings to extract relevant information for display.

- **User Interface**
Renders meeting cards for each recorded meeting, providing details such as meeting ID, start date/time, and options to play or start the meeting.



## Conclusion:

Developing a Zoom clone using Next.js, Clerk, TailwindCSS, and StreamSDK has been an enriching experience. Through this project, I've delved into the realm of video conferencing applications, understanding their importance in today's digitally connected world. From scheduling meetings to joining them seamlessly, every functionality has been meticulously crafted to ensure a smooth user experience.

With the powerful combination of Next.js for robust frontend development, Clerk for secure authentication, TailwindCSS for efficient styling, and StreamSDK for seamless video streaming, this application stands as a testament to the capabilities of modern web development tools and frameworks.

GitHub repository: [github.com/Faareh-Ahmed/Zoom-Clone](https://github.com/Faareh-Ahmed/Zoom-Clone)

## Connect with Me:
If you found this project insightful or have any questions, feel free to connect with me on social media:

**LinkedIn**: [linkedin.com/in/faareh-ahmed](https://www.linkedin.com/in/faareh-ahmed/)
**GitHub**: [github.com/Faareh-Ahmed](https://github.com/Faareh-Ahmed)

I'm always open to feedback and collaboration. Let's connect and continue the conversation!