🎬 WeTube – Video Browsing App

🔗 Live Demo: https://we-tube-sage.vercel.app/

---

📌 Overview

WeTube is a responsive frontend practice project inspired by YouTube, built using HTML, Tailwind CSS, DaisyUI, and Vanilla JavaScript.

The application allows users to:

• Browse videos by category
• Search videos by title
• Sort videos by view count
• Open a dedicated watch page for each video

This project focuses heavily on DOM manipulation, API integration, responsive UI design, state handling, and clean JavaScript logic—without using any frameworks.

⚠️ Note: The API used provides video metadata only, not real video streams.
Therefore, actual video playback is simulated using a blurred thumbnail and overlay message.

---

🛠 Tech Stack

• HTML5
• Tailwind CSS (CDN)
• DaisyUI
• Vanilla JavaScript (DOM Manipulation & Fetch API)

---

🎨 Design & Development Concepts

• Mobile-first responsive design
• Flexbox & CSS Grid layouts
• Conditional rendering with JavaScript
• API data fetching and state management
• Reusable helper functions
• Graceful UI fallback for unavailable features
• Clean, readable, and maintainable code structure

---

✨ Features

🔍 Video Browsing

• Fetch videos from external API
• Display thumbnail, title, author, and views
• Dedicated Watch page for each video

🗂 Category System

• Desktop: Horizontal category buttons
• Mobile: Category dropdown menu
• Category-wise video filtering
• “All” category selected by default on first load

🔎 Search & Sort

• Real-time search by video title
• Sort videos by view count

📱 Responsive UI

• Mobile, tablet, and desktop friendly layout
• Adaptive grid system for video cards
• Touch-friendly buttons and dropdowns

🎬 Watch Page

• Separate video.html page
• Blurred thumbnail used as background
• Overlay message for unavailable video playback
• Video details: title, author, views, description
• Back navigation to home page

---

📱 Responsiveness Breakdown

Mobile

• Stacked header layout
• Category dropdown instead of buttons
• Single-column video grid

Tablet

• Two-column video grid
• Improved spacing and readability

Desktop

• Horizontal category navigation
• Multi-column video grid (up to 4 columns)
• Full search and sort controls

---

📁 Project Structure

WeTube/
├── assets/
│ ├── Logo.png
│ └── Icon.png
├── script/
│ └── index.js
├── index.html
├── video.html
└── README.md

---

🚀 Getting Started

• Clone or download the repository
• Open index.html in your browser

or

• Visit the live demo using the link above

---

🧠 Learning Objectives

This project was built to practice and understand:

• JavaScript DOM manipulation
• Fetch API & async data handling
• Handling UI state (active category, sorting, search)
• Responsive design using Tailwind CSS
• Mobile UX patterns (dropdown navigation)
• Graceful handling of API limitations
• Writing clean, structured Vanilla JS

---

📝 Notes

• Frontend-only practice project
• No backend or database is used
• Built entirely with Vanilla JavaScript (no JS frameworks)
• Uses an external public API for video metadata
• The API provides only video metadata (title, thumbnail, views, description)
• Real video playback is not available due to API limitations
• A blurred thumbnail with overlay message is used as a graceful UI fallback
• Intended for learning purposes and portfolio demonstration

---

📈 Future Improvements

• Integrate YouTube Data API for real video playback
• Add pagination or infinite scrolling
• Improve loading experience using skeleton loaders
• Persist last selected category using localStorage
• Enhance accessibility (ARIA roles, keyboard navigation)
• Refactor JavaScript into ES modules

---

💡 Learning-by-Doing Project
📌 DOM & API Focused
🚀 Step Toward Real-World Frontend Development