https://github.com/abdulla-4u/youtube-clone-reactjs
🎬 A YouTube-like video streaming platform using React & Tailwind CSS.
https://github.com/abdulla-4u/youtube-clone-reactjs
api-integration axios front-end react reactjs-project tailwindcss video-streaming webapp youtube-clone zustand
Last synced: 5 months ago
JSON representation
🎬 A YouTube-like video streaming platform using React & Tailwind CSS.
- Host: GitHub
- URL: https://github.com/abdulla-4u/youtube-clone-reactjs
- Owner: Abdulla-4u
- Created: 2025-04-05T05:44:04.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T06:18:53.000Z (12 months ago)
- Last Synced: 2025-04-09T19:49:20.806Z (12 months ago)
- Topics: api-integration, axios, front-end, react, reactjs-project, tailwindcss, video-streaming, webapp, youtube-clone, zustand
- Language: JavaScript
- Homepage: https://spicytube.vercel.app
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎬 YouTube Clone – React, Tailwind CSS & Zustand
A modern, fully responsive YouTube-like video streaming application built using **React**, **Tailwind CSS**, and **Zustand** for state management. This project offers an intuitive UI, dark/light mode support, and smooth interactions to deliver a premium video browsing experience.
---
## 🚀 Overview
This YouTube Clone fetches real-time data from the **YouTube Data API v3**, allowing users to explore trending content, search videos, and view video details. With responsive layouts and optimized performance, it mirrors the core UI/UX experience of YouTube — all built from scratch using modern frontend tools.
---
## ✨ Features
- 🔍 **Search Functionality** – Find videos by keyword instantly
- 📺 **Video Feed** – Home feed with trending & popular content
- 🌓 **Dark / Light Mode** – Seamless toggle with Zustand store
- 📱 **Fully Responsive** – Optimized for mobile, tablet, and desktop
- ⌛ **Skeleton Loaders** – Clean loading states with shimmer effect
- 🎥 **Video Detail Page** – Watch videos with full metadata & suggestions
- ⚡ **State Management** – Zustand-powered UI state control
- 📚 **Category Navigation** – Filter videos by topic/category
---
## 🛠️ Technologies Used
| Tool/Library | Description |
|------------------|----------------------------------------|
| **React** | Core UI library for building interfaces |
| **Tailwind CSS** | Utility-first CSS framework |
| **Zustand** | Lightweight global state management |
| **React Router** | Client-side routing |
| **React Loading Skeleton** | Skeleton placeholders for UX |
| **YouTube Data API v3** | Fetches dynamic video content |
---
## 🌐 Live Demo
🚀 [View Live Site](https://spicytube.vercel.app)
---
## 🧠 Planned Enhancements
- 📺 Channel Pages
---
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to [open an issue](https://github.com/Abdulla-4u/youtube-clone-reactjs/issues) or submit a pull request.
---
## 👨💻 Author
**Abdullah Mohammad**
📧 [abdullahmollah311@gmail.com](mailto:abdullahmollah311@gmail.com)
---
> “Keep it clean. Keep it fast. Keep it responsive.” 🚀
> — *Abdullah Mohammad*