YouTube Clone

Hello, guys! My name is Parag Unhale. Welcome to my YouTube clone project created using Angular and Tailwind CSS, powered by the YouTube API.

Overview

This project aims to replicate the core features of YouTube, providing users with a familiar browsing and video watching experience.

Features

Home Page

• Navbar: Featuring a logo, search input container, dark mode toggle, and icons.
• Category Sections: Sections for music, movies, gaming, etc., allowing users to browse different content categories.
• Sidebar: Includes various categories for easy navigation.
• Video Cards: Displaying videos with a "Show More" button to load additional cards.
• Skeleton Loading: Elegant loading animations for smoother user experience.

Category Navigation

• Clickable Categories: Clicking on categories like "Music" or "Movies" dynamically updates the content.
• Hide/Show Categories: Ability to toggle visibility of categories, enhancing user control over content display.
• "Show More" Button: Load more video cards within each category.

Dark Mode/Light Mode

• Tailwind CSS Integration: Seamless switching between dark and light modes for personalized viewing preferences.

Video Page

• Video Details: Includes video iframe, title, channel name, subscriber count, and channel image.
• Interactive Buttons: Like, share, and download buttons with intuitive icons.
• Video Description: Displays views, upload date, tags, and detailed information about the video.
• Top Comments: Highlights top 10 comments with user names, profile pictures, and comment content.
• "Show More Suggestions" Button: Allows users to explore more video suggestions.

Search Functionality

• Search Suggestions: Displays top 5 suggestions with debouncing to optimize API calls.
• Search Results: Navigates to search results page with relevant video cards based on user query.

Responsive Design

• Fully Responsive: Ensures optimal viewing experience across all devices, maintaining functionality and design integrity.

Demo

1. Explore Categories: Navigate through different categories such as music, movies, gaming, etc.
2. Dark Mode/Light Mode: Toggle between dark and light modes for different viewing preferences.
3. Video Interaction: Click on video cards to view detailed video pages with comments and suggestions.
4. Search Functionality: Test search suggestions and results by entering queries like "WWE" or "John Cena."

Installation

1. Clone the repository:

   git clone https://github.com/your-username/youtube-clone.git
   

2.Navigate to the project directory:

cd youtube-clone Install dependencies:

npm install Run the application:

ng serve Open your browser and navigate to http://localhost:4200 to view the YouTube clone.

Contributing Contributions are welcome! Please feel free to submit a Pull Request for any improvements or additional features.

Technologies Used Angular Tailwind CSS YouTube API License This project is licensed under the MIT License - see the LICENSE file for details.

Note: Replace https://github.com/your-username/youtube-clone.git with your actual GitHub repository URL.