📺 YouTube Clone

A fully functional YouTube-inspired frontend built with pure HTML, CSS, and JavaScript — no frameworks, no dependencies.

---

✨ Features

• Video Grid — Responsive card layout with thumbnails, duration badges, channel avatars, views, and upload time
• Video Player — Embedded YouTube iframe player inside a modal overlay with full video info
• Search — Real-time search filtering across video titles, channels, and categories
• Category Chips — Filter videos by Music, Gaming, News, Tech, Sports, Cooking, and Travel
• Sidebar Navigation — Home, Shorts, Subscriptions, History, Liked Videos, Watch Later
• Like Videos — Toggle like on any video; persisted across sessions
• Watch Later — Save/unsave videos to a personal Watch Later list
• History — Automatically tracks last 50 watched videos
• Shorts Detection — Filters videos under 60 seconds into the Shorts section
• Share — Copies the YouTube video link to clipboard
• Toast Notifications — Lightweight feedback messages for user actions
• Responsive Design — Collapsible sidebar for desktop; slide-in drawer for mobile
• Keyboard Support — Press Esc to close the video player
• Persistent State — Liked videos, Watch Later, and History saved via localStorage

---

🛠️ Tech Stack

Technology	Usage
HTML5	Page structure and semantic layout
CSS3	Styling, grid layout, animations, responsive design
JavaScript (ES6+)	DOM manipulation, filtering, state management
Font Awesome 6.5	Icons throughout the UI
YouTube Embed API	Iframe-based video playback
localStorage	Client-side persistence for user data

---

📁 Project Structure

youtube-clone/
├── index.html      ← App structure: header, sidebar, video grid, player modal
├── style.css       ← All styling: layout, cards, player, responsive breakpoints
└── app.js          ← All logic: filtering, rendering, player, state, events

---

🚀 Getting Started

No build step or installation needed — it's plain HTML/CSS/JS.

Option 1 — Open directly:

Double-click index.html in your file explorer

Option 2 — Serve locally (recommended):

# Using Python
python3 -m http.server 5500

# Using Node.js (npx)
npx serve .

Then open http://localhost:5500 in your browser.

---

🎮 How to Use

Action	How
Browse videos	Scroll the home grid
Play a video	Click any video card
Search	Type in the top search bar and press Enter
Filter by category	Click a chip (Music, Tech, etc.)
Like a video	Click 👍 inside the player
Save for later	Click 🔖 Save inside the player
Copy share link	Click 🔗 Share inside the player
Close player	Click ✕, press Esc, or click outside the modal
Toggle sidebar	Click ☰ menu button in the header
View history	Click History in the sidebar

---

📱 Responsive Behavior

Screen Size	Sidebar Behavior
Desktop (> 900px)	Collapsible — click ☰ to expand/collapse
Mobile (≤ 900px)	Hidden by default — click ☰ to slide open as overlay

---

🗂️ Video Categories

The app includes 18 pre-loaded videos across 7 categories:

Category	Examples
Music	Rick Astley, Ed Sheeran, Adele, PSY
Tech	Python Full Course (freeCodeCamp), JavaScript Course
Gaming	Minecraft Survival
News	Breaking Headlines
Cooking	Gordon Ramsay Scrambled Eggs
Travel	Top 10 Places in Japan
Sports	Cristiano Ronaldo Top 100 Goals

---

💾 Local Storage Keys

Key	Data Stored
liked	Array of liked video IDs
watchLater	Array of saved video IDs
history	Array of watched video IDs (last 50)

---

🔮 Possible Improvements

• Fetch real videos using the YouTube Data API v3
• Add dark/light mode toggle
• Add comments section UI
• Implement subscription management
• Add infinite scroll or pagination
• Build a trending section with API data

---

👨‍💻 Author

Debargha Sikdar BCA '29 | MAKAUT | Backend Developer @ UptoSkills LinkedIn