YouTube Live Clone

A livestreaming platform that recreates the creator and viewer experience of YouTube Live.
Built with Next.js, TypeScript, TailwindCSS, Clerk, and Stream’s Video and Chat SDKs, this application allows creators to start livestreams from a studio interface while viewers can browse, join, and chat in real time.

Table of Contents

• Features
• Demo
• Prerequisites
• Installation
• Usage
• Technologies Used

Features

Creator Studio

• Start and manage livestreams
• Configure stream title and description
• Real-time broadcast powered by Stream Video
• Live chat panel for interacting with viewers

Viewer Experience

• Browse active livestreams
• Join streams in real time
• Participate in live chat
• Viewer count and “Live” status indicators

Core Functionality

• Authentication with Clerk
• Stream Chat for synchronized messaging
• TailwindCSS for consistent and responsive UI
• Clean, creator-focused interface similar to YouTube Studio

Demo

Visit https://youtube-live-clone.vercel.app/

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Stream Account: https://getstream.io/
• Clerk Account: https://clerk.com/

Installation

1. Clone the Repository

git clone https://github.com/yourusername/youtube-live-clone.git
cd youtube-live-clone

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Stream

• Create a new Stream app
• Enable Video and Chat
• Retrieve your API key and secret

4. Set Up Clerk

• Create a Clerk project
• Add your publishable and secret keys

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_STREAM_API_KEY=your_stream_api_key
STREAM_SECRET=your_stream_secret
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

Usage

Start the development server:

npm run dev
# or
yarn dev

Visit http://localhost:3000.

Creator Flow

• Sign in
• Open the Creator Studio
• Start a livestream

Viewer Flow

• Browse available livestreams
• Join a stream
• Watch and participate through live chat

Technologies Used

• Next.js
• TypeScript
• TailwindCSS
• Stream Video SDK
• Stream Chat SDK
• Clerk