Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/onkar895/youtube-ui
- Owner: onkar895
- Created: 2023-12-05T18:41:15.000Z (12 months ago)
- Default Branch: master
- Last Pushed: 2024-09-13T13:34:43.000Z (2 months ago)
- Last Synced: 2024-09-14T18:53:14.527Z (2 months ago)
- Topics: api-polling, debouncing, lazy-loading, react-router-dom, reactjs, redux-toolkit, responsive-design, tailwindcss, user-interface, vercel, youtube-api
- Language: JavaScript
- Homepage: https://my-youtube-ui.netlify.app/
- Size: 549 KB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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)