📺 Advanced Technical Video Feed

A professional, high-performance video dashboard that integrates the YouTube Data API v3 to display a live feed of project demos and technical content.

---

🚀 Key Features

• Modern UI/UX: Built with a Glassmorphism aesthetic, featuring dark-mode gradients, backdrop blurs, and responsive CSS Grid layouts.
• Async Data Architecture: Leverages Async/Await and the fetch API for non-blocking data retrieval.
• Dynamic Content Filtering: Uses advanced array methods (.filter() and .map()) to clean API responses and render only valid video content.
• Responsive Media Engineering: Implemented a 16:9 Aspect Ratio container trick to ensure perfect video scaling across mobile, tablet, and desktop.
• Interactive Feedback: Includes an automated CSS Loading Spinner and smooth fade-in entrance animations to improve perceived performance.
• Robust Error Handling: Integrated try/catch blocks with custom UI alerts for failed API handshakes or network issues.

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Modern Grid & Flexbox), Google Fonts.
• Logic: Vanilla JavaScript (ES6+).
• Integration: Google YouTube Data API v3.
• Design Pattern: Glassmorphism & Responsive Design.

---

💡 Why I Built This

To demonstrate my ability to bridge the gap between backend data and premium frontend experiences. This project showcases my skills in API lifecycle management, asynchronous programming, and creating high-end user interfaces that align with modern web standards.

---

📂 Getting Started

1. Clone the repository:

   git clone [https://github.com/Asr13b/myYoutubeFeed.git](https://github.com/Asr13b/myYoutubeFeed.git)

Setup API Key: Open index.html and replace the API_KEY and CHANNEL_ID with your own Google Cloud credentials.

Deployment: This project is pre-configured for GitHub Pages or Netlify.

🔒 Security Note The API key used in this project is restricted via the Google Cloud Console. It is configured to only accept requests from authorized domains and is limited strictly to the YouTube Data API v3 to prevent unauthorized usage or quota abuse.

---

📫 Connect with Me

• Live Demo: https://asrarvid.netlify.app/
• LinkedIn: Asrar Fedlu Kedir
• Portfolio: https://asrarfedlu-portfolio-web.netlify.app

---