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

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=TV6tFPfz0go


Category:
Tutorial
Duration: 14:54:21
39,984 views
1,296

Learn 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. You will learn how each technology comes together to build an end-to-end web application.

CLOUDINARY DATA: https://drive.google.com/drive/folders/1JTj1JJSCxtRvNfxRSSgXCJePkYW6vBPV
FIGMA DESIGN: https://www.figma.com/file/Bkz0ewKqWyIOCt2sewUnhW/Vidchill---Design?type=design&node-id=48-33046&mode=design
GITHUB REPO: https://github.com/jeromemccree/vidchill_tutorial
DEPLOYED APP: https://www.vidchill.org/

✏️ Course created by @JeromeMcCree

⭐️ Contents ⭐️
⌨️ (0:00:27) Intro
⌨️ (0:00:50) Demo
⌨️ (0:12:05) Tech Stack
⌨️ (0:20:20) Setup
⌨️ (0:38:14) Write Prisma Models
⌨️ (0:55:27) Seed Database
⌨️ (1:22:27) Adding Tailwind
⌨️ (1:25:12) Button Component
⌨️ (1:38:27) Navbar Component
⌨️ (2:26:52) Sidebar Component
⌨️ (2:53:42) Layout Component and mobile sidebar
⌨️ (3:34:00) Mobile Footer Component
⌨️ (3:45:27) Home Page
⌨️ (3:57:47) Error/Loading Message Component
⌨️ (4:12:27) MultiColumnVideos Component
⌨️ (4:36:27) Search Page
⌨️ (4:50:27) Video Page Begin
⌨️ (5:45:27) Build Follow Button
⌨️ (6:09:23) Build Like and Dislike Button
⌨️ (6:58:22) Description Component
⌨️ (7:12:12) Comment Component
⌨️ (7:46:57) Save Video Button
⌨️ (8:41:17) Profile Header Component
⌨️ (9:21:27) Profile Videos Page
⌨️ (9:33:47) Profile playlist Page
⌨️ (10:02:47) Playlist Page
⌨️ (10:33:48) History and Like Videos Page
⌨️ (10:42:01) Profile Announcements Page
⌨️ (11:07:57) Like and Dislike Announcement Buttons
⌨️ (11:28:27) Add announcements
⌨️ (11:40:37) Profile Following Page
⌨️ (12:03:22) Start of Dashboard Page
⌨️ (12:39:47) Publish Button
⌨️ (13:00:57) Delete Button
⌨️ (13:33:27) Edit Button
⌨️ (14:25:36) Upload Button

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news



Other Videos By freeCodeCamp.org


2023-09-25Dynamic Programming – 0/1 Knapsack Problem Tutorial
2023-09-22Rust Project Tutorial – Authentication Server Using Warp + JWT
2023-09-21Mojo Programming Language – Full Course for Beginners
2023-09-19Build SEO Optimized Blog with Next.js, Tailwind CSS & Contentlayer – Full Tutorial
2023-09-19Python Tutorial for Beginners (with mini-projects)
2023-09-18Build & Deploy AI SaaS with Reoccurring Revenue (Next.js, OpenAI, Stripe, Tailwind, Vercel)
2023-09-13Vector Embeddings Tutorial – Code Your Own AI Assistant with GPT-4 API + LangChain + NLP
2023-09-11Fundamentals of Finance & Economics for Businesses – Crash Course
2023-09-112D Wave Defense Game – GDevelop GameDev Tutorial
2023-09-08Dynamic Programming with Java – Learn to Solve Algorithmic Problems & Coding Challenges
2023-09-07YouTube Clone – T3 Stack Tutorial (Next.js, TypeScript, Tailwind CSS)
2023-09-05Full Stack Next.js, Typescript, Firebase Tutorial – Google Drive Clone
2023-09-05Prompt Engineering Tutorial – Master ChatGPT and LLM Responses
2023-09-04JavaScript Modules Crash Course
2023-09-01GraphQL Course for Beginners
2023-08-31MERN Stack Tutorial - Book Store Project
2023-08-30OWASP API Security Top 10 Course – Secure Your Web Apps
2023-08-29Machine Learning & Neural Networks without Libraries – No Black Box Course
2023-08-28Free Foundational C# Certification from Microsoft – Full Course
2023-08-25Create a Large Language Model from Scratch with Python – Tutorial
2023-08-24SQL For Web Developers - Complete Database Course