A modern, YouTube-inspired video discovery platform showcasing professional frontend development practices.
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.
- 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
- 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
npm install
npm run devOpen http://localhost:5173 in your browser.
src/
βββ App.jsx # Main logic: fetching, searching, filtering
βββ App.css # Styling: layout, animations, responsive
βββ main.jsx # React entry point
β
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