YouTube Clone

A responsive YouTube clone built with React, TypeScript, and Tailwind CSS that replicates core YouTube UI features.

Features

• 🎥 Video Grid Layout - Responsive grid of video thumbnails
• 📱 Mobile Responsive - Adapts seamlessly across devices
• 🎨 Custom UI Components - Pixel-perfect recreation of YouTube's UI
• 🎬 Video Preview - Hover preview functionality
• 📋 Category Navigation - Horizontal scrollable category pills
• 🔍 Search Integration - Fully functional search bar
• ⚡ Performance Optimized - Efficient rendering and animations

Tech Stack

• Framework: React 18
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Utilities:
  • class-variance-authority
  • tailwind-merge
  • Vite

Getting Started

Prerequisites

• Node.js 16+
• npm/yarn

Installation

1. Clone the repository

git clone git@github.com:Zeyu-Chen/Webtube.git
cd Webtube

2. Install dependencies

npm install

3. Start the development server

npm run dev

Project Structure

src/
├── assets/     # Static assets
├── components/ # Reusable UI components
├── contexts/   # React context providers
├── data/       # Mock data
├── layouts/    # Layout components
├── utils/      # Utility functions

Key Components

Video Grid

• Responsive grid layout
• Hover preview functionality
• View count formatting
• Time ago formatting

Sidebar

• Collapsible navigation
• Responsive design
• Category organization

Category Pills

• Horizontal scrolling
• Active state management
• Smooth animations