Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vikasipar/youtube-clone
React | Tailwind CSS | Youtube Data API
https://github.com/vikasipar/youtube-clone
Last synced: 7 days ago
JSON representation
React | Tailwind CSS | Youtube Data API
- Host: GitHub
- URL: https://github.com/vikasipar/youtube-clone
- Owner: vikasipar
- Created: 2023-08-16T08:32:54.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-31T19:15:01.000Z (10 months ago)
- Last Synced: 2024-01-31T20:30:11.832Z (10 months ago)
- Language: JavaScript
- Homepage: https://betayoutube.vercel.app
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 
Youtube Clone
Live Site: 👉 [click here](https://betayoutube.vercel.app/)
### 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:
```bash
git clone https://github.com/vikasipar/youtube-clone.git
```
2. Install dependencies:
```bash
npm install
```
3. Set up Firebase credentials.
### Running the App
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser.
### Screenshots:
