Live Site: 👉 click here
This project is a YouTube clone, where I led frontend development and API integration using React.js and Tailwind CSS. The application features a seamlessly integrated video player for smooth YouTube video streaming, a user-friendly search bar, and ensures responsiveness for diverse screen sizes.
As a fresh developer, my motivation for undertaking this YouTube Clone project was driven by a desire to learn and apply new technologies in a practical setting. Taking the reins in frontend development, I aimed to gain hands-on experience with React.js, Tailwind CSS, and API integration using the YouTube Data API. This project serves as a tangible learning playground, allowing me to showcase my skills while tackling real-world challenges.
- Created a seamless YouTube video streaming experience.
- Chose React.js for its declarative approach and Tailwind CSS for a visually appealing and responsive design.
-
Dynamic Video Player:
- Seamlessly integrated video player for smooth YouTube video streaming.
- Enhanced user experience with a responsive and intuitive design.
-
User-Friendly Search Bar:
- Designed an intuitive search bar for easy navigation and content discovery.
-
Responsive Design:
- Ensured the application's responsiveness for diverse screen sizes, providing a consistent experience.
-
React.js: A powerful JavaScript library for building user interfaces.
-
Tailwind CSS: A highly customizable CSS framework for modern and responsive UIs.
-
YouTube Data API: Integrated the API for fetching and displaying YouTube video data.
- Clone the repository:
git clone https://github.com/vikasipar/youtube-clone.git
- Install dependencies:
npm install
- Set up Firebase credentials.
npm run dev
Open http://localhost:5173 in your browser.
![Home Page homepage](https://private-user-images.githubusercontent.com/98696526/261575944-039bc3cf-62eb-4981-8703-73a3986acc6a.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNDczMTYsIm5iZiI6MTcyNDE0NzAxNiwicGF0aCI6Ii85ODY5NjUyNi8yNjE1NzU5NDQtMDM5YmMzY2YtNjJlYi00OTgxLTg3MDMtNzNhMzk4NmFjYzZhLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwOTQzMzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kNWUxOWRmMTU1ZDg4NGJlOTU4ZDhkNDUzYWIzOGRhYjg2YWYzZWZkNDQ4YWViYTQyMzZhZDk4ZjlkOWM0YTY4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.MzxxpKKswm_dir5UfHgt3raLWTsvldor-EDkBP87K3E)
![Search Videos Search Videos](https://private-user-images.githubusercontent.com/98696526/261575986-790d3f52-147c-4343-a596-e4d41aa02c03.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNDczMTYsIm5iZiI6MTcyNDE0NzAxNiwicGF0aCI6Ii85ODY5NjUyNi8yNjE1NzU5ODYtNzkwZDNmNTItMTQ3Yy00MzQzLWE1OTYtZTRkNDFhYTAyYzAzLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwOTQzMzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yNDA2ODJiMzhhZWUzN2MyY2ZmNzI4MjFkNTM4YjU4YTE5NGM4ZDExMjZjMDc2YWFjMDM1OWZjYjdkZmZkZDA4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.CbkmJiapiN1Ew1sOwRX4UeQLT9pLAoHa2rkKmYJs83s)
![Watch Videos Watch Videos](https://private-user-images.githubusercontent.com/98696526/261576007-9cf4cd68-afb3-4865-8d65-14983a3b0227.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNDczMTYsIm5iZiI6MTcyNDE0NzAxNiwicGF0aCI6Ii85ODY5NjUyNi8yNjE1NzYwMDctOWNmNGNkNjgtYWZiMy00ODY1LThkNjUtMTQ5ODNhM2IwMjI3LmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMFQwOTQzMzZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yYTQ2MjNiZjk2Njg0ZDUwNTIwMjI4NzkwMjkyODk2ZDM4YjBhMTFmMTc0ZjU2Y2RiYjEyODgzNWRlMzFlNjFhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.E8FgwcSXgO8PIRa2BVYGm6Q_rN4eU3I9ZMGyKQJAq4E)