강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

Complete Real-world YouTube Clone Development with Next.js 15

In this 24-hour tutorial, you will learn how to build your own YouTube clone. We will cover advanced topics such as Next 15 and React 19 (including tRPC), prefetching in Server Components, utilizing Suspense in Client Components, video processing, background jobs, and AI features.

(3.8) 13 reviews

569 learners

  • antonio
youtubeclone
Next.js
React
PostgreSQL
TailwindCSS
drizzle

Reviews from Early Learners

What you will learn!

  • Experience directly designing and building a video platform like YouTube

  • Acquisition of modern full-stack web development skills utilizing React 19 and the latest full-stack framework based on Next.js 15 (App Router), TypeScript, and tRPC.

  • Type-Safe Database Management Skills Using PostgreSQL + Drizzle ORM

  • Fast and Efficient Server-Side Environment Setup Experience with Bun Runtime

  • Learning User Authentication and Stability Enhancement Methods Based on the Clerk Authentication System

  • Production-Level Feature Implementation via AI Automation and Async Processing

  • Practical performance improvement through infinite scrolling and data flow optimization

Clone Coding , the best learning method to learn practical development!

Clone coding is the fastest way to learn the structure and flow of an actual service. Rather than a simple example, if you implement an actual app that we know well, you will naturally understand how technologies are combined and operated.

Since you learn firsthand why each function is necessary and in what order they should be built for efficiency, you can develop both practical sense and design skills at the same time .

In this course, you will build a YouTube-style video platform and build a production-grade full-stack application using cutting-edge web technologies such as Next.js 15, tRPC, Drizzle, Clerk, and Bun.

Actual service level
You can create a YouTube.

Real-time video processing & AI content creation

  • 🎥 Video player with selectable quality

  • 🎬 Real-time video processing using Mux


  • 🖼 Automatically generate thumbnails/titles/descriptions with AI

  • 📝 Automatic subtitle generation


Personalized Feed & Responsive UI Design

  • 🗂 Custom playlist management feature

  • 🔄 Configure multiple content feeds

  • 🎯 Track your personal viewing history

  • 📱 Responsive design optimized for all devices

Implementing comments, likes, and dashboards

  • 💬 Interactive comment/reply system

  • 👍 Like and Subscribe System

  • 📊 Creator Studio
    (Views, Likes, Traffic Management)

Key technologies used in implementation

  • 📦 Module-based structural design

  • 🗄 PostgreSQL integration based on DrizzleORM

  • 🚀 Latest stack based on Next.js 15 & React 19

  • 🔄 Type-safe API implemented with tRPC

  • 💅 Using TailwindCSS and ShadcnUI

Check out the final result for yourself!

Chosen by 380,000+ subscribers worldwide
Clone coding expert, Antonio!

The latest lecture for 2025 created by the strongest in clone coding education

380,000 subscribers, 14.4 million views! The best practical clone coding education!
Meet Antonio's latest lecture for 2025, which contains his know-how in designing more than 25 clone coding lectures.
You can experience a real-world project from start to finish, following the complete function design and implementation process.

The same combination of technologies used by developers today, such as Next.js 15

It contains the most popular full-stack combinations in today's practice, such as Next.js 15 (App Router), React 19, and Drizzle ORM. We will personally create a YouTube-style full-stack service one by one, from authentication, DB, API, video processing, AI automation, feed, playlist, comment system, search, subscription, and distribution.

Adding generative AI capabilities to your services

Like YouTube, we implement a function that automatically generates thumbnails, titles, and descriptions using generative AI. Rather than simply adding AI functions, we design a background workflow that automatically handles delays and errors, and create an AI system that operates stably at the actual service level .

With 11 cutting-edge technologies
Complete one service.

The most practical and up-to-date full-stack combination

Next.js 15 + React 19 + TypeScript

File-based routing of Next.js 15 (App Router) and React 19 are a powerful combination that reflects the latest web trends. Adding TypeScript to this reduces errors and makes maintenance easier, so you can use it right away for practical use. As it is the most commonly used combination these days, you can learn the basics as well as practical design sense.

Type-safe API communication

tRPC

A type-based framework that allows you to automatically connect front and back ends without an API specification.
It maximizes the strengths of TypeScript and ensures code consistency between the front and back ends, making maintenance easier. It is a trendy technology that is gaining attention in recent practical projects because it can simultaneously achieve both speed and productivity.

Design as fast as code
TailwindCSS + Shadcn UI

Tailwind, which helps you not to worry about CSS, and Shadcn UI, which has sophisticated components, are optimized for quickly implementing high-quality UI. It provides a practical experience that allows flexible customization while maintaining the style guide, and naturally crosses the boundaries between development and design.

DB design with both safety and productivity
PostgreSQL + Drizzle ORM

The stability of PostgreSQL, a proven open source DB, and the productivity of Drizzle ORM, which allows you to design code based on types, combine to create a more secure and efficient data layer. You can manage without inconsistencies between SQL and code, allowing you to build design capabilities essential for data-centric services.

Easily implement complex authentication
Clerk

You can implement an authentication system for real services, including social login, email authentication, and session management, with just a few lines of code. Since you can easily replace complex and security-related authentication logic with SaaS when implementing it yourself, it is increasingly being used in services that prioritize rapid MVP development or stability.

YouTube-level video processing experience
Mux

It is a powerful media platform that automatically transcodes and streams videos to each device when uploaded. The experience of designing and building the entire video processing while cloning the core functions required for services such as YouTube will be a strong competitive edge when handling media services in the field.

You can also meet Bun, a runtime that is getting a lot of attention these days!

Bun is a JavaScript runtime that is gaining attention in modern projects these days due to its fast execution speed and build performance.

Please check before taking the class! 📢

This lecture is also available on the Code with Antonio YouTube channel,
In fact, to complete clone coding, you definitely need paid learning materials.
(including the entire codebase, configuration files, and structured components)

💬 Only available in Inflearn courses!

  • We've divided the 23-hour long video into a systematic curriculum. You can quickly find the part you want, learn it, and review it conveniently at any time.

  • Don't worry if English isn't your thing!

    Korean dubbing is provided so you can listen comfortably.

  • Don't just skip what you've learned 🙂

    You can review in a fun way with AI quizzes from time to time!


Recommended for
these people

Who is this course right for?

  • A developer who wants to learn the latest web development trends and apply them to real projects

  • A developer who wants to experience modern app design based on Next.js 15, React 19, and tRPC

  • Developer who wants to complete a YouTube clone project personally

  • Junior developer looking to strengthen their portfolio

Need to know before starting?

  • Basic knowledge of JavaScript and React

Hello
This is

569

Learners

13

Reviews

4

Answers

3.8

Rating

1

Course

안녕하세요, 저는 소프트웨어 엔지니어 Antonio입니다. 7년 이상의 개발 경력을 가지고 있으며, 프로그래밍 세계에 매료되어 이 분야에서 일할 수 있다는 것을 큰 행운으로 생각합니다.

그동안 다양한 프로그래밍 언어와 기술을 다루는 경험을 통해 개발자로서 많은 성장을 이룰 수 있었습니다. 지금까지 쌓은 지식과 경험도 소중하지만, 저는 여전히 배우고 성장하는 데에 큰 열정을 가지고 있습니다.

이러한 경험과 열정을 바탕으로, 프로그래밍에 대한 애정을 나누고 함께 배우며 성장하기 위해 "Code With Antonio" 유튜브 채널과 학습 플랫폼을 운영하고 있습니다. 제가 만든 튜토리얼과 인사이트가 많은 분들께 도움이 되고, 프로그래밍 커뮤니티에 긍정적인 기여를 할 수 있기를 바랍니다.

 

Curriculum

All

40 lectures ∙ (23hr 41min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

13 reviews

3.8

13 reviews

  • goodsosbva4133님의 프로필 이미지
    goodsosbva4133

    Reviews 5

    Average Rating 3.6

    Edited

    3

    20% enrolled

    ハングルの説明が足りない

    • jojoldu2inflab

      こんにちは、현성様 Inflabの향로です。 ご不便をおかけし、大変申し訳ございません。 韓国語の説明が不十分とのこと、具体的にどのような点かお教えいただけますでしょうか。改善に努めさせていただきます。 翻訳と吹き替えの品質問題については、全体的に再度検証を行い、不十分だったシステムの問題を改善いたしましたので、様々な改善が適用されております。 いただいたフィードバックを常に念頭に置きながら、より良いシステムを構築できるよう努めてまいります。 Inflearnをご利用いただき、誠にありがとうございます。より良いサービスでお応えできるよう努めます。

  • ej90611066님의 프로필 이미지
    ej90611066

    Reviews 2

    Average Rating 5.0

    Edited

    5

    10% enrolled

    「クローンコーディング」と言うには機能が本当に多様で、各技術をなぜ使うのかの説明もよくされているので、設計感覚まで身につくと思います。 YouTubeクローンコーディングの中でもAI活用、様々なスタックを多様に活用してみることができる講義なので、個人的には意味があると思います!

    • codewithantonio
      Instructor

      丁寧なレビュー、本当にありがとうございます! 特にアーキテクチャやAI活用に関する説明が、お役に立ち、有意義だと感じていただけたようで、大変嬉しく思います。 今後も様々なスタックを探求される際に、このコースが引き続きインスピレーションとなれば幸いです🙏

  • divdivdivv님의 프로필 이미지
    divdivdivv

    Reviews 4

    Average Rating 5.0

    5

    30% enrolled

    講義を楽しく聞いています

    • codewithantonio
      Instructor

      本当にありがとうございます! 講義を楽しんでいただけていると聞いて、本当に嬉しいです 🙏

  • dydals34402231님의 프로필 이미지
    dydals34402231

    Reviews 6

    Average Rating 5.0

    Edited

    5

    30% enrolled

    YouTubeでしか触れることのできなかった講義を、Inflearnを通して韓国語翻訳で聞くと、また違った感覚でとても新しく感じました。おかげで理解度もさらに高まった気がします! 今後は、Next.js一つでフロントとサーバーの両方を処理する方式だけでなく、NestJS、Express、Honoのようなサーバーフレームワークと共にモノレポ環境を構築して進める講義も制作計画があるか気になります!

    • codewithantonio
      Instructor

      丁寧なフィードバック、本当にありがとうございます!韓国語に翻訳された講義が、より深い理解に繋がったと伺い、大変嬉しく思っております。 ご提案いただいた内容についても感謝いたします。monorepo環境や、NestJS、Express、Honoといったフレームワークを扱う講義は、大変興味深いアイデアだと感じました。今後のコンテンツ作成の際に、必ず参考にさせていただきます。

  • studylida님의 프로필 이미지
    studylida

    Reviews 1

    Average Rating 4.0

    4

    30% enrolled

    $42.90

    Similar courses

    Explore other courses in the same field!