A modern video streaming web application inspired by YouTube, built with a clean interface and responsive design. Users can browse videos, search content, watch videos, and enjoy a familiar media platform experience across devices.
🔗 https://youtube-clone-umber-six-27.vercel.app/
- Clean and responsive YouTube-inspired UI
- Browse trending and recommended videos
- Search for videos instantly
- Watch videos with embedded player
- Sidebar navigation for categories
- Video cards with thumbnails, titles, and channel details
- Mobile-friendly responsive layout
- Smooth user experience with modern design
- Home page with video feed
- Search results page
- Video watch page
- Navigation sidebar
- Header with search bar
- React.js – Component-based UI development
- JavaScript (ES6+) – Application logic
- HTML (JSX) – Structure
- CSS – Styling and layout
- Functional Components
- Hooks (
useState,useEffect) - Props for component communication
- Conditional rendering
Youtube-Clone/
│
├── public/
│ ├── index.html # Root HTML file
│ └── assets/ # Static files (icons/images if used)
│
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Navbar.jsx # Top navigation bar
│ │ ├── Sidebar.jsx # Sidebar menu
│ │ ├── VideoCard.jsx # Video preview card
│ │ ├── SearchBar.jsx # Search input component
│ │ └── ...
│ │
│ ├── pages/ # Page-level components
│ │ ├── Home.jsx # Displays video feed
│ │ ├── SearchResults.jsx # Displays searched videos
│ │ ├── Watch.jsx # Video playback page
│ │ └── ...
│ │
│ ├── utils/ # Helper functions & API logic
│ │ ├── api.js # API calls / endpoints
│ │ ├── constants.js # Static values/config
│ │ └── helpers.js # Utility functions (if any)
│ │
│ ├── styles/ # CSS files
│ │ ├── global.css
│ │ └── component styles
│ │
│ ├── App.js # Main app layout
│ ├── index.js # Entry point of React app
│ └── ...
│
├── package.json # Dependencies & scripts
└── README.md
- Modern dark/light inspired layout
- Grid-based video browsing
- Reusable UI components
- Fast and intuitive navigation