React JS Project Bootcamp: یک پروژه کلون YouTube بسازید

مقدمه Introduction

• مقدمه Introduction

YouTube Clone Project-1 YouTube Clone Project-1

• پروژه کلون یوتیوب - کد منبع YouTube Clone Project - Source Code

• پروژه کلون YouTube - نسخه نمایشی زنده YouTube Clone Project - Live Demo

• راه اندازی پروژه قسمت 1 Initializing Project Part-1

• ایجاد Navbar Part - 2 Creating Navbar Part - 2

• طراحی ورودی جستجو در Navbar قسمت - 3 Designing Search Input in Navbar Part - 3

• افزودن نماد پاک در قسمت جستجو - قسمت 4 Adding Clear Icon in Search Field Part - 4

• ایجاد نوار کناری به شما امکان می دهد نمادها را وارد کنیم قسمت - 5 Creating Sidebar Lets Import Icons Part - 5

• ایجاد نوار کناری اجازه می دهد تا شی دسته بندی را ایجاد کنیم - قسمت 6 Creating Sidebar Lets Create Category Object Part - 6

• ایجاد نوار کناری افزودن دسته ها قسمت-7 Creating Sidebar Add Categories Part-7

• ایجاد کارت های صفحه اصلی قسمت 8 Creating Home Page Cards Part-8

• ایجاد کارت های صفحه اصلی قسمت - 9 Creating Home Page Cards Part - 9

• YouTube API Setup Genering API_Key Part - 10 Youtube API Setup Generating API_Key Part - 10

• Going Through Videos API قسمت - 11 Going Through Videos API Part - 11

• Calling Popular Videos API Part - 12 Calling Popular Videos API Part - 12

• تجزیه و تحلیل ذخیره داده های ویدئوها - قسمت 13 Parsing Storing Videos Data Part - 13

• ساخت کارت های خانگی پویا قسمت - 14 Making Home Cards Dynamic Part - 14

• بیایید قسمت بند انگشتی کانال - 15 را واکشی کنیم Lets Fetch Channel Thumbnail Part - 15

• اجازه می‌دهیم تصویر کوچک کانال را به‌روزرسانی کنیم و قسمت 16 را رندر کنیم Lets Update Channel Thumbnail and Render It Part-16

• اجازه دهید دسته بندی ها را انتخاب کنیم - قسمت 17 Lets Select the Categories Part - 17

• Lets Go Through Categories API - 18 Lets Go Through Categories API Part - 18

• واکشی بخش شناسه دسته ها - 19 Fetching Categories Id Part - 19

• ذخیره سازی دسته ها شناسه قسمت - 20 Storing Categories Id Part - 20

• واکشی ویدیوها بر اساس شناسه رده - قسمت 21 Fetching Videos by Category Id Part - 21

• قلاب سفارشی برای صفحه اصلی قسمت - 22 Custom Hook For Home Page Part - 22

• Lets Store Tokens Page Part - 23 Lets Store Page Tokens Part - 23

• واکشی از صفحه بعدی قسمت - 24 Fetching from Next Page Part - 24

• افزودن ویژگی اسکرول بی نهایت قسمت - 25 Adding Infinite Scrolling Feature Part - 25

• اسکرول بی نهایت طبق دسته بندی قسمت - 26 Infinite Scroll as Per Categories Part - 26

• خطای واکشی در بارگیری قسمت اسپینر - 27 Rendering Fetch Error Loading Spinner Part - 27

• ایجاد مسیر صفحه تماشا - قسمت 28 Creating Watch Page Route Part - 28

• ایجاد طرح‌بندی صفحه تماشا قسمت 29 Creating Watch Page Layout Part-29

• ایجاد جزئیات صفحه تماشا قسمت - 30 Creating Watch Page Details Part - 30

• ایجاد دکمه های صفحه تماشا قسمت - 31 Creating Watch Page Buttons Part - 31

• طراحی توضیحات صفحه ساعت - 32 Designing Watch Page Description Part - 32

• طراحی مینی کارت قسمت - 33 Designing Mini Cards Part - 33

• اضافه کردن مدت زمان ویدیو در Mini Cards قسمت - 34 Adding Video Duration in Mini Cards Part - 34

• واکشی داده های ویدیوها برای صفحه تماشا قسمت - 35 Fetching Videos Data for Watch Page Part - 35

• ذخیره سازی داده های ویدیو قسمت - 36 Storing Videos Data Part - 36

• ایجاد توابع کمکی برای واکشی داده‌های ویدیو قسمت - 37 Creating Helper Functions for Fetching Videos Data Part - 37

• اجازه دهید جزئیات ویدیو را نشان دهیم قسمت - 38 Lets Show the Video Details Part - 38

• افزودن ویژگی های جدید در قسمت داده های ویدئویی - 39 Add New Properties in Video Data Part - 39

• ایجاد بخش مشاهده ویدیو قسمت - 40 Creating Video Viewing Section Part - 40

• واکشی فعالیت‌ها برای صفحه تماشا قسمت - 41 Fetching Activities For Watch Page Part - 41

• ذخیره همه شناسه‌های ویدیوی واکشی شده در یک آرایه بخش - 42 Storing All Fetched Video Ids in an Array Part - 42

• واکشی و تجزیه ویدئوها قسمت - 43 Fetching and Parsing Videos Data Part - 43

• ذخیره و نمایش داده‌های ویدیو قسمت - 44 Storing And Displaying Videos Data Part - 44

• بخش نظرات طراحی قسمت - 45 Designing Comments Section Part - 45

• واکشی نظرات ویدیو قسمت - 46 Fetching Video Comments Part - 46

• تجزیه و ذخیره نظرات قسمت - 47 Parsing And Storing Comments Part - 47

• نمایش نظرات واکشی شده قسمت - 48 Displaying Fetched Comments Part - 48

• افزودن دکمه بارگذاری بیشتر برای نظرات قسمت - 49 Adding Load More Button for Comments Part - 49

• طراحی پاسخ نظرات قسمت - 50 Designing Comment Replies Part - 50

• واکشی پاسخ های نظر تجزیه آنها قسمت - 51 Fetching Comment Replies Parsing Them Part - 51

• نمایش نظرات پاسخ ها قسمت - 52 Displaying Comments Replies Part - 52

• اجازه دهید برخی از اشکالات را حل کنیم قسمت - 53 Lets Resolve Some Bugs Part - 53

• طراحی صفحه کانال جزئیات کانال قسمت - 54 Designing Channel Page Channel Details Part - 54

• واکشی اطلاعات کانال قسمت - 55 Fetching Channel Info Part - 55

• تجزیه و ذخیره داده های واکشی شده بخش - 56 Parsing and Storing Fetched Data Part - 56

• نمایش داده های کانال قسمت - 57 Displaying Channel Data Part - 57

• ایجاد قلاب سفارشی برای کانال قسمت - 58 Creating Custom Hook for Channel Part - 58

• اجازه دهید فایل فراخوانی API جداگانه برای ویدیوها ایجاد کنیم، قسمت اطلاعات کانال - 59 Lets Create Separate API Call File for Videos Channel Info Part - 59

• اجازه دهید فایل فراخوانی API جداگانه برای پاسخ‌های نظرات ایجاد کنیم قسمت - 60 Lets Create Separate API Call File for Comments Replies Part - 60

• اجازه دهید فایل فراخوانی API جداگانه برای جزئیات ویدیو ایجاد کنیم. فعالیت های کانال قسمت 61 Lets Create Seperate API Call File for Video Details Channel Activities Part-61

• اجازه دهید فایل فراخوانی API جداگانه برای دسته ها ایجاد کنیم - قسمت 62 Lets Create Separate API Call File for Categories Part - 62

• ایجاد مدال برای توضیح کانال قسمت - 63 Creating Modal for Channel Description Part - 63

• Making Modal Scroll-able Part - 64 Making Modal Scroll-able Part - 64

• طراحی دکمه های انتخاب دسته - قسمت 65 Designing Category Selection Buttons Part - 65

• طراحی کارت گرافیک برای کانال صفحه قسمت - 66 Designing Video Cards for Channel Page Part - 66

• واکشی ویدیوها برای صفحه کانال قسمت - 67 Fetching Videos for Channel Page Part - 67

• ذخیره داده های ویدیوها برای صفحه کانال قسمت - 68 Storing Videos Data for Channel Page Part - 68

• نمایش جزئیات ویدئو در قسمت کارت - 69 Displaying Video Details in Cards Part - 69

• ایجاد دکمه بارگذاری بیشتر برای ویدیوها واکشی ویدیوهای بیشتر قسمت - 70 Creating Load More button For Videos Fetching More Videos Part - 70

• به روز رسانی قسمت فیلم های ذخیره شده - 71 Updating the Stored Videos Part - 71

• افزودن اسکرول بی نهایت برای ویدیوهای کانال قسمت - 72 Adding Infinite Scrolling For Channel Videos Part - 72

• طراحی کارت های لیست پخش صفحه کانال قسمت - 73 Designing Channel Page Playlist Cards Part - 73

• واکشی داده های لیست پخش - قسمت 74 Fetching Playlist Data Part - 74

• تجزیه و تحلیل داده های لیست پخش - 75 Parsing Playlist Data Part - 75

• به روز رسانی قسمت قلاب کانال کاربر - 76 Updating The User Channel Hook Part - 76

• ارائه داده های واکشی شده در لیست های پخش قسمت - 77 Rendering Fetched Data in Playlists Part - 77

• افزودن پیمایش بی نهایت برای لیست های پخش قسمت - 78 Adding Infinite Scrolling for Playlists Part - 78

• حذف لودر هنگام واکشی همه ویدیوها قسمت - 79 Removing Loader When We Fetch All Videos Part - 79

• ایجاد فایل تجزیه قسمت - 80 Creating Parse File Part - 80

• طراحی قسمت کارت آیتم لیست پخش - 81 Designing Playlist Item Card Part - 81

• واکشی داده های آیتم های لیست پخش - 82 Fetching Playlist Items Data Part - 82

• نمایش جزئیات لیست پخش قسمت - 83 Displaying PlayList Details Part - 83

• ایجاد هوک سفارشی برای موارد لیست پخش قسمت - 84 Creating Custom Hook for Playlist Items Part - 84

• طراحی قسمت کارت ویدیو لیست پخش - 85 Designing Playlist Video Card Part - 85

• واکشی ویدیوهای لیست پخش قسمت - 86 Fetching Playlist Videos Part - 86

• تجزیه و تحلیل داده های ویدیوهای لیست پخش - 87 Parsing Playlist Videos Data Part - 87

• ذخیره سازی داده های ویدیوهای لیست پخش - قسمت 88 Storing Playlist Videos Data Part - 88

• ایجاد قلاب سفارشی برای آیتم لیست پخش قسمت - 89 Creating Custom Hook for Playlist Item Part - 89

• افزودن تعامل به صفحه تماشای اصلی قسمت - 90 Adding Interactivity to Home Watch Page Part - 90

• افزودن تعامل به صفحه فهرست پخش صفحه کانال - قسمت 91 Adding Interactivity to Channel Page Playlist Page Part - 91

• ایجاد قسمت مسیر صفحه جستجو - 92 Creating Search Page Route Part - 92

• واکشی شناسه ویدیو با استفاده از قسمت جستجوی API - 93 Fetching Video Id Using Search API Part - 93

• دریافت تجزیه و تحلیل داده های ویدئویی برای صفحه جستجو قسمت - 94 Getting Parsing Video Data for Search Page Part - 94

• ذخیره سازی داده های ویدیوی جستجو شده قسمت - 95 Storing Searched Video Data Part - 95

• نماد بستن در قسمت قسمت جستجو - 96 Close Icon In Search Field Part - 96

• ساخت Navbar Responsive قسمت - 97 Making Navbar Responsive Part - 97

• ریسپانسیو کردن صفحه اصلی قسمت - 98 Making Home Page Responsive Part - 98

• ساخت واچ صفحه ریسپانسیو قسمت - 99 Making Watch Page Responsive Part - 99

• ریسپانسیو کردن صفحه کانال قسمت - 100 Making Channel Page Responsive Part - 100

• ساخت صفحه لیست پخش پاسخگو قسمت - 101 Making Playlist Page Responsive Part - 101

• ارسال کد به قسمت Github - 102 Pushing Code to Github Part - 102

• میزبانی برنامه در Vercel Part - 103 Hosting App on Vercel Part - 103

• افزودن قسمت ایمنی نوع ضروری-104 Adding Necessary Type Safety Part-104

• پایان دوره Course Wrap Up