آموزش ایجاد Node و React برنامه بررسی فیلم - MERN Stack 2022

سرفصل ها و درس ها

قبل از اینکه شروع کنیم Before we begin

• نکته مهم - قبل از خرید Important Note - Before You Purchase

• خود پروژه The Project Itself

• چگونه بیشترین بهره را ببریم؟ How to Get Most?

• کد منبع کجاست Where is The Source Code

• برنامه نهایی را به من نشان بده Show Me Final App

قبل از اینکه شروع کنیم Before we begin

• نکته مهم - قبل از خرید Important Note - Before You Purchase

• خود پروژه The Project Itself

• چگونه بیشترین بهره را ببریم؟ How to Get Most?

• کد منبع کجاست Where is The Source Code

• برنامه نهایی را به من نشان بده Show Me Final App

Basic Node Express & Project Initialization Basic Node Express & Project Initialization

• تصورات غلط در node js Misconceptions in node js

• Backend API Backend API

• مسیرها و کنترلرهای API API Routes & Controllers

• نصب Node JS Installing Node JS

• راه اندازی VS Code Setting up VS Code

• اولیه سازی پروژه Project Initialization

• اولین Node JS Code First Node JS Code

• اولین سرور اکسپرس ما Our First Express Server

• Refactoring با الگوی MVC Refactoring with MVC Pattern

• از منظر جلویی فکر کنید Think from the front end perspective

Basic Node Express & Project Initialization Basic Node Express & Project Initialization

• تصورات غلط در node js Misconceptions in node js

• Backend API Backend API

• مسیرها و کنترلرهای API API Routes & Controllers

• نصب Node JS Installing Node JS

• راه اندازی VS Code Setting up VS Code

• اولیه سازی پروژه Project Initialization

• اولین Node JS Code First Node JS Code

• اولین سرور اکسپرس ما Our First Express Server

• Refactoring با الگوی MVC Refactoring with MVC Pattern

• از منظر جلویی فکر کنید Think from the front end perspective

ایجاد کاربر جدید (ثبت نام) Creating New User (Sign up)

• نصب پستچی Installing Postman

• پیشوند API و Nodemon API Prefix and The Nodemon

• ارسال و دریافت JSON Post and Receving JSON

• نصب MongoDB به صورت محلی Installing MongoDB Locally

• اتصال به MongoDB محلی Connecting to Local MongoDB

• NPM چیست؟ What is NPM

• مدل های مانگوز Mongoose Models

• ایجاد کاربر جدید Creating New User

• هش کردن رمز عبور Hashing Password

• جلوگیری از کاربر تکراری Preventing Duplicate User

• ابزارهای میانی در داخل اکسپرس Middlewares inside Express

• اعتبار سنجی اکسپرس Express Validator

ایجاد کاربر جدید (ثبت نام) Creating New User (Sign up)

• نصب پستچی Installing Postman

• پیشوند API و Nodemon API Prefix and The Nodemon

• ارسال و دریافت JSON Post and Receving JSON

• نصب MongoDB به صورت محلی Installing MongoDB Locally

• اتصال به MongoDB محلی Connecting to Local MongoDB

• NPM چیست؟ What is NPM

• مدل های مانگوز Mongoose Models

• ایجاد کاربر جدید Creating New User

• هش کردن رمز عبور Hashing Password

• جلوگیری از کاربر تکراری Preventing Duplicate User

• ابزارهای میانی در داخل اکسپرس Middlewares inside Express

• اعتبار سنجی اکسپرس Express Validator

تایید ایمیل Email Verification

• تأیید ایمیل چرا و چگونه Email Verification Why and How

• راه اندازی mailtrap Setting up mailtrap

• طرحواره رمز تایید ایمیل Email Verification Token Schema

• ارسال ایمیل تایید Sending Verification Email

• تأیید رمز تأیید ایمیل (OTP) Verifying Email Verification Token (OTP)

• مقایسه Hashed OTP با تأیید رمز تأیید ایمیل Comparing Hashed OTP to Verify Email Verification Token

• رمز تأیید مجدد ایمیل (OTP) Resend Email Verification Token (OTP)

• Refactor Refactor

تایید ایمیل Email Verification

• تأیید ایمیل چرا و چگونه Email Verification Why and How

• راه اندازی mailtrap Setting up mailtrap

• طرحواره رمز تایید ایمیل Email Verification Token Schema

• ارسال ایمیل تایید Sending Verification Email

• تأیید رمز تأیید ایمیل (OTP) Verifying Email Verification Token (OTP)

• مقایسه Hashed OTP با تأیید رمز تأیید ایمیل Comparing Hashed OTP to Verify Email Verification Token

• رمز تأیید مجدد ایمیل (OTP) Resend Email Verification Token (OTP)

• Refactor Refactor

بازنشانی رمز عبور Reset Password

• مدل برای رمز بازنشانی رمز عبور Model For Password Reset Token

• کنترل کننده بازنشانی رمز عبور Password Reset Controller

• ارسال لینک بازیابی رمز عبور Sending Password Reset Link

• میان افزار برای بررسی رمز عبور بازنشانی Middleware to Check Reset Pass Token

• تغییر رمز عبور کاربر Changing The User Password

بازنشانی رمز عبور Reset Password

• مدل برای رمز بازنشانی رمز عبور Model For Password Reset Token

• کنترل کننده بازنشانی رمز عبور Password Reset Controller

• ارسال لینک بازیابی رمز عبور Sending Password Reset Link

• میان افزار برای بررسی رمز عبور بازنشانی Middleware to Check Reset Pass Token

• تغییر رمز عبور کاربر Changing The User Password

ورود کاربر - متغیرهای محیطی و مدیریت خطا User Sign In - Environment Variables & Error Handling

• ورود به سیستم کاربر User Sign-in

• متغیرهای محیطی Environment Variables

• Async Await Error Handling Async Await Error Handling

ورود کاربر - متغیرهای محیطی و مدیریت خطا User Sign In - Environment Variables & Error Handling

• ورود به سیستم کاربر User Sign-in

• متغیرهای محیطی Environment Variables

• Async Await Error Handling Async Await Error Handling

ایجاد رابط کاربری احراز هویت Creating Authentication UI

• ابتدا چیزی را طراحی کنید Design Something First

• مهم! به روز رسانی جدید از React 18 Important! New Update From React 18

• راه اندازی پروژه با React و Tailwind CSS Initializing Project With React and Tailwind CSS

• ایجاد نوار ناوبری کاربر Creating User Navbar

• استفاده از نمادهای واکنش Using react-icons

• فرم وارد شوید Sign in Form

• Refactoring Signin Form Refactoring Signin Form

• تکمیل فرم ورود Finalizing Signin Form

• فرم ثبت نام Signup Form

• راه اندازی React Router DOM Setting up React Router DOM

• فرم فراموشی رمز عبور Forget Password Form

• رابط کاربری فرم OTP تأیید ایمیل Email Verification OTP Form UI

• برای پشتیبانی از فایرفاکس For Firefox Support

• حرکت به قسمت OTP بعدی Moving to Next OTP Field

• به روز رسانی وضعیت OTP Updating OTP State

• انتقال به قسمت قبلی OTP Moving to Previous OTP Field

• به روز رسانی برای React 18 - شکستن تغییرات برای OTP Field Update for React 18 - Breaking Changes For OTP Field

• انتقال به قسمت قبلی از قسمت خالی OTP Moving to Previous From Empty OTP Field

• تایید فرم رمز عبور Confirm Password Form

• اصلاح ورود به سیستم ناوبری و مسیر خانه Fixing Navigation Login and Home Route

• درک Context API Understanding Context API

• فعال کردن حالت تاریک Enabling Dark Mode

• اضافه کردن کلاس تم تیره Adding Dark Theme Class

• تغییر موضوع Toggling Theme

• کد تم Refactoring Refactoring Theme Code

• رنگ های مختلف برای حالت روشن و تاریک Different Color for Light & Dark Mode

• تم نهایی Finalizing Theme

• وضعیت ثبت نام (userinfo) Signup State (userInfo)

• اعتبار سنجی فرم ثبت نام Validating Signup Form

• رفع Create User Respnse و راه اندازی Axios Fixing Create User Respnse and Setting up Axios

• ارسال اطلاعات کاربر به Backend برای ثبت نام Sending User Info to Backend for Signup

• رفع خطای CORS Fixing CORS Error

• تعمیر 404 یافت نشد Fixing 404 Not Found

• ارائه صفحه تأیید فقط برای کاربر معتبر Rendering Verification Page For Only Valid User

• ارسال برای فرم OTP را بررسی کنید Handle Submit For OTP Form

• اعتبار سنجی OTP OTP Validation

• تایید ایمیل کاربر با OTP Verifing User Email With OTP

• متن اعلان و مؤلفه Notification Context & The Component

• به روز رسانی اعلان Updating Notification

• امضای رمز در تأیید ایمیل Signing Token on Email Verification

• راه اندازی Auth Context Setting up Auth Context

• با ایمیل و رمز عبور وارد شوید Signin with Email and Password

• نمایش نشانگر اشغال در هنگام ورود به سیستم Rendering Busy Indicator on Sign-in

• ایجاد میان افزار isAuth Creating The isAuth Middleware

• درخواست به is-auth Making Request to is-auth

• اگر از قبل وارد شده باشید، کاربر را به صفحه اصلی هدایت کنید Redirect User to Home If Already Logged in

• رسیدگی به خروج Handling Logout

• ورود خودکار پس از تأیید ایمیل Auto Sign in After Email Verification

• درک بازنشانی رمز عبور Understanding Reset Password

• روش برای فراموش کردن رمز عبور و رسیدگی به وضعیت فرم Method for Forget Password & Handling Form State

• خواندن پارامترهای پرس و جو Reading Query Params

• رندر بازنشانی رمز عبور نشانگر تأیید است Rendering Reset Password isVerifying Indicator

• مدیریت توکن نامعتبر و معتبر Handling Invalid and Valid Token

• رفع اشکال کوچک Fixing Small Bug

• اعتبار سنجی رمز عبور جدید Validating New Password

• بازنشانی رمز عبور جدید Resetting New Password

• جزء برای ارسال مجدد تأیید ایمیل Component to Resend Email Verification

• به صورت مشروط رندر ارسال مجدد تأیید ایمیل Conditionally Rendering Resend Email Verification

• پیمایش به مؤلفه تأیید مجدد ایمیل Navigating to Resend Email Verification Component

• پیوند به درخواست مجدد OTP تأیید ایمیل Link to Reapply Email Verification OTP

• در حال ارسال مجدد رمز تأیید ایمیل Resending Email Verification Token

• Refactoring مولفه تأیید مجدد ایمیل Refactoring Resend Email Verification Component

ایجاد رابط کاربری احراز هویت Creating Authentication UI

• ابتدا چیزی را طراحی کنید Design Something First

• مهم! به روز رسانی جدید از React 18 Important! New Update From React 18

• راه اندازی پروژه با React و Tailwind CSS Initializing Project With React and Tailwind CSS

• ایجاد نوار ناوبری کاربر Creating User Navbar

• استفاده از نمادهای واکنش Using react-icons

• فرم وارد شوید Sign in Form

• Refactoring Signin Form Refactoring Signin Form

• تکمیل فرم ورود Finalizing Signin Form

• فرم ثبت نام Signup Form

• راه اندازی React Router DOM Setting up React Router DOM

• فرم فراموشی رمز عبور Forget Password Form

• رابط کاربری فرم OTP تأیید ایمیل Email Verification OTP Form UI

• برای پشتیبانی از فایرفاکس For Firefox Support

• حرکت به قسمت OTP بعدی Moving to Next OTP Field

• به روز رسانی وضعیت OTP Updating OTP State

• انتقال به قسمت قبلی OTP Moving to Previous OTP Field

• به روز رسانی برای React 18 - شکستن تغییرات برای OTP Field Update for React 18 - Breaking Changes For OTP Field

• انتقال به قسمت قبلی از قسمت خالی OTP Moving to Previous From Empty OTP Field

• تایید فرم رمز عبور Confirm Password Form

• اصلاح ورود به سیستم ناوبری و مسیر خانه Fixing Navigation Login and Home Route

• درک Context API Understanding Context API

• فعال کردن حالت تاریک Enabling Dark Mode

• اضافه کردن کلاس تم تیره Adding Dark Theme Class

• تغییر موضوع Toggling Theme

• کد تم Refactoring Refactoring Theme Code

• رنگ های مختلف برای حالت روشن و تاریک Different Color for Light & Dark Mode

• تم نهایی Finalizing Theme

• وضعیت ثبت نام (userinfo) Signup State (userInfo)

• اعتبار سنجی فرم ثبت نام Validating Signup Form

• رفع Create User Respnse و راه اندازی Axios Fixing Create User Respnse and Setting up Axios

• ارسال اطلاعات کاربر به Backend برای ثبت نام Sending User Info to Backend for Signup

• رفع خطای CORS Fixing CORS Error

• تعمیر 404 یافت نشد Fixing 404 Not Found

• ارائه صفحه تأیید فقط برای کاربر معتبر Rendering Verification Page For Only Valid User

• ارسال برای فرم OTP را بررسی کنید Handle Submit For OTP Form

• اعتبار سنجی OTP OTP Validation

• تایید ایمیل کاربر با OTP Verifing User Email With OTP

• متن اعلان و مؤلفه Notification Context & The Component

• به روز رسانی اعلان Updating Notification

• امضای رمز در تأیید ایمیل Signing Token on Email Verification

• راه اندازی Auth Context Setting up Auth Context

• با ایمیل و رمز عبور وارد شوید Signin with Email and Password

• نمایش نشانگر اشغال در هنگام ورود به سیستم Rendering Busy Indicator on Sign-in

• ایجاد میان افزار isAuth Creating The isAuth Middleware

• درخواست به is-auth Making Request to is-auth

• اگر از قبل وارد شده باشید، کاربر را به صفحه اصلی هدایت کنید Redirect User to Home If Already Logged in

• رسیدگی به خروج Handling Logout

• ورود خودکار پس از تأیید ایمیل Auto Sign in After Email Verification

• درک بازنشانی رمز عبور Understanding Reset Password

• روش برای فراموش کردن رمز عبور و رسیدگی به وضعیت فرم Method for Forget Password & Handling Form State

• خواندن پارامترهای پرس و جو Reading Query Params

• رندر بازنشانی رمز عبور نشانگر تأیید است Rendering Reset Password isVerifying Indicator

• مدیریت توکن نامعتبر و معتبر Handling Invalid and Valid Token

• رفع اشکال کوچک Fixing Small Bug

• اعتبار سنجی رمز عبور جدید Validating New Password

• بازنشانی رمز عبور جدید Resetting New Password

• جزء برای ارسال مجدد تأیید ایمیل Component to Resend Email Verification

• به صورت مشروط رندر ارسال مجدد تأیید ایمیل Conditionally Rendering Resend Email Verification

• پیمایش به مؤلفه تأیید مجدد ایمیل Navigating to Resend Email Verification Component

• پیوند به درخواست مجدد OTP تأیید ایمیل Link to Reapply Email Verification OTP

• در حال ارسال مجدد رمز تأیید ایمیل Resending Email Verification Token

• Refactoring مولفه تأیید مجدد ایمیل Refactoring Resend Email Verification Component

در حال آپلود بازیگر Uploading Actor

• طرحواره بازیگر Actor Schema

• راه اندازی Router For Actor Setting up Router For Actor

• پیکربندی مولتر Multer Configuration

• میان افزار برای اعتبارسنجی بازیگر Middleware to Validate Actor

• پیکربندی کلودیناری (یک فضای ذخیره‌سازی ابری) Configuring Cloudinary (A Cloud Storage)

• آپلود تصویر در کلودیناری Uploading Image To Cloudinary

• آپلود اختیاری تصویر Optionally Uploading Image

• به روز رسانی بازیگر Updating Actor

• بهینه سازی تصویر Image Optimization

• حذف یک بازیگر Deleting an Actor

• جستجوی بازیگر Search Actor

• واکشی آخرین بازیگران (سوابق) Fetching Latest Actors (Records)

• واکشی بازیگر مجرد (رکورد) Fetching Single Actor (Record)

• Refactoring Actor Controller Refactoring Actor Controller

در حال آپلود بازیگر Uploading Actor

• طرحواره بازیگر Actor Schema

• راه اندازی Router For Actor Setting up Router For Actor

• پیکربندی مولتر Multer Configuration

• میان افزار برای اعتبارسنجی بازیگر Middleware to Validate Actor

• پیکربندی کلودیناری (یک فضای ذخیره‌سازی ابری) Configuring Cloudinary (A Cloud Storage)

• آپلود تصویر در کلودیناری Uploading Image To Cloudinary

• آپلود اختیاری تصویر Optionally Uploading Image

• به روز رسانی بازیگر Updating Actor

• بهینه سازی تصویر Image Optimization

• حذف یک بازیگر Deleting an Actor

• جستجوی بازیگر Search Actor

• واکشی آخرین بازیگران (سوابق) Fetching Latest Actors (Records)

• واکشی بازیگر مجرد (رکورد) Fetching Single Actor (Record)

• Refactoring Actor Controller Refactoring Actor Controller

احراز هویت مبتنی بر نقش Role Based Authentication

• نقش متفاوت برای کاربران مختلف Different Role For Different User

• میان افزار isAdmin isAdmin Middleware

• مسیرها فقط برای مدیر Routes Only For Admin

احراز هویت مبتنی بر نقش Role Based Authentication

• نقش متفاوت برای کاربران مختلف Different Role For Different User

• میان افزار isAdmin isAdmin Middleware

• مسیرها فقط برای مدیر Routes Only For Admin

API آپلود فیلم Movie Upload API

• ایجاد طرحواره Creating Schema

• چگونه آپلود خواهیم کرد How We Will Upload

• مسیر آپلود تریلر Trailer Upload Route

• بارگذاری ویدیوی تریلر در The Cloud Uploading Trailer Video to The Cloud

• اولین قدم برای آپلود یک فیلم The First Step Towards Uploading a Movie

• ساختار داده های فیلم Data Structure of The Movie

• منطق های اعتبار سنجی پیچیده The Complex Validation Logics

• رفع اشکال Fixing a Bug

• ارسال و دریافت آرایه و اشیا Sending and Receiving Array and Objects

• تجزیه داده ها Parse Data

• ساخت فیلم جدید Creating a New Movie

• بارگذاری پوستر با اندازه های مختلف Uploading Poster With Multiple Sizes

• ذخیره ریز عکسهای متعدد Storing Multiple Thumbnails

API آپلود فیلم Movie Upload API

• ایجاد طرحواره Creating Schema

• چگونه آپلود خواهیم کرد How We Will Upload

• مسیر آپلود تریلر Trailer Upload Route

• بارگذاری ویدیوی تریلر در The Cloud Uploading Trailer Video to The Cloud

• اولین قدم برای آپلود یک فیلم The First Step Towards Uploading a Movie

• ساختار داده های فیلم Data Structure of The Movie

• منطق های اعتبار سنجی پیچیده The Complex Validation Logics

• رفع اشکال Fixing a Bug

• ارسال و دریافت آرایه و اشیا Sending and Receiving Array and Objects

• تجزیه داده ها Parse Data

• ساخت فیلم جدید Creating a New Movie

• بارگذاری پوستر با اندازه های مختلف Uploading Poster With Multiple Sizes

• ذخیره ریز عکسهای متعدد Storing Multiple Thumbnails

به روز رسانی Movie API Update Movie API

• به روز رسانی فیلم Update Movie

• به روز رسانی فیلم بدون پوستر Update Movie Without Poster

• به روز رسانی فیلم با پوستر Update Movie With Poster

• حذف فیلم از DB + Cloud Removing Movie From DB + Cloud

به روز رسانی Movie API Update Movie API

• به روز رسانی فیلم Update Movie

• به روز رسانی فیلم بدون پوستر Update Movie Without Poster

• به روز رسانی فیلم با پوستر Update Movie With Poster

• حذف فیلم از DB + Cloud Removing Movie From DB + Cloud

ایجاد نوار ناوبری مدیریت Creating Admin Navbar

• قبل از اینکه بیشتر حرکت کنیم Before We Move Further

• ارسال نقش مدیر از Backend Sending Admin Role From Backend

• پیدا کردن اینکه آیا کاربر مدیر است یا خیر Finding out if user is an Admin or Not

• ناوبر متفاوت برای مدیر Different Navigator for Admin

• رفع مشکل ناوبری Fixing Navigation Issue

• ایجاد نوار ناوبری Creating Navbar

• افزودن آیکون برای موارد Nav Adding Icons For Nav Items

• دکمه خروج Logout Button

• قابل مشاهده کردن Admin Nav در همه جا Making Admin Nav Visible Everywhere

• مدیریت خروج از پنل مدیریت Handling Logout from Admin Panel

• ایجاد نوار جستجو و دکمه ایجاد Creating Search Bar and Create Button

• رندر Create Options Rendering Create Options

• Refactoring Create Options Refactoring Create Options

• تغییر حالت گزینه‌ها Toggling Options Modal

• افزودن انیمیشن به Options Modal Adding Animation to Options Modal

• بستن Modal روی کلیک کردن Outside Closing Modal on Clicking Outside

• مهم! مشکل با کشویی Important! issue with dropdown

• بستن گزینه ها با انیمیشن Closing Options With Animation

• بگذارید توضیح دهم که تا به حال چه کار کرده ایم Let Me Explain What We Did So Far

• Refactoring Header Component Refactoring Header Component

• دکمه تغییر موضوع در پنل مدیریت Theme Toggling Button Inside Admin Panel

ایجاد نوار ناوبری مدیریت Creating Admin Navbar

• قبل از اینکه بیشتر حرکت کنیم Before We Move Further

• ارسال نقش مدیر از Backend Sending Admin Role From Backend

• پیدا کردن اینکه آیا کاربر مدیر است یا خیر Finding out if user is an Admin or Not

• ناوبر متفاوت برای مدیر Different Navigator for Admin

• رفع مشکل ناوبری Fixing Navigation Issue

• ایجاد نوار ناوبری Creating Navbar

• افزودن آیکون برای موارد Nav Adding Icons For Nav Items

• دکمه خروج Logout Button

• قابل مشاهده کردن Admin Nav در همه جا Making Admin Nav Visible Everywhere

• مدیریت خروج از پنل مدیریت Handling Logout from Admin Panel

• ایجاد نوار جستجو و دکمه ایجاد Creating Search Bar and Create Button

• رندر Create Options Rendering Create Options

• Refactoring Create Options Refactoring Create Options

• تغییر حالت گزینه‌ها Toggling Options Modal

• افزودن انیمیشن به Options Modal Adding Animation to Options Modal

• بستن Modal روی کلیک کردن Outside Closing Modal on Clicking Outside

• مهم! مشکل با کشویی Important! issue with dropdown

• بستن گزینه ها با انیمیشن Closing Options With Animation

• بگذارید توضیح دهم که تا به حال چه کار کرده ایم Let Me Explain What We Did So Far

• Refactoring Header Component Refactoring Header Component

• دکمه تغییر موضوع در پنل مدیریت Theme Toggling Button Inside Admin Panel

مدال آپلود فیلم Movie Upload Modal

• درک فرآیند آپلود فیلم Understanding The Movie Uploading Process

• فهرست کردن گزینه های کلیک ها Listining to Clicks Options

• ایجاد کانتینر مدال Creating Modal Container

• برای آپلود ویدیوی تریلر، فایل‌ها را بکشید React Drag Files to Upload Trailer Video

• رندر کردن فایل های React Drag Drop Rendering React Drag Drop Files

• پذیرش فقط فایل های ویدئویی Accepting Only Video Files

• روش آپلود تریلر Upload Trailer Method

• در حال آپلود تریلر از فرانت اند ما Uploading Trailer From Our Frontend

• برای انتخاب ویدیوی تریلر، جزء را جدا کنید Separate Component to Select Trailer Video

• مؤلفه ای برای نمایش پیشرفت آپلود Component to Display Upload Progress

• Refactoring مولفه پیشرفت آپلود Refactoring Upload Progress Component

• دریافت پیشرفت واقعی آپلود Getting Actual Upload Progress

• پاسخ دیرهنگام از سرور چرا؟ Late Response From The Server Why?

• بارگذاری تریلر در پس‌زمینه Uploading Trailer in The Background

• فیلد ورودی عنوان فیلم Movie Title Input Field

• 35 کلاس Refactoring برای فیلد ورودی 35 Refactoring Classes for Input Field

• ایجاد ورودی جعلی برای برچسب ها Creating Fake Input For Tags

• مولفه تگ استایلینگ Styling Tag Component

• جدا کردن برچسب ها با کاما و Enter Separating Tags by Comma and Enter

• مدیریت Backspace Handling Backspace

• حذف برچسب روی X کلیک کنید Removing Tag on X Click

• هنگام استفاده از چند دکمه در یک فرم While Using Multiple Buttons inside A Form

• رفع تگ چند خطی و نوار پیمایش Cutom Fixing Multiline Tag & Cutom Scroll Bar

• برچسب‌ها Input Scroll Into View Tags Input Scroll Into View

• onFocus و onBlur در فیلد ورودی جعلی onFocus and onBlur on Fake Input Field

مدال آپلود فیلم Movie Upload Modal

• درک فرآیند آپلود فیلم Understanding The Movie Uploading Process

• فهرست کردن گزینه های کلیک ها Listining to Clicks Options

• ایجاد کانتینر مدال Creating Modal Container

• برای آپلود ویدیوی تریلر، فایل‌ها را بکشید React Drag Files to Upload Trailer Video

• رندر کردن فایل های React Drag Drop Rendering React Drag Drop Files

• پذیرش فقط فایل های ویدئویی Accepting Only Video Files

• روش آپلود تریلر Upload Trailer Method

• در حال آپلود تریلر از فرانت اند ما Uploading Trailer From Our Frontend

• برای انتخاب ویدیوی تریلر، جزء را جدا کنید Separate Component to Select Trailer Video

• مؤلفه ای برای نمایش پیشرفت آپلود Component to Display Upload Progress

• Refactoring مولفه پیشرفت آپلود Refactoring Upload Progress Component

• دریافت پیشرفت واقعی آپلود Getting Actual Upload Progress

• پاسخ دیرهنگام از سرور چرا؟ Late Response From The Server Why?

• بارگذاری تریلر در پس‌زمینه Uploading Trailer in The Background

• فیلد ورودی عنوان فیلم Movie Title Input Field

• 35 کلاس Refactoring برای فیلد ورودی 35 Refactoring Classes for Input Field

• ایجاد ورودی جعلی برای برچسب ها Creating Fake Input For Tags

• مولفه تگ استایلینگ Styling Tag Component

• جدا کردن برچسب ها با کاما و Enter Separating Tags by Comma and Enter

• مدیریت Backspace Handling Backspace

• حذف برچسب روی X کلیک کنید Removing Tag on X Click

• هنگام استفاده از چند دکمه در یک فرم While Using Multiple Buttons inside A Form

• رفع تگ چند خطی و نوار پیمایش Cutom Fixing Multiline Tag & Cutom Scroll Bar

• برچسب‌ها Input Scroll Into View Tags Input Scroll Into View

• onFocus و onBlur در فیلد ورودی جعلی onFocus and onBlur on Fake Input Field

فیلد جستجوی زنده Live Search Field

• ورودی برای جستجوی زنده Input For Live Search

• کانتینر نتایج جستجوی زنده Live Search Result Container

• مورد نتیجه جستجوی زنده Live Search Result Item

• نمایش و پنهان کردن نتایج جستجو Show & Hide Search Results

• حرکت انتخاب به بالا و پایین Moving Selection Up & Down

• ایجاد حلقه انتخاب نامحدود Creating Infinite Selection Loop

• به نمای نتیجه بروید Scroll Into Result View

• بازنشانی فهرست انتخاب Reset Selection Index

• Result On Enter را انتخاب کنید Select Result On Enter Press

• رفع onClick on Results Fixing onClick on Results

• Refactor Live Search Component Part 1 Refactor Live Search Component Part 1

• Refactor Live Search Component Part 2 Refactor Live Search Component Part 2

فیلد جستجوی زنده Live Search Field

• ورودی برای جستجوی زنده Input For Live Search

• کانتینر نتایج جستجوی زنده Live Search Result Container

• مورد نتیجه جستجوی زنده Live Search Result Item

• نمایش و پنهان کردن نتایج جستجو Show & Hide Search Results

• حرکت انتخاب به بالا و پایین Moving Selection Up & Down

• ایجاد حلقه انتخاب نامحدود Creating Infinite Selection Loop

• به نمای نتیجه بروید Scroll Into Result View

• بازنشانی فهرست انتخاب Reset Selection Index

• Result On Enter را انتخاب کنید Select Result On Enter Press

• رفع onClick on Results Fixing onClick on Results

• Refactor Live Search Component Part 1 Refactor Live Search Component Part 1

• Refactor Live Search Component Part 2 Refactor Live Search Component Part 2

حالت رسیدگی به فرم Handling Form State

• مدیریت ایالات فرم Managing Form States

• به‌روزرسانی برچسب‌ها تغییر در اطلاعات فیلم Updating Tags Change inside Movie Info

• موضوع: برچسب ها به درستی به روز نمی شوند ISSUE: Tags are Not Updating Properly

• انتخاب مشخصات مدیر Selecting Director Profile

• مدیریت انتخاب نویسنده Handling Writer Selection

• رفع مشکل همپوشانی جستجوی زنده Fixing Live Search Overlapping Problem

• نشان برای نمایش نمایه های انتخاب شده Badge to Display Selected Profiles

• ظرف مدال قابل استفاده مجدد Reusable Modal Container

• Modal to Display Writers Profile Modal to Display Writers Profile

• اضافه کردن سبک به نمایه Writers Adding Styles to Writers Profile

• به صورت اختیاری Container در داخل Modal را حذف کنید Optionally Remove Container inside Modal

• حذف نویسندگان منتخب Removing Selected Writers

حالت رسیدگی به فرم Handling Form State

• مدیریت ایالات فرم Managing Form States

• به‌روزرسانی برچسب‌ها تغییر در اطلاعات فیلم Updating Tags Change inside Movie Info

• موضوع: برچسب ها به درستی به روز نمی شوند ISSUE: Tags are Not Updating Properly

• انتخاب مشخصات مدیر Selecting Director Profile

• مدیریت انتخاب نویسنده Handling Writer Selection

• رفع مشکل همپوشانی جستجوی زنده Fixing Live Search Overlapping Problem

• نشان برای نمایش نمایه های انتخاب شده Badge to Display Selected Profiles

• ظرف مدال قابل استفاده مجدد Reusable Modal Container

• Modal to Display Writers Profile Modal to Display Writers Profile

• اضافه کردن سبک به نمایه Writers Adding Styles to Writers Profile

• به صورت اختیاری Container در داخل Modal را حذف کنید Optionally Remove Container inside Modal

• حذف نویسندگان منتخب Removing Selected Writers

ایجاد فرم بازیگران و خدمه Creating Cast & Crew Form

• درک فرم بازیگران و خدمه Understanding Cast & Crew Form

• فرم بازیگران و خدمه Cast & Crew Form

• مدیریت وضعیت فرم بازیگران Managing Cast Form State

• اعتبارسنجی و ارسال فرم بازیگران و خدمه Validating & Submitting Cast & Crew Form

• نکته ابزار رندر Rendering Tool Tip

• پنهان کردن برچسب و دکمه مشاهده همه Hiding Label & View All Button

• Cast Modal برای نمایش بازیگران و خدمه انتخاب شده Cast Modal to Display Selected Cast & Crew

• حذف بازیگران انتخاب شده Removing Selected Cast

• Refactor برای تجربه کاربری بهتر Refactor For Better User Experience

ایجاد فرم بازیگران و خدمه Creating Cast & Crew Form

• درک فرم بازیگران و خدمه Understanding Cast & Crew Form

• فرم بازیگران و خدمه Cast & Crew Form

• مدیریت وضعیت فرم بازیگران Managing Cast Form State

• اعتبارسنجی و ارسال فرم بازیگران و خدمه Validating & Submitting Cast & Crew Form

• نکته ابزار رندر Rendering Tool Tip

• پنهان کردن برچسب و دکمه مشاهده همه Hiding Label & View All Button

• Cast Modal برای نمایش بازیگران و خدمه انتخاب شده Cast Modal to Display Selected Cast & Crew

• حذف بازیگران انتخاب شده Removing Selected Cast

• Refactor برای تجربه کاربری بهتر Refactor For Better User Experience

بیایید فرم فیلم را تکمیل کنیم Let's Complete Movie Form

• اصلاح کوچک در داخل مولفه ورودی برچسب ها Little Fix inside Tags Input Component

• انتخابگر تاریخ Date Selector

• رابط کاربری ورودی پوستر Poster Input UI

• انتخاب و ارائه پوستر Selecting & Rendering Poster

• دکمه انتخاب ژانر Genres Selector Button

• ایجاد ژانرهای مدال Creating Genres Modal

• دکمه های ژانر Refactor Refactor Genre Buttons

• انتخاب و لغو انتخاب ژانرها Select & Unselect Genres

• ارسال ژانرهای منتخب Submitting Selected Genres

• به روز رسانی ژانرها در اطلاعات فیلم Updating Genres inside Movie Info

• رندر کردن تعداد ژانرهای انتخاب شده Rendering Selected Genres Count

• رندر ژانرهای انتخاب شده قبلی Rendering Previously Selected Genres

• Option Component را انتخاب کنید Select Option Component

• گزینه مورد نظر را انتخاب کنید Select Options

• onChange برای انتخاب گزینه ها onChange for Select Options

• به روز رسانی برای جستجوی زنده Update For Live Search

بیایید فرم فیلم را تکمیل کنیم Let's Complete Movie Form

• اصلاح کوچک در داخل مولفه ورودی برچسب ها Little Fix inside Tags Input Component

• انتخابگر تاریخ Date Selector

• رابط کاربری ورودی پوستر Poster Input UI

• انتخاب و ارائه پوستر Selecting & Rendering Poster

• دکمه انتخاب ژانر Genres Selector Button

• ایجاد ژانرهای مدال Creating Genres Modal

• دکمه های ژانر Refactor Refactor Genre Buttons

• انتخاب و لغو انتخاب ژانرها Select & Unselect Genres

• ارسال ژانرهای منتخب Submitting Selected Genres

• به روز رسانی ژانرها در اطلاعات فیلم Updating Genres inside Movie Info

• رندر کردن تعداد ژانرهای انتخاب شده Rendering Selected Genres Count

• رندر ژانرهای انتخاب شده قبلی Rendering Previously Selected Genres

• Option Component را انتخاب کنید Select Option Component

• گزینه مورد نظر را انتخاب کنید Select Options

• onChange برای انتخاب گزینه ها onChange for Select Options

• به روز رسانی برای جستجوی زنده Update For Live Search

خلق بازیگران جدید Creating New Actors

• ما باید چیزی را اصلاح کنیم We need to fix something

• Refactoring Modal Upload Movie Refactoring Movie Upload Modal

• بستن گزینه ها و رفع مشکل اسکرول خودکار Closing Options and Fixing Auto Scroll Issue

• ایجاد Actor Upload Modal Creating Actor Upload Modal

• ایجاد فرم آپلود بازیگر Creating Actor Upload Form

• مولفه انتخاب پوستر Refactoring Refactoring Poster Selector Component

• رسیدگی به وضعیت بازیگر Handling Actor Form State

• اصلاح کمی قبل از ارسال فرم Little Fix Before Submitting The Form

• پذیرش جنسیت نیز Accepting Gender Also

• اعتبار سنجی فرم بازیگر Actor Form Validation

• روش ایجاد بازیگر Method to Create an Actor

• در نهایت ایجاد یک بازیگر Finally Creating an Actor

• بسته شدن Modal After Success Response Closing Modal After Success Response

• لیتل ریفاکتور دوباره Little Refactor Again

• نمایش نشانگر مشغول Rendering Busy Indicator

خلق بازیگران جدید Creating New Actors

• ما باید چیزی را اصلاح کنیم We need to fix something

• Refactoring Modal Upload Movie Refactoring Movie Upload Modal

• بستن گزینه ها و رفع مشکل اسکرول خودکار Closing Options and Fixing Auto Scroll Issue

• ایجاد Actor Upload Modal Creating Actor Upload Modal

• ایجاد فرم آپلود بازیگر Creating Actor Upload Form

• مولفه انتخاب پوستر Refactoring Refactoring Poster Selector Component

• رسیدگی به وضعیت بازیگر Handling Actor Form State

• اصلاح کمی قبل از ارسال فرم Little Fix Before Submitting The Form

• پذیرش جنسیت نیز Accepting Gender Also

• اعتبار سنجی فرم بازیگر Actor Form Validation

• روش ایجاد بازیگر Method to Create an Actor

• در نهایت ایجاد یک بازیگر Finally Creating an Actor

• بسته شدن Modal After Success Response Closing Modal After Success Response

• لیتل ریفاکتور دوباره Little Refactor Again

• نمایش نشانگر مشغول Rendering Busy Indicator

جستجوی بازیگران واقعی Searching Real Actors

• بخش مقدمه Section Introduction

• درک جستجوی زنده Understanding Live Search

• تابع debounce چیست؟ What is debounce function

• Debounce فقط یک نام فانتزی است Debounce is Just a Fancy Name

• نوشتن تابع debounce خودمان Writing our own debounce function

• زمینه جدید برای مدیریت جستجو New Context to Handle Search

• ایجاد useSearch Hook Creating useSearch Hook

• Fianlly جستجوی پروفایل های بازیگر واقعی Fianlly Searchig Actual Actor Profiles

• رفع مشکل جستجو Fixing Search Issue

• مدیریت تغییر دولت نویسندگان Handling Writers State Change

• مشکل در جستجوی نویسندگان Problem While Searching Writers

• تفکیک دولت نویسندگان و کارگردانان Separating Writers and Directors State

• بازنشانی ورودی Writers و رفع مشکل بستن خودکار فرم Resetting Writers Input and Fixing Auto Form Close Issue

• اجازه دهید updaterFun را به یک پارامتر اختیاری تبدیل کنیم Let's Make updaterFun an Optional Parameter

• Refactoring Director Component Selector Refactoring Director Selector Component

• Refactoring Writer Selector Component Refactoring Writer Selector Component

• پس از انتخاب نویسنده، جستجوی زنده را بازنشانی کنید Reset Live Search After Writer Selection

• جستجوی نمایه برای Cast Form Search Profile for Cast Form

• کمی بیشتر Refactor Little More Refactor

جستجوی بازیگران واقعی Searching Real Actors

• بخش مقدمه Section Introduction

• درک جستجوی زنده Understanding Live Search

• تابع debounce چیست؟ What is debounce function

• Debounce فقط یک نام فانتزی است Debounce is Just a Fancy Name

• نوشتن تابع debounce خودمان Writing our own debounce function

• زمینه جدید برای مدیریت جستجو New Context to Handle Search

• ایجاد useSearch Hook Creating useSearch Hook

• Fianlly جستجوی پروفایل های بازیگر واقعی Fianlly Searchig Actual Actor Profiles

• رفع مشکل جستجو Fixing Search Issue

• مدیریت تغییر دولت نویسندگان Handling Writers State Change

• مشکل در جستجوی نویسندگان Problem While Searching Writers

• تفکیک دولت نویسندگان و کارگردانان Separating Writers and Directors State

• بازنشانی ورودی Writers و رفع مشکل بستن خودکار فرم Resetting Writers Input and Fixing Auto Form Close Issue

• اجازه دهید updaterFun را به یک پارامتر اختیاری تبدیل کنیم Let's Make updaterFun an Optional Parameter

• Refactoring Director Component Selector Refactoring Director Selector Component

• Refactoring Writer Selector Component Refactoring Writer Selector Component

• پس از انتخاب نویسنده، جستجوی زنده را بازنشانی کنید Reset Live Search After Writer Selection

• جستجوی نمایه برای Cast Form Search Profile for Cast Form

• کمی بیشتر Refactor Little More Refactor

آپلود فیلم ها Uploading Movies

• اعتبار سنجی فرم فیلم Movie Form Validation

• رفع منطق اعتبارسنجی فیلم Fixing Movie Validation Logic

• ایجاد پوستر به یک فیلد اختیاری در Backend API ما Making Poster an Optional Field in our Backend API

• رسیدگی به ارسال فرم Handling Form Submission

• افزودن مقادیر داخل داده های فرم Adding Values inside Form Data

• روش دیگری برای تولید داده های فرم Another Way to Generate Form Data

• بیایید اطلاعات تریلر را نیز درج کنیم Let's Include Trailer Info As Well

• ایجاد روش برای آپلود فیلم Create Method to Upload Movie

• تعمیر شی بازیگران و خدمه Fixing Cast and Crew Object

• رفع UI & Rendering Busy icon Fixing UI & Rendering Busy Icon

آپلود فیلم ها Uploading Movies

• اعتبار سنجی فرم فیلم Movie Form Validation

• رفع منطق اعتبارسنجی فیلم Fixing Movie Validation Logic

• ایجاد پوستر به یک فیلد اختیاری در Backend API ما Making Poster an Optional Field in our Backend API

• رسیدگی به ارسال فرم Handling Form Submission

• افزودن مقادیر داخل داده های فرم Adding Values inside Form Data

• روش دیگری برای تولید داده های فرم Another Way to Generate Form Data

• بیایید اطلاعات تریلر را نیز درج کنیم Let's Include Trailer Info As Well

• ایجاد روش برای آپلود فیلم Create Method to Upload Movie

• تعمیر شی بازیگران و خدمه Fixing Cast and Crew Object

• رفع UI & Rendering Busy icon Fixing UI & Rendering Busy Icon

رابط کاربری داشبورد برای فیلم و بازیگر Dashboard UI For Movie & Actor

• ایجاد کانتینر اطلاعات Creating Info Container

• رندر 3 کانتینر پشت سر هم Rendering 3 Containers in a Row

• Refactoring Info Container Refactoring Info Container

• ایده طراحی برای آخرین آپلودها Design Idea for Latest Uploads

• ظرفی برای آخرین بارگذاری ها Container for Latest Uploads

• آخرین بارگذاری کارت فیلم Latest Uploads Movie Card

• Refactor Time for Movie Card Refactor Time for Movie Card

• جزء برای مشخصات بازیگر Component for Actor Profile

• رندر پوشش روی نمایه بازیگر Rendering Overlay on Actor Profile

• تغییر حالت همپوشانی Toggling Overlay

• یک ظاهر طراحی دکمه ویرایش و حذف Styling Edit and Delete Button

• Refactoring Actor Profile Component Refactoring Actor Profile Component

رابط کاربری داشبورد برای فیلم و بازیگر Dashboard UI For Movie & Actor

• ایجاد کانتینر اطلاعات Creating Info Container

• رندر 3 کانتینر پشت سر هم Rendering 3 Containers in a Row

• Refactoring Info Container Refactoring Info Container

• ایده طراحی برای آخرین آپلودها Design Idea for Latest Uploads

• ظرفی برای آخرین بارگذاری ها Container for Latest Uploads

• آخرین بارگذاری کارت فیلم Latest Uploads Movie Card

• Refactor Time for Movie Card Refactor Time for Movie Card

• جزء برای مشخصات بازیگر Component for Actor Profile

• رندر پوشش روی نمایه بازیگر Rendering Overlay on Actor Profile

• تغییر حالت همپوشانی Toggling Overlay

• یک ظاهر طراحی دکمه ویرایش و حذف Styling Edit and Delete Button

• Refactoring Actor Profile Component Refactoring Actor Profile Component

واکشی و رندر فیلم ها و بازیگران با صفحه بندی Fetching & Rendering Movies & Actors With Pagination

• بخش معرفی Section Intro

• منطق برای سیستم صفحه بندی Logic For Pagination System

• منطق نوشتن برای صفحه بندی Writing Logic For Pagination

• واکشی بازیگران Fetching Actors

• رفع منطق صفحه بندی Fixing The Pagination Logic

• رندر کردن مشخصات بازیگر Rendering the Actor Profiles

• دکمه برای صفحه بعدی و قبلی Button For Next & Prev Page

• دکمه بعدی کار The Working Next Button

• جلوگیری از درخواست واکشی ناخواسته Preventing Unwanted Fetch Request

• بازگشت به صفحه قبلی Going Back To Previous Page

• رفع UI برای نام های طولانی Fixing UI For Long Names

• Refactoring دکمه بعدی و قبلی Refactoring Next and Previous Button

• مسیر صفحه بندی جدید برای فیلم ها New Pagination Route For Movies

• کامپوننت ساخت فیلم آماده رندر فیلم Making Movies Component Ready To Render Movies

• واکشی و رندر فیلم Fetching and Rendering Movies

• انتقال به صفحه فیلم های بعدی Moving to The Next Movies Page

• درک آنچه که ما تاکنون انجام داده ایم Understanding What We Did So Far

• بازگشت به صفحه فیلم های قبلی Going Back to Previous Movies Page

• رفع یک اشکال کوچک Fixing a Little Bug

واکشی و رندر فیلم ها و بازیگران با صفحه بندی Fetching & Rendering Movies & Actors With Pagination

• بخش معرفی Section Intro

• منطق برای سیستم صفحه بندی Logic For Pagination System

• منطق نوشتن برای صفحه بندی Writing Logic For Pagination

• واکشی بازیگران Fetching Actors

• رفع منطق صفحه بندی Fixing The Pagination Logic

• رندر کردن مشخصات بازیگر Rendering the Actor Profiles

• دکمه برای صفحه بعدی و قبلی Button For Next & Prev Page

• دکمه بعدی کار The Working Next Button

• جلوگیری از درخواست واکشی ناخواسته Preventing Unwanted Fetch Request

• بازگشت به صفحه قبلی Going Back To Previous Page

• رفع UI برای نام های طولانی Fixing UI For Long Names

• Refactoring دکمه بعدی و قبلی Refactoring Next and Previous Button

• مسیر صفحه بندی جدید برای فیلم ها New Pagination Route For Movies

• کامپوننت ساخت فیلم آماده رندر فیلم Making Movies Component Ready To Render Movies

• واکشی و رندر فیلم Fetching and Rendering Movies

• انتقال به صفحه فیلم های بعدی Moving to The Next Movies Page

• درک آنچه که ما تاکنون انجام داده ایم Understanding What We Did So Far

• بازگشت به صفحه فیلم های قبلی Going Back to Previous Movies Page

• رفع یک اشکال کوچک Fixing a Little Bug

به روز رسانی Delete & Search Actor Update Delete & Search Actor

• رسیدگی به ویرایش کلیک Handeling on edit click

• به روز رسانی Actor Modal Update Actor Modal

• انتقال اطلاعات بازیگر به فرم Passing Actor Info To Form

• به روز رسانی یک بازیگر Updating an Actor

• تغییر مقادیر به روز شده نمایه فورا Changing Updated Profile Values Instantly

• فرم جستجوی بازیگر Actor Search Form

• رسیدگی به وضعیت فرم جستجوی بازیگر Handling Actor Search Form State

• جستجو و ارائه پروفایل بازیگر Searching & Rendering Actor Profiles

• نمایش نماد بازنشانی جستجو Rendering Search Reset Icon

• بازنشانی جستجوی بازیگر Resetting Actor Search

• سابقه ای یافت نشد Record Not Found

• 43 رفع اشکال در ارائه دهنده جستجو 43 Fixing a Bug Inside Search Provider

• مخفی کردن بعدی و قبلی با کوچک Refactor Hiding Next and Prev With Little Refactor

• تغییر منطق جستجو در داخل باطن Changing Search Logic Inside Backend

• جلوگیری از ارسال فرم خالی Prevent From Empty Form Submission

• Modal را تأیید کنید Confirm Modal

• حذف Actor onConfirm Delete Actor onConfirm

• اصلاح سبک مؤلفه انتخابگر Fixing Selector Component Style

به روز رسانی Delete & Search Actor Update Delete & Search Actor

• رسیدگی به ویرایش کلیک Handeling on edit click

• به روز رسانی Actor Modal Update Actor Modal

• انتقال اطلاعات بازیگر به فرم Passing Actor Info To Form

• به روز رسانی یک بازیگر Updating an Actor

• تغییر مقادیر به روز شده نمایه فورا Changing Updated Profile Values Instantly

• فرم جستجوی بازیگر Actor Search Form

• رسیدگی به وضعیت فرم جستجوی بازیگر Handling Actor Search Form State

• جستجو و ارائه پروفایل بازیگر Searching & Rendering Actor Profiles

• نمایش نماد بازنشانی جستجو Rendering Search Reset Icon

• بازنشانی جستجوی بازیگر Resetting Actor Search

• سابقه ای یافت نشد Record Not Found

• 43 رفع اشکال در ارائه دهنده جستجو 43 Fixing a Bug Inside Search Provider

• مخفی کردن بعدی و قبلی با کوچک Refactor Hiding Next and Prev With Little Refactor

• تغییر منطق جستجو در داخل باطن Changing Search Logic Inside Backend

• جلوگیری از ارسال فرم خالی Prevent From Empty Form Submission

• Modal را تأیید کنید Confirm Modal

• حذف Actor onConfirm Delete Actor onConfirm

• اصلاح سبک مؤلفه انتخابگر Fixing Selector Component Style

به روز رسانی و حذف فیلم Update & Delete Movie

• Handling On Edit Click for Movie Handling On Edit Click for Movie

• فرم به روز رسانی فیلم (مدال) Movie Update Form (Modal)

• چرا به روز رسانی فیلم آسان نیست Why Updating Movie is Not Easy

• ایجاد مسیر برای دریافت داده برای به روز رسانی Uovie Creating Route to Get Data to Update Uovie

• قبل از ارسال به frontend داده ها را قالب بندی کنید Format data before sending to frontend

• ارائه داده های فیلم در فرم فیلم به روز رسانی Rendering movie data inside update movie form

• رفع مشکل تاریخ Fixing Date Issue

• تغییر روش به‌روزرسانی فیلم (بکاند) Changing the Update Movie Method (Backend)

• ایجاد روش به روز رسانی و تغییر عنوان دکمه Create Update Method & Change Button Title

• اتمام قسمت فیلم به روز رسانی Finishing The Update Movie Part

• باز کردن حذف فیلم Confirm Modal Opening Movie Delete Confirm Modal

• در نهایت حذف فیلم Finally Deleting The Movie

• واکشی آخرین آپلودها برای مدیر Fetching Latest Uploads For Admin

• حذف فیلم از داشبورد Movie Delete From Dashboard

• باز کردن فرم به روز رسانی Opening Update Form

• به روز رسانی فیلم Updating Movie

به روز رسانی و حذف فیلم Update & Delete Movie

• Handling On Edit Click for Movie Handling On Edit Click for Movie

• فرم به روز رسانی فیلم (مدال) Movie Update Form (Modal)

• چرا به روز رسانی فیلم آسان نیست Why Updating Movie is Not Easy

• ایجاد مسیر برای دریافت داده برای به روز رسانی Uovie Creating Route to Get Data to Update Uovie

• قبل از ارسال به frontend داده ها را قالب بندی کنید Format data before sending to frontend

• ارائه داده های فیلم در فرم فیلم به روز رسانی Rendering movie data inside update movie form

• رفع مشکل تاریخ Fixing Date Issue

• تغییر روش به‌روزرسانی فیلم (بکاند) Changing the Update Movie Method (Backend)

• ایجاد روش به روز رسانی و تغییر عنوان دکمه Create Update Method & Change Button Title

• اتمام قسمت فیلم به روز رسانی Finishing The Update Movie Part

• باز کردن حذف فیلم Confirm Modal Opening Movie Delete Confirm Modal

• در نهایت حذف فیلم Finally Deleting The Movie

• واکشی آخرین آپلودها برای مدیر Fetching Latest Uploads For Admin

• حذف فیلم از داشبورد Movie Delete From Dashboard

• باز کردن فرم به روز رسانی Opening Update Form

• به روز رسانی فیلم Updating Movie

جستجوی فیلم ها Search Movies

• جستجوی مسیر فیلم Search Movie Route

• جستجوی مسیر حرکت (جلو) Search Move Route (Frontend)

• پیمایش به جستجوی فیلم ها در فرم ارسال Navigating to Search Movies on Form Submit

• گرفتن پرس و جو از URL Grabbing query from the URL

• جستجوی فیلم ها Searching Movies

• نتیجه رندر یافت نشد Rendering Result Not Found

جستجوی فیلم ها Search Movies

• جستجوی مسیر فیلم Search Movie Route

• جستجوی مسیر حرکت (جلو) Search Move Route (Frontend)

• پیمایش به جستجوی فیلم ها در فرم ارسال Navigating to Search Movies on Form Submit

• گرفتن پرس و جو از URL Grabbing query from the URL

• جستجوی فیلم ها Searching Movies

• نتیجه رندر یافت نشد Rendering Result Not Found

متمرکز کردن همه فیلم ها Centralizing All Movies

• زمینه جدید برای فیلم ها New Context for Movies

• انتقال آخرین آپلودها به MoviesContext Moving latest uploads to MoviesContext

• حذف فیلم مستقیماً از داخل MovieListItem Deleting Movie From Directly Inside MovieListItem

• به روز رسانی فیلم مستقیماً از داخل MovieListItem Updating Movie From Directly Inside MovieListItem

• به روز رسانی UI پس از حذف و به روز رسانی صفحه جستجوی داخل UI Update After Delete & Update Inside Search Page

متمرکز کردن همه فیلم ها Centralizing All Movies

• زمینه جدید برای فیلم ها New Context for Movies

• انتقال آخرین آپلودها به MoviesContext Moving latest uploads to MoviesContext

• حذف فیلم مستقیماً از داخل MovieListItem Deleting Movie From Directly Inside MovieListItem

• به روز رسانی فیلم مستقیماً از داخل MovieListItem Updating Movie From Directly Inside MovieListItem

• به روز رسانی UI پس از حذف و به روز رسانی صفحه جستجوی داخل UI Update After Delete & Update Inside Search Page

بررسی API Review API

• ایجاد Review Modal Creating Review Modal

• راه اندازی مرورگر Setting up Review Router

• افزودن نقد جدید قسمت 1 Adding New Review Part 1

• افزودن نقد جدید قسمت 2 Adding New Review Part 2

• به روز رسانی بررسی Updating Review

• حذف مرور Removing Review

• رفع Remove Review Logic Fixing Remove Review Logic

• دریافت نظرات توسط فیلم Get Reviews By Movie

• بررسی قالب‌بندی قبل از ارسال به frontend Formatting review before sending to frontend

بررسی API Review API

• ایجاد Review Modal Creating Review Modal

• راه اندازی مرورگر Setting up Review Router

• افزودن نقد جدید قسمت 1 Adding New Review Part 1

• افزودن نقد جدید قسمت 2 Adding New Review Part 2

• به روز رسانی بررسی Updating Review

• حذف مرور Removing Review

• رفع Remove Review Logic Fixing Remove Review Logic

• دریافت نظرات توسط فیلم Get Reviews By Movie

• بررسی قالب‌بندی قبل از ارسال به frontend Formatting review before sending to frontend

API برای کاربران عادی API for Normal Users

• درک آنچه بعد Understanding What Next

• مسیر برای آخرین آپلودها Route For Latest Uploads

• مسیر برای فیلم تک Route For Single Movie

• قالب بندی داده ها برای تک فیلم Formating Data For Single Movie

• محاسبه میانگین رتبه ها Calculating Average Ratings

• Aggregations چیست؟ What is Aggregations?

• محاسبه میانگین رتبه‌بندی‌ها با خط لوله تجمع Calculating Average Ratings With Aggregation Pipeline

• پاسخ مجدد برای بررسی ها Refactoring response for reviews

• فیلم های مرتبط توسط برچسب ها Related Movies by Tags

• واکشی فیلم‌های مرتبط با تجمع Fetching Related Movies with Aggregation

• میانگین رتبه‌بندی برای فیلم‌های مرتبط Average ratings for related movies

• منتظر حل و فصل همه وعده ها هستیم Awaiting for all promises to be resolved

• مسیری برای دریافت بیشترین امتیاز فیلم ها Route to get most rated movies

• میانگین رتبه‌بندی برای اکثر فیلم‌های دارای رتبه Average ratings for most rated movies

API برای کاربران عادی API for Normal Users

• درک آنچه بعد Understanding What Next

• مسیر برای آخرین آپلودها Route For Latest Uploads

• مسیر برای فیلم تک Route For Single Movie

• قالب بندی داده ها برای تک فیلم Formating Data For Single Movie

• محاسبه میانگین رتبه ها Calculating Average Ratings

• Aggregations چیست؟ What is Aggregations?

• محاسبه میانگین رتبه‌بندی‌ها با خط لوله تجمع Calculating Average Ratings With Aggregation Pipeline

• پاسخ مجدد برای بررسی ها Refactoring response for reviews

• فیلم های مرتبط توسط برچسب ها Related Movies by Tags

• واکشی فیلم‌های مرتبط با تجمع Fetching Related Movies with Aggregation

• میانگین رتبه‌بندی برای فیلم‌های مرتبط Average ratings for related movies

• منتظر حل و فصل همه وعده ها هستیم Awaiting for all promises to be resolved

• مسیری برای دریافت بیشترین امتیاز فیلم ها Route to get most rated movies

• میانگین رتبه‌بندی برای اکثر فیلم‌های دارای رتبه Average ratings for most rated movies

رابط کاربری برای کاربر عادی (فیلم های برتر) UI For Normal User (TopRatedMovies)

• برنامه هایی برای ویدیوهای آینده Plans For Upcoming Videos

• طرح بندی شبکه ای پنج ستونی Five Columns Grid Layout

• ایجاد ستون های گرید پاسخگو Creating Responsive Grid Columns

• واکشی فیلم های دارای رتبه برتر Fetching Top Rated Movies

• استایلینگ کارت فیلم قسمت 1 Styling Movie Cards Part 1

• استایلینگ کارت فیلم قسمت 2 Styling Movie Cards Part 2

• Refactoring جزء لیست فیلم Refactoring Movie List Component

• واکشی فیلم‌های دارای رتبه برتر بیشتر Fetching More Top Rated Movies

• پیمایش به صفحه تک فیلم Navigating to Single Movie Page

رابط کاربری برای کاربر عادی (فیلم های برتر) UI For Normal User (TopRatedMovies)

• برنامه هایی برای ویدیوهای آینده Plans For Upcoming Videos

• طرح بندی شبکه ای پنج ستونی Five Columns Grid Layout

• ایجاد ستون های گرید پاسخگو Creating Responsive Grid Columns

• واکشی فیلم های دارای رتبه برتر Fetching Top Rated Movies

• استایلینگ کارت فیلم قسمت 1 Styling Movie Cards Part 1

• استایلینگ کارت فیلم قسمت 2 Styling Movie Cards Part 2

• Refactoring جزء لیست فیلم Refactoring Movie List Component

• واکشی فیلم‌های دارای رتبه برتر بیشتر Fetching More Top Rated Movies

• پیمایش به صفحه تک فیلم Navigating to Single Movie Page

UI برای کاربر عادی - نمایش اسلاید UI For Normal User - The Slide Show

• لغزنده The Slider

• رندر اسلاید Rendering Slide

• واکشی آخرین آپلودها Fetching Latest Uploads

• کنترلرهای نمایش اسلاید Slide Show Controllers

• در حال به روز رسانی اسلاید بعدی Upadting Next Slide

• ساختن اسلایدر ما بی نهایت Making Our Slider Infinite

• قبل از اضافه کردن انیمیشن Before Adding Animation

• از سمت راست وارد شوید Slide in From Right

• اسلاید در انیمیشن برای هر اسلاید Slide in Animation For Every Slide

• مشکل اسلایدر The Problem With Slider

• توهم بی نهایت با اسلاید کلون شده Infinite Illusion With Cloned Slide

• مدیریت اسلایدهای قبلی Handling Previous Slides

• مشکل اسلاید خودکار The Problem With Auto Slide

• پاک کردن فاصله زمانی که کامپوننت را جدا می‌کنید Clear Interval While Unmounting Component

• توقف اسلایدر هنگام باز کردن برگه بعدی Stop Slider While Opening Next Tab

• مکث اسلایدر هنگام کلیک کردن روی دکمه ها Pause Slider While Clicking on Buttons

• رندر عنوان فیلم Rendering Movie Title

• Refactoring جزء اسلاید Refactoring Slide Component

• برش آرایه Array Slice

• ایجاد اسلایدهای بعدی Creating Upnext Slides

• رندر کردن اسلایدهای بعدی Rendering Up Next Slides

• پیمایش به صفحه تک فیلم Navigating to Single Movie Page

• تعمیر اسلایدر Fixing The Slider

UI برای کاربر عادی - نمایش اسلاید UI For Normal User - The Slide Show

• لغزنده The Slider

• رندر اسلاید Rendering Slide

• واکشی آخرین آپلودها Fetching Latest Uploads

• کنترلرهای نمایش اسلاید Slide Show Controllers

• در حال به روز رسانی اسلاید بعدی Upadting Next Slide

• ساختن اسلایدر ما بی نهایت Making Our Slider Infinite

• قبل از اضافه کردن انیمیشن Before Adding Animation

• از سمت راست وارد شوید Slide in From Right

• اسلاید در انیمیشن برای هر اسلاید Slide in Animation For Every Slide

• مشکل اسلایدر The Problem With Slider

• توهم بی نهایت با اسلاید کلون شده Infinite Illusion With Cloned Slide

• مدیریت اسلایدهای قبلی Handling Previous Slides

• مشکل اسلاید خودکار The Problem With Auto Slide

• پاک کردن فاصله زمانی که کامپوننت را جدا می‌کنید Clear Interval While Unmounting Component

• توقف اسلایدر هنگام باز کردن برگه بعدی Stop Slider While Opening Next Tab

• مکث اسلایدر هنگام کلیک کردن روی دکمه ها Pause Slider While Clicking on Buttons

• رندر عنوان فیلم Rendering Movie Title

• Refactoring جزء اسلاید Refactoring Slide Component

• برش آرایه Array Slice

• ایجاد اسلایدهای بعدی Creating Upnext Slides

• رندر کردن اسلایدهای بعدی Rendering Up Next Slides

• پیمایش به صفحه تک فیلم Navigating to Single Movie Page

• تعمیر اسلایدر Fixing The Slider

صفحه تک فیلم Single Movie Page

• واکشی فیلم تک Fetching Single Movie

• وضعیت رندر آماده نیست Rendering Not Ready State

• ارائه اطلاعات فیلم Rendering Movie Info

• Refactor Rating Stars Component Refactor Rating Stars Component

• فرمت های مختلف برای بیش از 999 بررسی Different Format For More Than 999 Reviews

• به دکمه فیلم امتیاز دهید Rate The Movie Button

• رندر نام کارگردان و نویسندگان Rendering Director & Writers Name

• ارائه زبان بازیگران و سایر موارد مهم Rendering Cast Language & Other Important Things

• رندر ژانرها و نوع Rendering Genres & Type

• نمایش پروفایل بازیگران Rendering Cast Profiles

• رندر فیلم های مرتبط Rendering Related Movies

• هدایت کاربر به صفحه ورود Redirect User to Signin Page

صفحه تک فیلم Single Movie Page

• واکشی فیلم تک Fetching Single Movie

• وضعیت رندر آماده نیست Rendering Not Ready State

• ارائه اطلاعات فیلم Rendering Movie Info

• Refactor Rating Stars Component Refactor Rating Stars Component

• فرمت های مختلف برای بیش از 999 بررسی Different Format For More Than 999 Reviews

• به دکمه فیلم امتیاز دهید Rate The Movie Button

• رندر نام کارگردان و نویسندگان Rendering Director & Writers Name

• ارائه زبان بازیگران و سایر موارد مهم Rendering Cast Language & Other Important Things

• رندر ژانرها و نوع Rendering Genres & Type

• نمایش پروفایل بازیگران Rendering Cast Profiles

• رندر فیلم های مرتبط Rendering Related Movies

• هدایت کاربر به صفحه ورود Redirect User to Signin Page

افزودن بررسی Adding Review

• ایجاد مدال رتبه بندی Creating Rating Modal

• ناحیه متن و دکمه ارسال Text area & Submit Button

• آیکون های مختلف برای رتبه بندی های انتخاب شده Different Icons for Selected Ratings

• ارائه تنها رتبه‌بندی‌های منتخب Rendering only Selected Ratings

• فرم حالت و ارسال Form State & Submission

• فرم بررسی Refactoring Refactoring Review Form

• وضعیت مدیریت برای رتبه بندی مدال Handling State For Rating Modal

• رفع اشکال NaN Fixing The NaN Bug

• افزودن بررسی جدید Adding New Review

• به روز رسانی UI در بررسی جدید Updating UI on New Review

افزودن بررسی Adding Review

• ایجاد مدال رتبه بندی Creating Rating Modal

• ناحیه متن و دکمه ارسال Text area & Submit Button

• آیکون های مختلف برای رتبه بندی های انتخاب شده Different Icons for Selected Ratings

• ارائه تنها رتبه‌بندی‌های منتخب Rendering only Selected Ratings

• فرم حالت و ارسال Form State & Submission

• فرم بررسی Refactoring Refactoring Review Form

• وضعیت مدیریت برای رتبه بندی مدال Handling State For Rating Modal

• رفع اشکال NaN Fixing The NaN Bug

• افزودن بررسی جدید Adding New Review

• به روز رسانی UI در بررسی جدید Updating UI on New Review

Refactor و رفع مشکلات Refactor & Fixing Problems

• لینک دکمه سفارشی Custom Button Link

• Refactoring Single Movie UI Refactoring Single Movie UI

• Refactoring پروفایل بازیگران Refactoring Cast Profiles

• کمی پاسخگو بودن Making a Little Bit Responsive

• رفع مشکل گرادیان Fixing Gradient Problem

• بیایید از AbortController استفاده کنیم Let's Use The AbortController

• AbortController برای هر کامپوننت AbortController for Every Component

• ارسال عکس های واکنشگرا Sending Back Responsive Images

• رندر کردن تصاویر کوچکتر Rendering Smaller Images

• تعمیر انتخابگر تریلر دو بازشو Fixing Double Opening Trailer Selector

• رفع بسته شدن خودکار فرم در صورت خطا Fixing Auto Form Closing on Error

• عدم دریافت انتخابگر تریلر در زمان دوم Not Getting Trailer Selector in Second Time

• ایجاد نمایه بازیگر Creating Actor Profile Modal

• واکشی و استایل کردن نمایه بازیگر Fetching & Styling Actor Profile Modal

Refactor و رفع مشکلات Refactor & Fixing Problems

• لینک دکمه سفارشی Custom Button Link

• Refactoring Single Movie UI Refactoring Single Movie UI

• Refactoring پروفایل بازیگران Refactoring Cast Profiles

• کمی پاسخگو بودن Making a Little Bit Responsive

• رفع مشکل گرادیان Fixing Gradient Problem

• بیایید از AbortController استفاده کنیم Let's Use The AbortController

• AbortController برای هر کامپوننت AbortController for Every Component

• ارسال عکس های واکنشگرا Sending Back Responsive Images

• رندر کردن تصاویر کوچکتر Rendering Smaller Images

• تعمیر انتخابگر تریلر دو بازشو Fixing Double Opening Trailer Selector

• رفع بسته شدن خودکار فرم در صورت خطا Fixing Auto Form Closing on Error

• عدم دریافت انتخابگر تریلر در زمان دوم Not Getting Trailer Selector in Second Time

• ایجاد نمایه بازیگر Creating Actor Profile Modal

• واکشی و استایل کردن نمایه بازیگر Fetching & Styling Actor Profile Modal

بیایید با نقدهای فیلم کار کنیم Let's Work WIth Movie Reviews

• صفحه بررسی فیلم Movie Reviews Page

• بررسی جزء کارت Review Card Component

• واکشی و ارائه نظرات Fetching & Rendering Reviews

• یافتن بررسی صاحبان نمایه Finding Profile Owners Review

• دکمه ویرایش و حذف برای بررسی Edit & Delete Button For Review

• نمایش Confirm Modal Display Confirm Modal

• حذف بررسی Deleting The Review

• در صورت خالی بودن، مروری وجود ندارد No Reviews if Empty

• رندر عنوان فیلم Rendering Movie Title

• ویرایش Modal را مرور کنید Review Edit Modal

• به روز رسانی بررسی Updating Review

• به روز رسانی UI در بررسی به روز رسانی Updating UI on Update Review

بیایید با نقدهای فیلم کار کنیم Let's Work WIth Movie Reviews

• صفحه بررسی فیلم Movie Reviews Page

• بررسی جزء کارت Review Card Component

• واکشی و ارائه نظرات Fetching & Rendering Reviews

• یافتن بررسی صاحبان نمایه Finding Profile Owners Review

• دکمه ویرایش و حذف برای بررسی Edit & Delete Button For Review

• نمایش Confirm Modal Display Confirm Modal

• حذف بررسی Deleting The Review

• در صورت خالی بودن، مروری وجود ندارد No Reviews if Empty

• رندر عنوان فیلم Rendering Movie Title

• ویرایش Modal را مرور کنید Review Edit Modal

• به روز رسانی بررسی Updating Review

• به روز رسانی UI در بررسی به روز رسانی Updating UI on Update Review

در حال تکمیل پنل مدیریت Finishing Up Admin Panel

• مسیر دریافت اطلاعات برنامه Route to Get App Info

• واکشی و ارائه اطلاعات برنامه Fetching & Rendering App Info

• تبدیل به رشته محلی Converting to Local String

• مسیر برای بیشترین امتیاز از همه انواع Route For Most Rated From All Types

• واکشی فیلم های دارای بیشترین امتیاز Fetching Most Rated Movies

• فهرست فیلم های دارای امتیاز بیشتر Styling Most Rated Movies List

• رتبه برای کاربر تایید نشده مجاز نیست Rating Not Allowed for Not Verified User

در حال تکمیل پنل مدیریت Finishing Up Admin Panel

• مسیر دریافت اطلاعات برنامه Route to Get App Info

• واکشی و ارائه اطلاعات برنامه Fetching & Rendering App Info

• تبدیل به رشته محلی Converting to Local String

• مسیر برای بیشترین امتیاز از همه انواع Route For Most Rated From All Types

• واکشی فیلم های دارای بیشترین امتیاز Fetching Most Rated Movies

• فهرست فیلم های دارای امتیاز بیشتر Styling Most Rated Movies List

• رتبه برای کاربر تایید نشده مجاز نیست Rating Not Allowed for Not Verified User

در حال تکمیل رابط کاربری Finishing Up User UI

• ریسپانسیو کردن صفحه اصلی Making Home Page Responsive

• رفع تاخیر در نمایش اسلاید Fixing Lag inside SlideShow

• Refactoring فرم جستجوی برنامه Refactoring App Search Form

• پاسخگو کردن نوار ناوبر Making Navbar Responsive

• مسیر API فیلم های عمومی را جستجو کنید Search Public Movies API Route

• روش جستجوی فیلم (فرانت‌اند) Search Movie Method (frontend)

• جستجوی فیلم برای کاربران عادی Search Movies For Normal Users

• پیمایش به جستجوی فیلم ها Navigating to Search Movies

در حال تکمیل رابط کاربری Finishing Up User UI

• ریسپانسیو کردن صفحه اصلی Making Home Page Responsive

• رفع تاخیر در نمایش اسلاید Fixing Lag inside SlideShow

• Refactoring فرم جستجوی برنامه Refactoring App Search Form

• پاسخگو کردن نوار ناوبر Making Navbar Responsive

• مسیر API فیلم های عمومی را جستجو کنید Search Public Movies API Route

• روش جستجوی فیلم (فرانت‌اند) Search Movie Method (frontend)

• جستجوی فیلم برای کاربران عادی Search Movies For Normal Users

• پیمایش به جستجوی فیلم ها Navigating to Search Movies

استقرار برنامه های ما Deploying Our Apps

• طرح The Plan

• ایجاد پایگاه داده واقعی Mongodb Creating Real Mongodb Database

• فشار دادن React App به Github Pushing React App To Github

• فشار دادن Node API به Github Pushing Node API To Github

• ایجاد حساب Digitalocen Creating Digitalocen Account

• استقرار برنامه Frontend ما Deploying Our Frontend App

• استقرار Backend API ما Deploying Our Backend API

• تعمیر نسخه Node Fixing Node Version

• بازگرداندن همه فیلم های قدیمی Bringing back all old movies

• تغییر URL پایه Changing The Base URL

• راه اندازی Sendin Blue Setting up Sendin Blue

• افزودن دامنه سفارشی جدید Adding New Custom Domain

• تأیید دامنه و پیکربندی روش ارسال ایمیل جدید Domain Verification and Configure New Send Email Method

• تغییر تله نامه با Sendin Blue Changing Mail Trap WIth Sendin Blue

• به روز رسانی متغیرهای محیطی جدید Updating new environment variables

• بیایید نتیجه نهایی خود را ببینیم Lets See Our Final Result

استقرار برنامه های ما Deploying Our Apps

• طرح The Plan

• ایجاد پایگاه داده واقعی Mongodb Creating Real Mongodb Database

• فشار دادن React App به Github Pushing React App To Github

• فشار دادن Node API به Github Pushing Node API To Github

• ایجاد حساب Digitalocen Creating Digitalocen Account

• استقرار برنامه Frontend ما Deploying Our Frontend App

• استقرار Backend API ما Deploying Our Backend API

• تعمیر نسخه Node Fixing Node Version

• بازگرداندن همه فیلم های قدیمی Bringing back all old movies

• تغییر URL پایه Changing The Base URL

• راه اندازی Sendin Blue Setting up Sendin Blue

• افزودن دامنه سفارشی جدید Adding New Custom Domain

• تأیید دامنه و پیکربندی روش ارسال ایمیل جدید Domain Verification and Configure New Send Email Method

• تغییر تله نامه با Sendin Blue Changing Mail Trap WIth Sendin Blue

• به روز رسانی متغیرهای محیطی جدید Updating new environment variables

• بیایید نتیجه نهایی خود را ببینیم Lets See Our Final Result