Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/onkar895/youtube-ui

Developed a highly optimized and scalable video streaming application that leverages YouTube's Live API to deliver seamless live streaming experiences. It focuses on enhancing user engagement through various optimization techniques and features, ensuring a smooth and engaging viewing experience.
https://github.com/onkar895/youtube-ui

api-polling debouncing lazy-loading react-router-dom reactjs redux-toolkit responsive-design tailwindcss user-interface vercel youtube-api

Last synced: 7 days ago
JSON representation

Developed a highly optimized and scalable video streaming application that leverages YouTube's Live API to deliver seamless live streaming experiences. It focuses on enhancing user engagement through various optimization techniques and features, ensuring a smooth and engaging viewing experience.

Awesome Lists containing this project

README

        

# YOUTUBE CLONE :

### Project Overview

Developed a highly optimized and scalable video streaming application, leveraging YouTube's Live API to deliver seamless live streaming experiences. The application focuses on enhancing user engagement through various optimization techniques and features.

### Live Demo : https://my-youtube-ui.netlify.app/

### Key Features

- Optimized Search (debouncing and caching techniques)
- Live Chat Simulation (using API polling)
- Lazy Loading
- Shimmer UI while loading
- Caching Search Suggestions
- Hover to Seek Videos
- Filter Videos by Tags
- Experience on search results and explore pages (e.g., Trending).

### Technologies Used

- React JS
- Redux Toolkit
- Tailwind CSS
- Vite

### Getting Started :

Follow these steps to set up and run the application locally:

### Prerequisites :

- npm (Node Package Manager) installed.
- Vite should be installed.

### Installation :

1. Clone the repository:

```
git clone https://github.com/onkar895/YouTube-UI.git
cd MyYouTube
```

LOCALHOST=1234

2. Install dependencies:

```
cd MyYouTube
npm install
```

3. Run the code
```
npm run dev
```

Screenshots :
![Screenshot (69)](https://github.com/onkar895/YouTube-UI/assets/50394711/05fb5cd1-6278-4d2c-ab8a-0cdd0cf5fccc)
![Screenshot (54)](https://github.com/onkar895/YouTube-UI/assets/50394711/3bca374c-90d1-4d3b-8dfe-bf9c79874bcd)
![Screenshot (56)](https://github.com/onkar895/YouTube-UI/assets/50394711/50ffa619-d84d-4f1e-a57c-7051f40f112d)
![Screenshot (58)](https://github.com/onkar895/YouTube-UI/assets/50394711/7c7758f2-7392-46ec-9a9d-75ef725c06c8)
![Screenshot (59)](https://github.com/onkar895/YouTube-UI/assets/50394711/958376f7-75e6-41d9-abe5-b0a3ceb90438)
![Screenshot (61)](https://github.com/onkar895/YouTube-UI/assets/50394711/e7927f6a-acbc-41c6-8d10-08ee2a46cea1)
![Screenshot (62)](https://github.com/onkar895/YouTube-UI/assets/50394711/d2626bbc-8a14-48f8-9209-6cc2353a944b)
![Screenshot (63)](https://github.com/onkar895/YouTube-UI/assets/50394711/9fba1c39-e1df-4e44-8334-9c1bfbf1fc90)
![Screenshot (64)](https://github.com/onkar895/YouTube-UI/assets/50394711/6a25a783-9c54-4edb-8a02-5e4a31bc405e)
![Screenshot (65)](https://github.com/onkar895/YouTube-UI/assets/50394711/8310c62c-6c2d-451a-aebc-90c2569d33db)
![Screenshot (66)](https://github.com/onkar895/YouTube-UI/assets/50394711/4d4b18a6-91db-4a64-8b56-0a25dde39091)