https://github.com/paragunhale1998/youtube-clone
here i create a youtube clone using angular and tailwind css with youtube api
https://github.com/paragunhale1998/youtube-clone
angular api css html http javascript tailwidcss typescript
Last synced: 2 months ago
JSON representation
here i create a youtube clone using angular and tailwind css with youtube api
- Host: GitHub
- URL: https://github.com/paragunhale1998/youtube-clone
- Owner: ParagUnhale1998
- Created: 2024-05-08T06:34:56.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T07:43:31.000Z (about 2 years ago)
- Last Synced: 2025-03-23T04:44:31.692Z (about 1 year ago)
- Topics: angular, api, css, html, http, javascript, tailwidcss, typescript
- Language: TypeScript
- Homepage: https://youtube-parag-unhale.netlify.app
- Size: 1.61 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```sh
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.
