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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ Intro

1 of 36

1 of 36

⌨️ Intro

Class Central Classrooms beta

YouTube playlists curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro
  2. 2 ⌨️ Demo
  3. 3 ⌨️ Tech Stack
  4. 4 ⌨️ Setup
  5. 5 ⌨️ Write Prisma Models
  6. 6 ⌨️ Seed Database
  7. 7 ⌨️ Adding Tailwind
  8. 8 ⌨️ Button Component
  9. 9 ⌨️ Navbar Component
  10. 10 ⌨️ Sidebar Component
  11. 11 ⌨️ Layout Component and mobile sidebar
  12. 12 ⌨️ Mobile Footer Component
  13. 13 ⌨️ Home Page
  14. 14 ⌨️ Error/Loading Message Component
  15. 15 ⌨️ MultiColumnVideos Component
  16. 16 ⌨️ Search Page
  17. 17 ⌨️ Video Page Begin
  18. 18 ⌨️ Build Follow Button
  19. 19 ⌨️ Build Like and Dislike Button
  20. 20 ⌨️ Description Component
  21. 21 ⌨️ Comment Component
  22. 22 ⌨️ Save Video Button
  23. 23 ⌨️ Profile Header Component
  24. 24 ⌨️ Profile Videos Page
  25. 25 ⌨️ Profile playlist Page
  26. 26 ⌨️ Playlist Page
  27. 27 ⌨️ History and Like Videos Page
  28. 28 ⌨️ Profile Announcements Page
  29. 29 ⌨️ Like and Dislike Announcement Buttons
  30. 30 ⌨️ Add announcements
  31. 31 ⌨️ Profile Following Page
  32. 32 ⌨️ Start of Dashboard Page
  33. 33 ⌨️ Publish Button
  34. 34 ⌨️ Delete Button
  35. 35 ⌨️ Edit Button
  36. 36 ⌨️ Upload Button

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.