Build a YouTube Clone with Next.js 15: React, Tailwind, Drizzle, tRPC (2025)

Build a YouTube Clone with Next.js 15: React, Tailwind, Drizzle, tRPC (2025)

122.148 Lượt nghe
Build a YouTube Clone with Next.js 15: React, Tailwind, Drizzle, tRPC (2025)
⭐️ Source Code: https://dub.sh/xp03EDA 🎬 PART 2: https://youtu.be/ig26iRcMavQ 🎨 Assets (Free): https://dub.sh/youtube-clone-assets 💬 Discord & Help: https://www.codewithantonio.com/discord Clerk: https://go.clerk.com/4LzhRH5 Upstash: https://dub.sh/eiTzkoT Mux: https://mux.com/ In this 24 hour tutorial split in 2 parts, you will learn how to create your very own Youtube clone. We will cover advanced topics such as Next 15 and React 19 with tRPC, prefetching in server components, leveraging suspense in client components, video processing, background jobs, AI features, and much more. Key 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 Timestamps 00:00 Intro & Demo 04:11 Additional information 04:26 Project setup 29:31 Basic layout 01:29:08 Authentication 01:53:53 Database setup 02:15:06 Webhook sync 02:45:03 TRPC setup 03:30:48 TRPC configuration 03:56:37 Video categories 04:48:02 Studio layout 05:19:56 Studio videos 06:07:12 Infinite loading 06:27:36 Mux integration 07:22:36 Mux webhooks 08:12:57 Video form 09:20:06 Video thumbnails 10:12:08 AI background jobs 11:11:20 AI thumbnails 11:43:21 End of part 1