آموزش با REACT JS AND THE MERN STACK 2023 کلون فیس بوک بسازید

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

خوش آمدی Welcome

• به دوره، ویترین کامل برنامه خوش آمدید Welcome to the course, FULL SHOWCASE OF THE APPLICATION

• به روز رسانی بسیار مهم برای دانش آموزان با صفحه نمایش بسیار کوچک Very important update for students with very small screens

پروژه راه اندازی Setup project

• ابزار لازم را نصب و آماده کنید Install and prepare the necessary tools

• بیایید چند پسوند کد ویژوال استودیو را بررسی کنیم Let's check some visual studio code extensions

• بیایید برخی از پسوندهای کد استودیو ویژوال را بررسی کنیم (برای نمایشگرهای کوچک) Let's check some visual studio code extensions (for small screens)

• بیایید صفحه اصلی را تنظیم کنیم Let's setup the basic frontend

• بیایید صفحه اصلی را راه اندازی کنیم (برای صفحه نمایش های کوچک) Let's setup the basic frontend (for small screens)

• بیایید باطن اصلی را راه اندازی کنیم (سرور را آماده کنید) Let's setup the basic backend (prepare the server)

• بیایید پایه اصلی را راه اندازی کنیم - سرور را آماده کنیم (برای صفحه نمایش های کوچک) Let's setup the basic backend - prepare the server (for small screens)

• Cors به ​​طور کامل توضیح داده شده و با سرور راه اندازی شده است Cors fully explained and setup with the server

• Cors به ​​طور کامل توضیح داده شده و با سرور راه اندازی شده است (برای صفحه نمایش های کوچک) Cors fully explained and setup with the server (for small screens)

• بیایید مسیرها را تنظیم کنیم Let's setup routes

• بیایید مسیرها را تنظیم کنیم (برای نمایشگرهای کوچک) Let's setup routes (for small screens)

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

• متغیرهای محیطی (برای نمایشگرهای کوچک) Environment variables (for small screens)

• بیایید یک حساب MongoDb Atlas راه اندازی کنیم و به برنامه خود متصل شویم Let's setup a MongoDb Atlas Account and connect to our application

• بیایید یک حساب MongoDb Atlas راه اندازی کنیم و به برنامه خود وصل شویم (برای صفحه نمایش های کوچک) Let's setup a MongoDb Atlas Account and connect to our app (for small screens)

• کار با JSON و توضیح کدهای وضعیت پاسخ HTTP Working with JSON and explaining HTTP response status codes

• کار با JSON و توضیح کدهای وضعیت پاسخ HTTP (برای صفحات کوچک) Working with JSON and explaining HTTP response status codes (for small screens)

احراز هویت و ارسال ایمیل (بکاند) Authentification and send emails (backend)

• بیایید حالت User را تنظیم کنیم Let's setup the User modal

• بیایید مدال کاربر (برای صفحه نمایش های کوچک) را تنظیم کنیم Let's setup the User modal (for small screens)

• ثبت و اعتبارسنجی داده ها و استفاده از Regex برای اعتبارسنجی ایمیل Register and validate data and using Regex to validate email

• اعتبار سنجی زنده نام کاربری Username live validation

• توکن های وب JSON JSON web tokens

• Google OAuth 2.0 را برای دسترسی به APIهای Google راه اندازی کنید Setup Google OAuth 2.0 to Access Google APIs

• ثبت نام را تمام کنید و ایمیل بفرستید Finish register and send emails

• ایمیل را فعال کنید Activate email

• وارد شدن Login

جلوی احراز هویت Authentification frontend

• بیایید react router dom را راه اندازی کنیم Let's setup react router dom

• فروشگاه React Redux توضیح داده شده و راه اندازی کامل React Redux store explained and full setup

• وارد صفحه ثبت نام قسمت 1 شوید Login an Register page part 1

• صفحه ورود و ثبت نام قسمت 2 (فورمیک) Login and Register page part 2 (Formik)

• صفحه ورود و ثبت نام قسمت 3 (بله) Login and Register page part 3 (Yup)

• صفحه ورود و ثبت نام قسمت 4 (پاسخگویی) Login and Register page part 4 (responsiveness)

• ورود و ثبت نام قسمت 5 پاورقی Login and Register part 5 Footer

• با بازآفرینی کد آشنا شوید Learn about code refactoring

• فرم ثبت نام Register form

• کار با تاریخ تولد Working with dates for birthday

• ثبت اعتبار فرم Register form validation

• ثبت فرم رسیدگی به خطا Register form error handling

• مدیریت خطای ثبت نام را به پایان برسانید و خطاها را برطرف کنید Finish register error handling and fix errors

• ثبت نام ارسال کنید Register submit

• ورود به سیستم ارسال کنید Login submit

سرتیتر Header

• پایه هدر قسمت 1 Header base part 1

• پایه هدر قسمت 2 Header base part 2

• روی عناصر خارجی کلیک کنید و ببندید Click outside elements and close

• منوی جستجو Search menu

• منوی همه All Menu

• منوی کاربر قسمت 1 User menu part 1

• منوی کاربر قسمت 2 User menu part 2

• هدر پاسخگو Responsive Header

• Header را تمام کنید و مشکلات را برطرف کنید Finish Header and fix issues

خانه home

• مسیرهای محافظت شده (بسیار مهم! ) Protected routes (very important ! )

• منوی خانه سمت چپ قسمت 1 Left home menu part 1

• منوی خانه سمت چپ قسمت 2 Left home menu part 2

• سمت راست خانه Right home side

• بیایید روی داستان ها کار کنیم Let's work on stories

• ایجاد فرم پست Create post form

• ترفندهای پیشرفته خانگی پاسخگو 1 Responsive home advanced tricks 1

• ترفندهای پیشرفته خانگی پاسخگو 2 Responsive home advanced tricks 2

فراموش کرده اید، رمز عبور را بازنشانی کنید، حساب کاربری را فعال کنید، از سیستم خارج شوید Forgot ,reset password,activate account,logout

• میان افزار احراز هویت Authentification middlware

• اکانت قسمت 1 را فعال کنید Activate account part 1

• اکانت قسمت 2 را فعال کنید Activate account part 2

• حساب را فعال کنید و ریسک امنیتی را برطرف کنید Activate Account and fix asecurity risk

• ارسال مجدد کد تایید re-Send verification code

• خروج Logout

• بازنشانی رمز عبور قسمت 1 Reset password part 1

• بازنشانی رمز عبور قسمت 2 Reset password part 2

• بازنشانی رمز عبور قسمت 3 Reset password part 3

• بازنشانی رمز عبور قسمت 4 Reset password part 4

• کاربر را پیدا کنید Find user

• ارسال ایمیل کد بازنشانی Send reset code email

• ایمیل کد بازنشانی را تایید کنید Validate reset code email

• رمز عبور را تغییر دهید Change password

ایجاد پست، ابری، شکلک و غیره Create Post,Cloudinary,emojis..etc

• ایجاد پنجره بازشو Create post popup

• انتخاب کننده شکلک Emoji picker

• Refactoring، به پست، پست خود اضافه کنید Refactoring,add to your post ,post

• پیش نمایش تصاویر قسمت 1 Preview Images part 1

• پیش نمایش تصاویر قسمت 2 Preview Images part 2

• پیش نمایش تصاویر قسمت 3 (ساختار شبکه تصاویر) Preview Images part 3 (images grid structure)

• مدل پست + ایجاد تابع پست Post model + create post function

• آپلود تصاویر در قسمت 1 ابری Upload Images to Cloudinary part 1

• آپلود تصاویر در قسمت 2 ابری Upload Images to Cloudinary part 2

• پس زمینه ارسال کنید Post backgrounds

• پنهان کردن-باز کردن کلیک خارج از پنجره بازشو Hide-open click outside popup

• ارسال پست با پس زمینه + لودر Submit Post with background + loader

• پنجره بازشو و مدیریت خطا Error popup & error handling

• آپلود تصاویر و ارسال پست Upload images and submit post

• پایان ارسال ارسال تصحیح خطاها، اعتبارسنجی Finish post submit fixing errors,validation

جزء پست Post component

• نمایش همه پست ها Display all posts

• هدر جزء ارسال کنید Post component-header

• ارسال جزء-پس زمینه و تصاویر Post component-background & images

• پست پاسخگو و رفع مشکل خانه Responsive post and fix home problem

• واکنش ها و اقدامات پست Post reacts and actions

• ایجاد نظر، ایموجی، تصویر Create comment,emojis,image

• منوی پست قسمت 1 Post menu part 1

• منوی پست قسمت 2 Post menu part 2

مشخصات profile

• اطلاعات و تصاویر نمایه را از cloudinary دریافت کنید Get profile informations and images from cloudinary

• راه اندازی نمایه نمایه و دریافت جزئیات نمایه از باطن Profile frontend setup and get profile details from backend

• قسمت سرصفحه و جلد نمایه Profile header and cover section

• عکس پروفایل، اطلاعات، منو Profile picture, infos, menu

• پروفایل افرادی که ممکن است بشناسید profile people you may know

• بخش شبکه ایجاد پست و پست نمایه Profile create post & posts grid section

• پست های نمایه را نمایش دهید و بررسی کنید که نمایه متعلق به شماست یا بازدیدکننده Display profile posts and check if the profile is yours or a visitor

• عکس ها، دوستان، اجزای پاورقی Photos,Friends,Footer components

• آپدیت عکس پروفایل قسمت 1 Update profile picture part 1

• به‌روزرسانی تصویر نمایه قسمت 2 (Crooper) Update profile picture part 2 (Crooper)

• تصویر پروفایل را به روز کنید و قسمت 3 پست را ایجاد کنید Update profile picture and create post part 3

• به‌روزرسانی تصویر نمایه، لودر، نمایان بودن، تغییر زنده را تمام کنید Finish update profile picture, loader, visiblity, live change

• عکس‌های نمایه قدیمی و عکس‌های دیگر را دریافت کنید و با استفاده از آن به‌روزرسانی کنید Get old profile pictures and others and update using it

• پست عکس پروفایل به روز شد Updated profile picture post

• به روز رسانی تصویر جلد قسمت 1 Update cover picture part 1

• به روز رسانی تصویر جلد قسمت 2 Update cover picture part 2

• تصاویر جلد قدیمی را انتخاب کنید و به روز کنید Select old cover pictures and update

• نمایش اطلاعات نمایه مقدمه قسمت 1 Display profile infos intro part 1

• نمایش اطلاعات نمایه مقدمه قسمت 2 Display profile infos intro part 2

• نمایش اطلاعات نمایه مقدمه قسمت 3 Display profile infos intro part 3

• ویرایش جزئیات قسمت 1 Edit details part 1

• ویرایش جزئیات قسمت 2 Edit details part 2

• ویرایش جزئیات قسمت 3 Edit details part 3

• نمایه را کاملاً پاسخگو کنید + پاسخگویی خانه را برطرف کنید Make profile fully responsive + fix home responsiveness

• همه پنجره‌های بازشو را پاسخگو کنید Make all popups responsive

• انیمیشن اسکرول ثابت (بسیار جالب) Fixed scroll anmation(very cool)

درخواست دوستی، ارسال، لغو، حذف، پذیرش، دنبال کردن، لغو دنبال کردن Friend Requests,send,cance,delete,accept,follow,unfollow

• ارسال، لغو، پذیرش درخواست، دنبال کردن، لغو دنبال کردن باطن send ,cancel,accept request,follow,unfollow backend

• لغو دوستی، حذف درخواست، آماده سازی داده ها برای ارسال مجدد Unfriend,delete request,prepare data to send back

• نمایش دکمه های درخواست Show the requests buttons

• ارسال درخواست ها قسمت 1 Submit requests part 1

• ارسال درخواست ها قسمت 2 Submit requests part 2

• Css، پاسخگو، رفع مشکلات Css ,responsive,fix issues

• نمایش لیست دوستان Display friends list

• نمایش پیش نمایش تصاویر دوستان Display friends pictures preview

واکنش نشان می دهد Reacts

• مقدمه، مدل واکنش، تابع واکنش (باطن) Introduction,react model,react function(backend)

• روی یک پست واکنش نشان دهید و واکنش موجود را دریافت کنید React on a post and get existing react

• React و unReact و لایک دکمه، styles React and unReact and like button,styles

• نمایش همه واکنش ها Show all reacts

• همه تغییرات واکنش ها را به صورت زنده و سریع ببینید See all reacts changes live and fast

نظرات Comments

• ایجاد نظر + نظر با تصویر Create comment + comment with image

• نظرات را فهرست کنید، بیشتر بارگذاری کنید، به‌روزرسانی زنده List comments,load more,live update

پست || Post ||

• پست‌هایی را برای افرادی که دنبال می‌کنید نمایش دهید و مشکلات را برطرف کنید Display posts for the people you follow and fix issues

• بازخوانی پست ها هنگام ایجاد نمایه پست + خانه و غیره ... Refresh posts when creating post profile + home etc...

• ذخیره، حذف پست Save, unsave post

• دانلود تصاویر پست Download post images

• پست را حذف کنید و داده ها را تازه کنید Delete post and refresh data

• رفع مشکل بزرگ در نمایه پس از ایجاد پست (بسیار مهم!) Fix a big problem on profile after creating post(very important !)

جستجوی زنده، سابقه جستجو و غیره Live search,search history etc

• جستجوی زنده، نمایش نتایج جستجو Live search,display search results

• به تاریخچه جستجو اضافه کنید Add to search history

• نمایش تاریخچه جستجو و مرتب سازی Display Search History and sort

• حذف از تاریخچه جستجو و به روز رسانی زنده Delete from search history and live update

صفحه درخواست دوستان Friends-Requests page

• هدر صفحه دوستان و منوی سمت چپ Friends page-header & left menu

• دریافت دوستان، درخواست ها، لیست درخواست های ارسال شده Get friends,requests,sent request lists

• نمایش تمام کارت ها، پاسخگویی Display all cards,responsivness

• عملکرد دکمه ها Buttons functionalities

• بر اساس منو فیلتر کنید و صفحات و منوی فعال را تغییر دهید Filter by menu and switch pages and active menu

حالت تاریک Dark Mode

• راه اندازی حالت تاریک، صفحه ورود، هدر Setup Dark mode,login page,header

• حالت تاریک خانه و ایجاد پست بازشو Dark mode home & createPost popup

• نمایه حالت تاریک و همه چیز را تمام کنید Dark mode profile and finish everything

• بین حالت تاریک و حالت روشن جابجا شوید و مشکلات را برطرف کنید Switch between dark mode and light mode and fix issues

افکت اسکلت لودر (بسیار جالب) Skeleton loader effect (very cool)

• افکت اسکلت لودر 1 Skeleton loader effect 1

• افکت اسکلت لودر 2 Skeleton loader effect 2