Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

YouTube Clone – T3 Stack Tutorial (Next.js, TypeScript, Tailwind CSS)

via freeCodeCamp

Overview

This course teaches learners how to use the T3 Stack (Next.js, Typescript, TRPC, Next Auth, Prisma, and Tailwind CSS) to build a full stack video streaming app similar to YouTube. By the end of the course, students will have the skills to create an end-to-end web application using these technologies. The course covers setting up the tech stack, writing Prisma models, adding Tailwind CSS, building various components like buttons, navbar, sidebar, layout, and mobile footer, creating different pages such as the home page, search page, video page, profile pages, playlist page, and dashboard page, as well as implementing features like follow, like/dislike buttons, comments, saving videos, and more. The teaching method involves a hands-on approach with practical demonstrations and coding sessions. This course is intended for individuals interested in learning how to build modern web applications using the T3 Stack and specifically targeting those who want to create a video streaming platform similar to YouTube.

Syllabus

⌨️ Intro
⌨️ Demo
⌨️ Tech Stack
⌨️ Setup
⌨️ Write Prisma Models
⌨️ Seed Database
⌨️ Adding Tailwind
⌨️ Button Component
⌨️ Navbar Component
⌨️ Sidebar Component
⌨️ Layout Component and mobile sidebar
⌨️ Mobile Footer Component
⌨️ Home Page
⌨️ Error/Loading Message Component
⌨️ MultiColumnVideos Component
⌨️ Search Page
⌨️ Video Page Begin
⌨️ Build Follow Button
⌨️ Build Like and Dislike Button
⌨️ Description Component
⌨️ Comment Component
⌨️ Save Video Button
⌨️ Profile Header Component
⌨️ Profile Videos Page
⌨️ Profile playlist Page
⌨️ Playlist Page
⌨️ History and Like Videos Page
⌨️ Profile Announcements Page
⌨️ Like and Dislike Announcement Buttons
⌨️ Add announcements
⌨️ Profile Following Page
⌨️ Start of Dashboard Page
⌨️ Publish Button
⌨️ Delete Button
⌨️ Edit Button
⌨️ Upload Button

Taught by

freeCodeCamp.org

Reviews

Start your review of YouTube Clone – T3 Stack Tutorial (Next.js, TypeScript, Tailwind CSS)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.