1. 🚀 Project Overview

This project is a highly clone of a video conferencing application (like Zoom), developed as a MERN stack-style exercise to master real-time communication technologies, modern web patterns (App Router), and third-party API integration.

My core focus for this submission was demonstrating:

• Full-Stack Integration: Seamlessly connecting the frontend (Next.js/React) with real-time backend services (Clerk/Stream).
• Authentication & Authorization: Implementing secure user management using Clerk.
• Real-Time API Usage: Utilizing the Stream API for video, audio, and participant management.

---

2. 💡 Originality and Acknowledgment

To ensure academic honesty and fully credit the educational source, this project was developed by meticulously following an in-depth tutorial.

2.1 Acknowledgment

The foundational architecture, UI components, and initial setup logic are based on the tutorial: "Build and Deploy an Advanced Zoom Clone" by JavaScript Mastery (Adrian Hajdin).

2.2 My Contributions & Demonstrated Understanding

While the core features mirror the tutorial, the implementation was coded from scratch by me to internalize the logic. My personal contributions and demonstration of understanding include:

• Custom Styling & Themework: Implemented a new custom color palette by modifying the tailwind.config.ts file to ensure unique branding. (Example: Changed the primary button color from blue-1 to a new hex value in the config).
• Component Refactoring (Focus Area): Reorganized the logic within the MeetingCard.tsx component to better handle state for dynamic buttons, demonstrating component-level ownership.
• Environment Setup Mastery: Successfully configured and managed the project dependencies, including downgrading from Next.js 15 to Next.js 14.1.3 to achieve environment stability for development.
• Code Commentary: Added detailed comments to complex API interaction files (e.g., Stream client initialization) to prove comprehension of the asynchronous data flow.

---

3. ⚙️ Tech Stack

This project is built on the following technologies:

• Frontend Framework: Next.js 14.1.3 (App Router) & React 18 (Purpose: High-performance, Server-Side Rendered React application).
• Styling: Tailwind CSS 3 & shadcn/ui (Purpose: Rapid, utility-first styling and reusable components).
• Authentication: Clerk (Purpose: Secure, full-featured user authentication and management).
• Video/Real-Time: getstream (Stream API) (Purpose: Backend service for handling real-time video, audio, and room logic).
• Language: TypeScript (Purpose: Type safety and improved developer experience).

---

4. 🔋 Key Features

• Secure Authentication (via Clerk): Seamless log-in/log-out with robust security.
• Instant Meeting Creation: Start an ad-hoc meeting with a unique, shareable link.
• Scheduled Meetings: Plan future meetings with date/time selection.
• Personal Room: A permanent, dedicated meeting link for immediate use.
• Meeting Controls: Full in-meeting functionality (Mute/Unmute, Screen Share, Recording, Participant List).
• Past & Upcoming Views: Dedicated pages to track meeting history and future schedules.

---

5. 🤸 Quick Start (Local Deployment)

Follow these steps to run the application locally.

Prerequisites

• Git
• Node.js (v18.0 or higher is recommended for Next.js 14)
• npm (Node Package Manager)

Installation

1. Clone the Repository (Using your new GitHub URL)

   git clone https://github.com/Shreenath-14/zoom-clone
   cd yoom

2. Install Dependencies

   npm install

Environment Variables

1. Create a file named .env in the root of your project.

2. Obtain credentials from Clerk and getstream and add them here:

   # CLERK Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_live_...
   CLERK_SECRET_KEY=sk_live_...
   
   # STREAM Video API
   NEXT_PUBLIC_STREAM_API_KEY=YOUR_STREAM_KEY
   STREAM_SECRET_KEY=YOUR_STREAM_SECRET
   
   # Clerk URLs (Optional, usually default)
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Running the Project

npm run dev

The application will be accessible at http://localhost:3000.