ChaiLearn - Video Learning Platform

A modern, YouTube-inspired video discovery platform showcasing professional frontend development practices.

📌 About

ChaiLearn is a fully functional video listing application where users can search, filter, and explore programming tutorials. Built to demonstrate real-world React patterns with a polished, responsive UI inspired by industry-standard design.

🛠️ Tech Stack

• React - Component-based UI with hooks (useState, useEffect)
• Vite - Lightning-fast build tool and dev server
• CSS3 - Responsive grid, gradients, animations, and flexbox
• FreeAPI - Real YouTube video data integration

📚 What You'll Learn

• React Fundamentals - State management, hooks, and component lifecycle
• API Integration - Fetching and handling real-time data
• Responsive Design - Mobile-first layouts and adaptive grids
• CSS Mastery - Modern styling with animations and hover effects
• Search & Filtering - Real-time search and dynamic tag filtering
• Professional UI/UX - Dark theme, gradients, and polished interactions
• Pagination - Dynamic content loading and "Load More" functionality

🚀 Quick Start

npm install
npm run dev

Open http://localhost:5173 in your browser.

📁 Project Structure

src/
├── App.jsx      # Main logic: fetching, searching, filtering
├── App.css      # Styling: layout, animations, responsive
└── main.jsx     # React entry point

🎯 Features

✅ Real-time video search
✅ Tag-based filtering
✅ Responsive grid (4→3→2→1 columns)
✅ Dynamic pagination
✅ Smooth animations
✅ Professional dark theme

---

Built with ☕ by Abdul Rahman