Skip to content

theBappy/youtube-clone-nextjs

Repository files navigation

πŸŽ₯ uTube - Fullstack Video Sharing Platform

uTube is a full-featured, you can say a youtube clone exactly like youtube, YouTube-like video platform built with bleeding-edge technologies. It offers everything from high-performance video playback and real-time processing to intelligent content management, powered by AI and a modular design. Honestly speaking, put less effort in UI than functionlity and logic.

ChatGPT Image Aug 7, 2025, 11_00_39 PM

πŸš€ Features

πŸŽ₯ Advanced video player with quality controls
🎬 Real-time video processing with Mux
πŸ“ Automatic video transcription
πŸ–ΌοΈ Smart thumbnail generation
πŸ€– AI-powered title and description generation
πŸ“Š Creator Studio with metrics
πŸ—‚οΈ Custom playlist management
πŸ“± Responsive design across devices
πŸ”„ Multiple content feeds
πŸ’¬ Interactive comment system
πŸ‘ Like and subscription system
🎯 Watch history tracking
πŸ” Authentication system
πŸ“¦ Module-based architecture
πŸ—„οΈ PostgreSQL with DrizzleORM
πŸš€ Next.js 15 & React 19
πŸ”„ tRPC for type-safe APIs
πŸ’… TailwindCSS & ShadcnUI styling


🧱 Tech Stack

Tech Description
Next.js App framework (v15)
React Frontend UI (v19)
TypeScript Type-safe code
TailwindCSS Utility-first CSS
tRPC End-to-end type-safe APIs
Clerk Authentication provider
Mux Video streaming & processing
UploadThing File upload handler
PostgreSQL Relational database
Drizzle ORM Type-safe DB ORM
Upstash Edge cache & rate-limiting
QStash Background task queue

🎬 Video Management

  • Advanced video player with quality/resolution controls
  • Real-time video processing with Mux
  • Uploading via UploadThing
  • Smart thumbnail generation
  • Automatic transcription
  • AI-powered title & description generation

πŸ“Ή User Engagement

  • Subscribe/Unscribe functionality
  • Like/Dislike system with real-time UI updates
  • Interactive comments
  • Creator profile view
  • Watch history tracking
  • Playlist creation & management
  • AI thumbnail, description and title generation for video

πŸ§‘β€πŸ’Ό Creator Studio

  • View detailed metrics (views, likes, watch time)
  • Manage uploaded videos
  • Update video metadata (title, description, thumbnail, etc.)

🌍 Responsive UI/UX

  • Mobile-first design with full responsiveness
  • TailwindCSS & ShadcnUI components
  • Dark & Light Mode support

πŸ” Authentication & Authorization

  • Secure user auth via Clerk.dev
  • Role-based access
  • Auth-protected routes and content

πŸ“Έ Preview

yt1 yt8 yt6 yt11 mobile1 mobile2

πŸ“‚ Project Structure

/utube
β”œβ”€β”€ app              # Next.js App Router files
β”œβ”€β”€ components       # UI Components (Buttons, Player, etc.)
β”œβ”€β”€ features         # App features grouped by domain (dashboard, upload, etc.)
β”œβ”€β”€ modules          # Types and schemas
β”œβ”€β”€ trpc             # tRPC client and server setup
β”œβ”€β”€ lib              # Utility functions and constants
β”œβ”€β”€ public           # Static assets
β”œβ”€β”€ styles           # Global styles
└── prisma           # DB schema and Drizzle migrations

πŸ§ͺ Development

# Install dependencies
bun install

# Setup environment
cp .env.example .env

# Run dev server
bun run dev:all

πŸ“¦ Deployment

UTube is designed to work seamlessly with Vercel for frontend and serverless deployment, or any container-based hosting provider.

  • PostgreSQL (e.g., NeonDB or Supabase)
  • UploadThing for file storage
  • Mux credentials for video streaming
  • Clerk for authentication
  • Upstash/QStash for background processing

πŸ“ƒ License

This project is licensed under the MIT License.


πŸ™Œ Credits

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages