https://github.com/hode2002/youtube-clone-frontend

A YouTube clone with video upload, playback, playlists, comments, likes, and subscriptions.
https://github.com/hode2002/youtube-clone-frontend

nextjs react-player react-query shadcn-ui tailwindcss typescript zustand

Last synced: 2 months ago
JSON representation

A YouTube clone with video upload, playback, playlists, comments, likes, and subscriptions.

• Host: GitHub
• URL: https://github.com/hode2002/youtube-clone-frontend
• Owner: hode2002
• Created: 2025-03-25T13:28:55.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-04-15T13:52:49.000Z (2 months ago)
• Last Synced: 2025-04-15T14:42:14.309Z (2 months ago)
• Topics: nextjs, react-player, react-query, shadcn-ui, tailwindcss, typescript, zustand
• Language: TypeScript
• Homepage: https://youtube.hovande.id.vn
• Size: 329 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  





  


    

        

    

    

    

    

    

    

  

  

  
🎬 YouTube Clone

  

  


    A modern, full-featured video-sharing platform built with Next.js and Nest.js

    


    View Demo »

  



## 📝 Description

A full-featured YouTube clone application that allows users to upload, view, interact with, and manage video content with ease. Built with a modern tech stack featuring Next.js for the frontend and Nest.js for the backend, this application demonstrates best practices in full-stack development with TypeScript.

## 🎥 Demo



  

    

  





  👆 Click to watch the demo video



## 🛠️ Technology Stack

  

    

      
Frontend

      


        


Next.js - React framework for production

        
TypeScript - Static type checking

        
TailwindCSS - Utility-first CSS framework

        
ShadCN - Reusable component library

        
React Query - Data fetching library

        
Zustand - State management

      

    

    

      
Backend

      


        


Nest.js - Progressive Node.js framework

        
JWT - Token-based authentication

        
Passport - Authentication middleware

        
MongoDB - NoSQL database

        
Redis - In-memory data structure store

      

    

    

      
DevOps & Tools

      


        
Docker - Containerization

        
Cloudinary - Cloud-based media management

        
ESLint - Code linting

        
Prettier - Code formatting

      

    

  


## ✨ Key Features

### 🔐 Authentication & Authorization

- Secure JWT-based authentication system

- Google OAuth2 integration for simplified login

- Role-based access control for content management

### 📹 Video Management

- 📤 Upload videos with processing and storage on Cloudinary

- ✏️ Edit titles, descriptions, and categories

- 🔒 Privacy controls (Public, Private, Unlisted)

- 🗑️ Delete or update videos with version history

### ▶️ Video Playback

- 🎬 Fullscreen mode with advanced controls

- ⏯️ Play/pause, seeking, volume and playback speed adjustment

- 📱 Responsive video player optimized for all devices

- 🔖 Video timestamp sharing and bookmarking

### 💬 User Interactions

- 👍 Like/dislike videos and comments

- 📝 Comment system with nested replies

- 📊 Real-time view counts and engagement metrics

- 📺 Subscribe/unsubscribe to channels with notifications

### 📋 Content Organization

- 📁 Create, edit, and manage playlists

- ➕ Add/remove videos from playlists

- 🏷️ Tag-based categorization system

- 📑 Watch history and recommendations

### 📱 Responsive Design

- 💻 Desktop-optimized experience

- 📱 Mobile-friendly interface with touch gestures

- 🌓 Light/dark mode support