Back to all videos

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

By Code With Antonio

TechnologyAIEducation
Share:

YouTube Clone Course: Detailed Summary

Key Concepts:

  • YouTube clone development
  • Modern web technologies (Next.js 15, React 19, TRPC, PostgreSQL, Drizzle ORM)
  • AI integration (OpenAI, image generation, transcription)
  • Video processing and streaming (Max)
  • Authentication (Clerk)
  • Background jobs (Upstash Workflow)
  • Server-side data prefetching
  • Responsive design
  • Component-based architecture
  • Database schema design
  • API development
  • Webhooks
  • Rate limiting
  • UI/UX design

1. Introduction and Overview

  • The course aims to build a fully functional YouTube clone using modern web technologies.
  • The application includes features like video playback, liking, subscriptions, commenting, content management, AI-powered title/description generation, playlists, and responsive design.
  • The course spans 38 chapters and over 24 hours of in-depth content.
  • It covers advanced concepts like server-side data prefetching, suspense in client components, module-based file structure, and advanced SQL concepts.

2. Technology Stack and Environment Setup (Chapter 1)

  • Runtime: Bun is highly recommended over Node.js due to its superior handling of TypeScript scripts, ES6 imports, and React 19 dependency issues.
  • Package Manager: Bun is also the recommended package manager.
  • Next.js Version: 15.1.2 will be used to ensure consistency throughout the course.
  • Project Setup:
    • Command: bunx create-next-app@15.1.2 new-tube
    • Options: TypeScript, ESLint, Tailwind CSS, Source directory, App Router (crucial), No Turbo pack, No import alias customization.
  • Shat CN UI: A collection of reusable components is installed for UI elements. Version 2.1.8 is used for consistency.
    • Command: bunx shatan-ui@2.1.8 init
    • Command to install all components: bunx shatan-ui@2.1.8 add --all
  • VS Code Extensions: Tailwind CSS IntelliSense is recommended.
  • Tailwind CSS Configuration: The tailwind.config.ts file is configured to include the src directory.
  • Example: Demonstrates importing and rendering a button from Shat CN UI.

3. Basic Layout and App Router (Chapter 2)

  • Goal: Build the basic layout including a sidebar and navbar.
  • Logo Asset: A logo is added to the public folder and used in the navbar.
  • Font: The Inter font from Google Fonts is integrated.
  • App Router Folders:
    • page.tsx: Creates a route.
    • layout.tsx: Creates a reusable layout across components.
    • Route Groups (folders in parentheses): Used to structure the project without affecting the URL path.
  • Dynamic API Routes:
    • Example: /feed/[videoID]/page.tsx
    • Dynamic API routes like params require await in Next.js 15.
    • Server components are used to prefetch data.
    • Client components are explicitly marked with use client.
  • Component Structure:
    • Modules folder: Contains sections, intents, teams, components, hooks, APIs, servers, and utils.
    • UI folder: Contains reusable UI components.
  • Sidebar Provider: The home layout is encapsulated with a sidebar provider.
  • Home Navbar: A fixed navbar with a logo, search input, and sign-in button is created.
  • Home Sidebar: A sidebar with navigation items like Home, Subscriptions, and Trending is created.
  • Collapsible Sidebar: The sidebar can be collapsed to expand the user's view.

4. Authentication with Clerk (Chapter 3)

  • Integration: Clerk is integrated for authentication.
  • Clerk Setup:
    • Create a Clerk application.
    • Select Google as the sign-in provider.
    • Install Clerk Next.js package: bun add @clerk/nextjs@6.10.3
    • Add environment variables: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY, NEXT_PUBLIC_CLERK_SIGN_IN_URL, NEXT_PUBLIC_CLERK_SIGN_UP_URL, NEXT_PUBLIC_CLERK_SIGNIN_FALLBACK_URL, NEXT_PUBLIC_CLERK_SIGNUP_FALLBACK_URL.
  • Middleware: A middleware file is created to protect routes.
  • Clerk Provider: The ClerkProvider is added to the root layout.
  • Sign-in/Sign-up Pages: Custom sign-in and sign-up pages are created.
  • User Button: The user button component is used to display user information and sign-out options.
  • Route Protection: The middleware is configured to protect specific routes.
  • Clerk Model: The sign-in button is configured to use the model mode.
  • Webhooks: Webhooks are used to synchronize Clerk accounts with the database.

5. Database Setup with PostgreSQL and Drizzle ORM (Chapter 4)

  • Database: PostgreSQL is used, obtained through Neon database.
  • Connection URL: A connection URL is obtained from Neon and stored in the .env.local file.
  • Drizzle ORM: Drizzle ORM is integrated for database management.
  • Installation:
    • bun add drizzle-orm@0.39.0 neon-serverless dotenv
    • bun add -D drizzle-kit tsx
  • Database Util: A database util file is created to connect to the database.
  • Schema: A database schema is created for users, including fields like ID, clerk ID, name, image URL, created at, and updated at.
  • Drizzle Config: A drizzle.config.ts file is created to configure Drizzle.
  • Migration: Drizzle Kit push is used to migrate changes to the database.
  • Drizzle Studio: Drizzle Studio is used to browse the database locally.

6. Synchronizing Clerk Accounts with the Database (Chapter 5)

  • Webhooks: Webhooks are used to synchronize Clerk accounts with the database.
  • Local Tunnel: Enrock is used to establish a local tunnel for webhooks. A static domain is recommended.
  • Concurrently: Concurrently is used to run multiple commands concurrently.
  • Enrock Command: enrock http 3000 --url your-static-domain
  • Dev All Script: A script is added to package.json to run the web hook and the project concurrently.
  • Clerk Webhook Configuration: A webhook is configured in the Clerk dashboard to listen for user-related events.
  • Signing Secret: The signing secret is copied from Clerk and stored in the .env.local file.
  • Swix: Swix is used to verify webhooks.
  • API Route: An API route is created to handle webhooks.
  • Event Handling: The API route handles user created, deleted, and updated events.
  • Database Synchronization: The API route synchronizes Clerk accounts with the database.

7. Integrating TRPC (Chapter 6)

  • TRPC: TRPC is integrated for end-to-end type safety.
  • Installation:
    • bun add @trpc/server@11.0.0-rc.730 @trpc/client@11.0.0-rc.730 @trpc/react-query@11.0.0-rc.730 10stack/react-query@5.65.1 zod client-only server-only
  • TRPC Router: A TRPC router is created.
  • API Route: An API route is created to handle TRPC requests.
  • Query Client Factory: A query client factory is created.
  • TRPC Client: A TRPC client is created for client components.
  • TRPC Caller: A TRPC caller is created for server components.
  • Prefetching: Server components are used to prefetch data.
  • Hydrate Client: A hydrate client component is used to wrap client components.
  • Suspense and Error Boundaries: Suspense and error boundaries are used to handle loading states and errors.

8. TRPC Configuration and Categories (Chapter 7)

  • Transformers: Transformers are enabled on TRPC.
  • Authentication: Authentication is added to the TRPC context.
  • Protected Procedure: A protected procedure is created.
  • Rate Limiting: Rate limiting is implemented using Upstash.
  • Categories Schema: A database schema is created for categories.
  • Seed Script: A script is created to seed the categories.
  • TRPC Routers: TRPC routers are organized.
  • Prefetching: Categories are prefetched in a server component.
  • Suspense Query: Categories are used with suspense query in a client component.

9. Studio Layout (Chapter 8)

  • Studio Route Group: A studio route group is created.
  • Studio Layout: A studio layout is created.
  • Studio Navbar: A studio navbar is created.
  • Studio Sidebar: A studio sidebar is created.
  • Studio Sidebar Header: A studio sidebar header is created.
  • Route Protection: The studio routes are protected.

10. Creating Studio Videos (Chapter 9)

  • Video Schema: A database schema is created for videos.
  • Studio Procedures: Studio procedures are created.
  • TRPC Router: The TRPC router is updated.
  • Dynamic Route: A dynamic route is created for video IDs.
  • Home View: A home view component is created.
  • Video Section: A video section component is created.
  • Infinite Scroll: An infinite scroll component is created.

11. Integrating Max Video Service (Chapter 10)

  • Max Account: A free Max account is created.
  • Max Integration: Max is integrated for video processing and streaming.
  • Max Token: A Max token is generated and stored in the .env.local file.
  • Max Uploader: The Max uploader is integrated into the studio.
  • Webhooks: Webhooks are used to track video processing status.
  • Database Synchronization: The database is synchronized with Max.
  • Thumbnail and Preview: Thumbnails and previews are generated for videos.

12. AI Background Jobs (Chapter 11)

  • Background Jobs: Background jobs are implemented using Upstash Workflow.
  • Upstash Workflow: Upstash Workflow is integrated for long-running tasks.
  • OpenAI Integration: OpenAI is integrated for AI-powered features.
  • AI Title Generation: AI is used to generate video titles.
  • AI Description Generation: AI is used to generate video descriptions.
  • Webhooks: Webhooks are used to trigger background jobs.
  • Rate Limiting: Rate limiting is used to prevent abuse.
  • Error Handling: Error handling is implemented for background jobs.
  • Code Snippets: Code snippets are provided for various tasks.

13. AI Thumbnails and Form Section Wrap-up (Chapter 12)

  • AI Thumbnails: AI is used to generate video thumbnails.
  • Thumbnail Prompt Model: A thumbnail prompt model is created.
  • Generation Workflow: A generation workflow is created.
  • Form Section: The form section is wrapped up.
  • Skeleton Component: A skeleton component is created for the form section.

Conclusion

This course provides a comprehensive guide to building a fully functional YouTube clone using modern web technologies. It covers a wide range of topics, from basic layout and authentication to advanced concepts like server-side data prefetching, AI integration, and background jobs. The course emphasizes best practices, code organization, and type safety, making it a valuable resource for developers looking to master modern web development.

Chat with this Video

AI-Powered

Hi! I can answer questions about this video "Build a YouTube Clone with Next.js 15: React, Tailwind, Drizzle, tRPC (2025)". What would you like to know?

Chat is based on the transcript of this video and may not be 100% accurate.

Related Videos

Ready to summarize another video?

Summarize YouTube Video