📌 ShowYU Video Listing Interface

A video browsing interface built using modern frontend technologies. This project fetches video data from a public API and displays it in a clean, structured layout inspired by video streaming platforms.

---

🚀 Live Demo

👉 https://showyu.vercel.app/

---

📖 Project Overview

This project demonstrates how to build a dynamic frontend application by integrating with an external API and rendering real-time data on the UI.

The application fetches video data and displays it using reusable video card components, focusing on layout structure, responsiveness, and clean UI design.

---

🎯 Assignment Context

This project was built as part of an assignment from ChaiCode, with the objective of:

• Working with APIs
• Building real-world UI layouts
• Practicing JavaScript fundamentals
• Improving frontend development skills

---

🔗 API Used

https://api.freeapi.app/api/v1/public/youtube/videos

---

🛠️ Tech Stack

• HTML5
• CSS3 / Tailwind CSS
• JavaScript (ES6+)
• Fetch API

---

✨ Features

• Fetches real-time video data from API
• Displays videos in a structured grid layout
• Responsive design (mobile, tablet, desktop)
• Reusable video card components
• Clean and modern UI

---

📂 Project Structure

├── index.html
├── styles.css
├── app.js
└── README.md

---

⚙️ How It Works

1. On page load, an API request is made using Fetch API
2. Video data is received in JSON format
3. Data is parsed and mapped
4. Video cards are dynamically created
5. UI is updated with fetched content

---

Getting Started

1. Clone the repository

git clone https://github.com/your-username/youtube-video-listing-ui.git

2. Open the project

cd youtube-video-listing-ui

3. Run the project

Open index.html in your browser

---

🚀 Deployment

This project can be easily deployed using Vercel.

Steps:

1. Push code to GitHub
2. Go to Vercel
3. Click Add New Project
4. Import repository
5. Click Deploy

---

💡 Key Learnings

Through this project, I gained strong practical understanding of:

• Working with external APIs using Fetch API
• Handling asynchronous JavaScript (promises)
• DOM manipulation and dynamic rendering
• Structuring reusable UI components
• Building responsive layouts
• Debugging real-world frontend issues
• Writing clean and maintainable frontend code

---

📌 Future Improvements

• Add search functionality
• Implement filtering (category-wise videos)
• Add loading skeleton UI
• Add error handling UI
• Convert to React.js for scalability

---

🤝 Contributing

Contributions are welcome. Feel free to fork and improve the project.

---

📧 Contact

For feedback or collaboration, feel free to connect.