Youtube Clone

Live Site: 👉 click here

Overview

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.

Motivation

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.

Why I Built the Project This Way

• Created a seamless YouTube video streaming experience.
• Chose React.js for its declarative approach and Tailwind CSS for a visually appealing and responsive design.

Features

• 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.

Technologies Used

• 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.

Getting Started

1. Clone the repository:

   git clone https://github.com/vikasipar/youtube-clone.git

2. Install dependencies:

   npm install

3. Set up Firebase credentials.

Running the App

npm run dev

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

Screenshots: