YouTube Clone 🎬

A modern YouTube replica built with React.js, HTML, CSS, and JavaScript.

---

🚀 Overview

YouTube Clone replicates core features of YouTube—video browsing, search, and playback—in a clean and responsive React.js application. It's perfect for learning and demonstrating modern UI patterns, component architecture, and API handling.

---

✨ Features

• 📺 Homepage with responsive video grid
• 🔍 Search bar for instant video lookup
• 🗂️ Sidebar navigation (Home, Subscriptions, Trending, etc.)
• 🎥 Single video page (player, details, comments, likes)
• 🌓 Dark/Light mode toggle
• 🖱️ Interactive UI with animated components
• 🔑 Authentication (optional/dummy)
• ⚡ Fast & responsive (mobile-friendly design)

---

🛠 Tech Stack

Technology	Role
React.js	UI & routing
HTML5	Structure
CSS3	Styling
JavaScript	Logic, state management
React Router	Page navigation
Material UI/Tailwind	Components

---

📁 Project Structure

src/
├── components/
│   ├── Navbar.js
│   ├── Sidebar.js
│   ├── VideoGrid.js
│   ├── VideoPlayer.js
│   ├── CommentSection.js
├── pages/
│   ├── HomePage.js
│   ├── VideoPage.js
├── App.js
├── index.js
public/
│   ├── images/
│   └── favicon.ico

---

⚡ Getting Started

Prerequisites

• Node.js (v14.0 or later)
• npm or yarn package manager

Installation

1. Clone the repo

   git clone https://github.com/LoganthP/YoutubeClone-using-HTML-CSS-JAVASCRIPT-React.js.git
   cd YoutubeClone-using-HTML-CSS-JAVASCRIPT-React.js

2. Install dependencies

   npm install

3. Start the local server

   npm start

4. Visit http://localhost:3000

---

🚦 Scripts

• npm start — Run development mode
• npm run build — Build for production
• npm test — Run tests
• npm run eject — Eject from Create React App

---

🌟 Key Components

Navbar Component

• Search functionality
• User profile menu
• Notifications
• Upload button

Sidebar Component

• Navigation menu
• Subscriptions list
• Library sections
• Settings

Video Grid Component

• Responsive video thumbnails
• Video metadata display
• Infinite scrolling
• Loading states

Video Player Component

• HTML5 video player
• Like/dislike functionality
• Subscribe button
• Video description

---

🎨 Design Features

• Responsive Design: Mobile-first approach
• Dark/Light Theme: Toggle between modes
• Smooth Animations: CSS transitions and animations
• Modern UI: Clean, YouTube-inspired interface
• Accessibility: ARIA labels and keyboard navigation

---

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_KEY=your_youtube_api_key_here
REACT_APP_BASE_URL=https://www.googleapis.com/youtube/v3

API Integration

This project can be configured to use:

• YouTube Data API v3
• Mock JSON data
• Local video files

---

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

---

🚀 Deployment

Netlify

1. Build the project: npm run build
2. Deploy the build folder to Netlify

Vercel

1. Connect your GitHub repository
2. Vercel will automatically build and deploy

GitHub Pages

1. Install gh-pages: npm install --save-dev gh-pages
2. Add to package.json: "homepage": "https://yourusername.github.io/repository-name"
3. Deploy: npm run deploy

---

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request