آموزش MERN Stack 2023 - برنامه بازار املاک و مستغلات از ابتدا

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

معرفی Introduction

• معرفی دوره Course introduction

• آیا برای این دوره آماده هستید؟ Are you ready for this course?

• نسخه ی نمایشی پروژه به پایان رسید Finished project demo

• کد منبع را از Github دانلود کنید Download source code from Github

راه اندازی پروژه NodeJs و MongoDB NodeJs and MongoDB Project Setup

• چگونه پروژه NodeJs را مقداردهی اولیه کنیم؟ How to initialize NodeJs project?

• چگونه سرور Node Express ایجاد کنیم؟ How to create Node Express server?

• چگونه به صورت محلی به MongoDB متصل شویم؟ How to connect to MongoDB locally?

• چگونه از Mongo Atlas استفاده کنیم؟ How to use Mongo Atlas?

• چگونه فایل routes را در NodeJs بارگذاری کنیم؟ How to load routes file in NodeJs?

• چگونه از توابع کنترلر در NodeJs استفاده کنیم؟ How to use controller functions in NodeJs?

ثبت نام کاربر و ورود به سیستم با تایید ایمیل با استفاده از AWS SES (سرور) User Registration and Login with Email Confirmation using AWS SES (Server)

• چگونه مدل پایگاه داده در MongoDB ایجاد کنیم؟ How to create database model in MongoDB?

• چگونه بررسی کنیم که آیا کاربر آدرس ایمیل معتبری ارائه کرده است؟ How to check if user provided valid email address?

• برای استفاده از SES و S3 در AWS ثبت نام کنید Signup to AWS for using SES and S3

• چگونه با استفاده از AWS SES ایمیل ارسال کنیم؟ How to send email using AWS SES?

• چگونه با استفاده از AWS SES ایمیل پویا ارسال کنیم؟ How to send dynamic email using AWS SES?

• چگونه الگوی خود را برای ارسال ایمیل با استفاده از AWS SES بسازیم؟ How to build your own template to send emails using AWS SES?

• چگونه JWT را رمزگشایی کنیم؟ How to decode JWT?

• چگونه رمز عبور را با استفاده از Bcrypt در NodeJs هش و مقایسه کنیم؟ How to hash and compare password using Bcrypt in NodeJs?

• چگونه کاربر را در MongoDB ثبت یا ذخیره کنیم؟ How to register or save user in MongoDB?

• چگونه اعتبارسنجی ایمیل و رمز عبور را در NodeJs اعمال کنیم؟ How to apply email and password validation in NodeJs?

• چگونه کاربر را در NodeJs لاگین کنیم؟ How to login user in NodeJs?

فراموشی رمز عبور و دسترسی به حساب کاربری (سرور) Forgot Password and Accessing Account (Server)

• چگونه قابلیت فراموشی رمز عبور را در NodeJs پیاده سازی کنیم؟ How to implement forgot password feature in NodeJs?

• در حال امتحان کردن درخواست رمز فراموش شده با استفاده از Postman Trying out forgot password request using Postman

• چگونه به کاربر اجازه دسترسی به حساب کاربری را پس از درخواست فراموشی رمز عبور بدهیم؟ How to allow user to access account after forgot password request?

محافظت از مسیرها و رمز نوسازی (سرور) Protect Routes and Refresh Token (Server)

• چگونه از مسیرها در برابر کاربران وارد نشده محافظت کنیم؟ How to protect routes from not logged-in users?

• چگونه می توان توکن تازه را در درخواست توکن رفرش ارسال کرد؟ How to send fresh token on refresh token request?

• بازآفرینی کد، آزمایش دستی و جمع بندی Code refactoring, manual testing and recap

• چگونه کاربر وارد شده فعلی را از MongoDB دریافت کنیم؟ How to get currently logged-in user from MongoDB?

مشخصات کاربر و به روز رسانی (سرور) User Profile and Update (Server)

• چگونه نقطه پایانی نمایه عمومی کاربر ایجاد کنیم؟ How to create user public profile endpoint?

• چگونه بروزرسانی رمز عبور کاربر را پیاده سازی کنیم؟ How to implement user password update?

• چگونه پروفایل کاربری را به روز کنیم؟ How to update user profile?

React Project Setup با React Router و Context React Project Setup with React Router and Context

• چگونه یک پروژه React جدید ایجاد کنیم؟ How to create a new React project?

• چگونه از تم بوت استرپ متریال در React استفاده کنیم؟ How to use material bootstrap theme in React?

• چگونه با استفاده از روتر React سیستم مسیریابی چندگانه را اضافه کنیم؟ How to add multiple routing system using React router?

• چگونه با استفاده از Context یک حالت جهانی در React ایجاد کنیم و به آن دسترسی پیدا کنیم؟ How to create and access a global state in React using Context?

• چگونه منوی ناوبری را در React ایجاد کنیم؟ How to create navigation menu in React?

• چگونه در React منوی کشویی ایجاد کنیم؟ How to create dropdown menu in React?

ثبت نام کاربر، ورود به سیستم، بازنشانی رمز عبور و دسترسی به حساب کاربری (مشتری) User Registration, Login, Reset Password and Accessing Account (Client)

• چگونه در React فرم ثبت نام کاربری ایجاد کنیم؟ How to create user registration form in React?

• چگونه ورودی کاربر را در حالت کامپوننت محلی در React ذخیره کنیم؟ How to store user input in local component state in React?

• چگونه با استفاده از Axios درخواست POST ایجاد کنیم؟ How to make POST request using Axios?

• چگونه پیام های خطای سرور را با استفاده از اعلان های تست در React نشان دهیم؟ How to show server error messages using toast notifications in React?

• چگونه Axios را به صورت جهانی پیکربندی کنیم؟ How to configure Axios globally?

• چگونه وضعیت بارگذاری را نشان دهیم و کاربر را تغییر مسیر دهیم؟ How to show loading status and redirect user?

• چگونه پارامترهای مسیر را در React بگیریم؟ How to grab route params in React?

• با ارسال JWT کاربر را ثبت کنید Register the user by sending JWT

• چگونه می توان Axios درخواست 2 را برای همان نقطه پایانی حل کرد؟ How to solve Axios making 2 request for same endpoint?

• چگونه از از بین رفتن داده های React Context در بازخوانی صفحه جلوگیری کنیم؟ How to prevent React Context data lost on page refresh?

• چگونه در React صفحه ورود ایجاد کنیم؟ How to create login page in React?

• چگونه Logout را در React پیاده سازی کنیم؟ How to implement logout in React?

• چگونه به صورت مشروط پیوندهای ورود و خروج را نشان دهیم؟ How to conditionally show login and logout links?

• چگونه قابلیت فراموشی رمز عبور را در React اضافه کنیم؟ How to add forgot password feature in React?

• چگونه به کاربر اجازه دسترسی به حساب کاربری در رمز عبور فراموش شده را بدهیم؟ How to allow user to access account on forgot password?

صفحات محافظت شده و رمز بازخوانی (مشتری) Protected Pages and Refresh Token (Client)

• چگونه داشبورد کاربری را با منوی نوار کناری ایجاد کنیم؟ How to create user dashboard with sidebar menu?

• چگونه از صفحات در برابر کاربران وارد نشده محافظت کنیم؟ How to protect pages from not logged-in user?

• کد رهگیرهای Axios Axios interceptors code

• چگونه با استفاده از Axios توکن را به روز کنیم؟ How to refresh token using Axios?

• به صورت مشروط کاربر بر اساس وضعیت احراز هویت پیمایش شود؟ Conditionally navigate user based on auth status?

ایجاد آگهی برای فروش یا اجاره، Google Places و آپلود چند تصویر در AWS S3 Create Ad to Sell or Rent, Google Places and Multiple Image Uploads to AWS S3

• صفحه آگهی با گزینه هایی برای فروش یا اجاره ایجاد کنید Create Ad page with options to sell or rent

• چگونه می توان گزینه های فروش یا اجاره خانه و زمین را اجرا کرد؟ How to implement sell or rent house and land options?

• چگونه از فرم ایجاد آگهی واحد برای فروش یا اجاره خانه و زمین استفاده کنیم؟ How to use single Ad create form for selling or renting house and land?

• چگونه کلیدهای API googleplace را دریافت کنیم؟ How to get google places API keys?

• چگونه از مکان‌های گوگل برای تکمیل خودکار کشویی آدرس استفاده کنیم؟ How to use google places to auto-complete address dropdown?

• چگونه با فرمت ارز جدا شده با کاما فیلد قیمت ایجاد کنیم؟ How to create price field with comma separated currency format?

• فیلدهای فرم اضافی را به فرم ایجاد آگهی اضافه کنید Add additional form fields to the Ad create form

• چگونه کامپوننت آپلود تصویر را در React ایجاد کنیم؟ How to create image upload component in React?

• چگونه سایز سمت مشتری تصویر را در React تغییر دهیم؟ How to resize image client side in React?

• چگونه در AWS S3 سیاست سطلی ایجاد کنیم؟ How to create bucket policy in AWS S3?

• چگونه می توان تصویر را در AWS S3 از NodeJs آپلود کرد؟ How to upload image to AWS S3 from NodeJs?

• قطعه کد برای آپلود تصویر Code snippet for uploading image

• چگونه مجموعه ای از تصاویر آپلود شده را نمایش دهیم؟ How to display array of uploaded images?

• چگونه تصویر را از AWS S3 حذف کنیم؟ How to delete image from AWS S3?

ذخیره آگهی در MongoDB با مکان جغرافیایی در NodeJs Saving Ad to MongoDB with Geo Location in NodeJs

• چگونه با mongoose مدل آگهی ایجاد کنیم؟ How to create Ad model with mongoose?

• چگونه داده های ایجاد آگهی جدید را از React ارسال کنیم؟ How to send new Ad create data from React?

• نحوه دریافت موقعیت جغرافیایی در NodeJs با استفاده از API googleplace How to get geo location in NodeJs using google places API

• چگونه آگهی جدید را در MongoDB ذخیره کنیم؟ How to save new Ad in MongoDB?

نمایش تبلیغات برای فروش و اجاره Displaying Ads for Sell and Rent

• دکمه غیرفعال و تغییر مسیر کاربر در ایجاد آگهی؟ Disable button and redirect user on Ad create?

• چگونه می توان فیلدهای فرم را بر اساس خانه یا زمین نشان داد و پنهان کرد؟ How to show and hide form fields based on house or land?

• چگونه از MongoDB آگهی های فروش و اجاره را پرس و جو کنیم؟ How to query Ads for sell and rent from MongoDB?

• چگونه آگهی‌های فروش و اجاره را در React واکشی کنیم؟ How to fetch Ads for sell and rent in React?

• چگونه کامپوننت کارت قابل استفاده مجدد را در React ایجاد کنیم؟ How to create re-usable card component in React?

• چگونه با استفاده از CSS افکت شناور کارت ایجاد کنیم؟ How to make card hover effect using CSS?

• چگونه از تمام آیکون های محبوب در React استفاده کنیم؟ How to use all popular icons in React?

• چگونه قیمت را با کاما فرمت کنیم؟ How to format price with comma?

• چگونه از نشان ریبون در کامپوننت کارت React استفاده کنیم؟ How to use ribbon badge in React card component?

نمایش تک آگهی با گالری تصاویر Single Ad View with Image Gallery

• چگونه از MongoDB پرس و جو کنیم تا آگهی تکی و تبلیغات مرتبط را دریافت کنیم؟ How to query MongoDB to get single Ad and related Ads?

• چگونه در React یک صفحه نمایش آگهی ایجاد کنیم؟ How to create single Ad view page in React?

• چگونه می توان آگهی فردی را بر اساس پارامترهای مسیر واکشی کرد؟ How to fetch individual Ad based on route params?

• چگونه در React گالری تصاویر بسازیم؟ How to create image gallery in React?

• چگونه عکس های گالری تصاویر را به صورت مدال نشان دهیم؟ How to show image gallery photos in a modal?

• چگونه می توان آرایه عکس را برای استفاده در چرخ فلک تصاویر React ایجاد کرد؟ How to generate photos array to use in React images carousel?

• با استفاده از CSS ارتفاع تصاویر را کنترل کنید Control the height of images using CSS

• چگونه اطلاعات اصلی آگهی را در کنار گالری تصاویر نشان دهیم؟ How to show Ad main info beside image gallery?

• چگونه می توان ویژگی های تبلیغات را در صفحه نمایش تک آگهی نشان داد؟ How to show Ad features in single Ad view page?

• چگونه با استفاده از DayJs تاریخ را نشان دهیم؟ How to show date using DayJs?

پسندیدن و عدم پسندیدن آگهی (لیست علاقه مندی ها) Ad Like and Unlike (Wishlist)

• چگونه قابلیت لایک و عدم دوست را در NodeJs اضافه کنیم؟ How to add like and unlike feature in NodeJs?

• چگونه در React کامپوننت لایک و غیر مشابه ایجاد کنیم؟ How to create like and unlike component in React?

• چگونه از ویژگی لایک و بر خلاف ری اکت استفاده کنیم؟ How to use like and unlike feature in React?

• چگونه کاربر را به صفحه مورد نظر هدایت کنیم؟ How to redirect user back to intended page?

Google Maps، تبلیغات مرتبط و بخش پاورقی Google Maps, Related Ads and Footer Section

• چگونه از نقشه های گوگل در React استفاده کنیم؟ How to use google maps in React?

• چگونه مشکلات نقشه گوگل را در React اشکال زدایی کنیم؟ How to debug google map issues in React?

• چگونه با افزودن خطوط شکسته و رندر HTML محتوای textarea را خواناتر کنیم How to make textarea content more readable by adding line breaks and render HTML

• چگونه تبلیغات مرتبط را در صفحه نمایش آگهی واحد نمایش دهیم؟ How to display related Ads in the single Ad view page?

• چگونه کامپوننت پاورقی با کپی رایت و سال جاری ایجاد کنیم؟ How to create footer component with copyright and current year?

به روز رسانی پروفایل و آپلود تصویر Profile Update and Image Upload

• چگونه صفحه به روز رسانی پروفایل کاربری را در React ایجاد کنیم؟ How to create user profile update page in React?

• چگونه اطلاعات کاربر را در وضعیت جزء به روز رسانی نمایه از قبل پر کنیم؟ How to pre-populate user info in profile update component state?

• چگونه فرم بروزرسانی پروفایل کاربری را در React ایجاد کنیم؟ How to create user profile update form in React?

• چگونه از آپلود تصویر در صفحه به روز رسانی پروفایل کاربر پشتیبانی کنیم؟ How to support image upload on user profile update page?

• چگونه Axios PUT را برای به روز رسانی نمایه کاربر به API ارسال کنیم؟ How to make Axios PUT request to API to update user profile?

• چگونه به کاربر اجازه به روز رسانی رمز عبور را بدهیم؟ How to allow user to update password?

با فروشنده تماس بگیرید Contact Seller

• چگونه کامپوننت فروشنده تماس ایجاد کنیم؟ How to create contact seller component?

• چگونه فرم را برای کاربران وارد نشده در React غیرفعال کنیم؟ How to disable form for not logged-in users in React?

• چگونه اطلاعات کاربر وارد شده را در فرم تماس از قبل پر کنیم؟ How to pre-populate logged-in user info into the contact form?

• نحوه ارسال ایمیل فروشنده تماس با استفاده از AWS SES از NodeJs - 1 How to send contact seller email using AWS SES from NodeJs - 1

• نحوه ارسال ایمیل با فروشنده تماس با استفاده از AWS SES از NodeJs - 2 How to send contact seller email using AWS SES from NodeJs - 2

• خلاصه پروژه و مراحل بعدی Project recap and the next steps

داشبورد کاربر با تبلیغات به روز رسانی، حذف و بارگذاری بیشتر User Dashboard with Ads Update, Delete and Load More

• چگونه می توان همه تبلیغات ایجاد شده توسط کاربر را دریافت کرد؟ How to get all Ads created by user?

• محتوای مشروط در داشبورد کاربر Conditional content in user dashboard

• چگونه همه تبلیغات توسط کاربر فعلی را در React واکشی کنیم؟ How to fetch all Ads by current user in React?

• چگونه قابلیت صفحه‌بندی بار بیشتری را در React اضافه کنیم؟ How to add load more pagination feature in React?

• چگونه صفحه ویرایش آگهی ایجاد کنیم؟ How to create Ad edit page?

• چگونه درخواست PUT را برای به روز رسانی Ad از React انجام دهیم؟ How to make PUT request to update Ad from React?

• چگونه مسیر و کنترلر به روز رسانی Ad را در NodeJs ایجاد کنیم؟ How to create Ad update route and controller in NodeJs?

نمایش لیست علاقه مندی ها و ویژگی های درخواست شده Display Wishlist and Enquired Properties

• چگونه از MongoDB خصوصیات مورد علاقه و درخواست شده را پرس و جو کنیم؟ How to query liked and enquired properties from MongoDB?

• چگونه می توان تبلیغات لیست علاقه مندی کاربران را در React نمایش داد؟ How to display user wishlist Ads in React?

• چگونه تبلیغات درخواستی کاربر را نمایش دهیم؟ How to display user enquired Ads?

• چگونه قابلیت حذف آگهی را پیاده سازی کنیم؟ How to implement delete Ad feature?

نمایه عمومی فروشندگان (نمایندگان). Sellers (Agents) Public Profile

• چگونه می توان همه آژانس های املاک با نمایه عمومی را از MongoDB دریافت کرد؟ How to fetch all real estate agents with public profile from MongoDB?

• چگونه لیستی از مشاوران املاک را در React نشان دهیم؟ How to show list of real estate agents in React?

• چگونه لیستی از بنگاه های املاک را در جزء کارت کاربری نمایش دهیم؟ How to show list of real estate agents in user card component?

• چگونه تعداد تبلیغات نماینده را نشان دهیم و خطای دایره ای json را برطرف کنیم؟ How to show agent Ad count and resolve circular json error?

• چگونه نمایه عمومی کاربر را با تبلیغات آنها نشان دهیم؟ How to show user public profile with their Ads?

نمایش تبلیغات برای فروش و اجاره Display Ads for Sell and Rent

• چگونه تبلیغات خرید و اجاره را در صفحات مختلف نمایش دهیم؟ How to display Ads for buy and rent in different pages?

• چگونه می توان تبلیغات برای فروش و اجاره نقاط پایانی در سرور ایجاد کرد؟ How to create Ads for sell and rent endpoints in server?

جستجوی پیشرفته با چندین فیلتر از جمله موقعیت جغرافیایی Advance Search with Multiple Filters including Geo Location

• چگونه زمینه جستجو ایجاد کنیم؟ How to create search context?

• یک فرم جستجو ایجاد کنید و در چندین صفحه نمایش دهید Create a search form and display in multiple pages

• چگونه می توان آدرس کشویی مکان های گوگل را در فرم جستجو نشان داد؟ How to show google places address dropdown on search form?

• کد لیست قیمت استاتیک Static price list code

• آرایه ای از محدوده قیمت ایستا ایجاد کنید Create an array of static price range

• کد کشویی لیست قیمت Price list dropdown code

• نحوه نمایش کشویی قیمت به صورت مشروط برای تبلیغات خرید و اجاره How to conditionally show price dropdown for buy and rent Ads

• نحوه استفاده از گزینه های اجاره خانه و زمین خرید مشروط برای جستجو How to use conditional buy rent house and lands options for search

• چگونه با query string درخواست جستجو کنیم؟ How to make search request with query string?

• چگونه بر اساس موقعیت مکانی نزدیک، محدوده قیمت و سایر داده ها در MongoDB جستجو کنیم؟ How to search based on nearby location, price range and other data in MongoDB?

• چگونه نتایج جستجو را نمایش دهیم؟ How to display search results?

تغییر مسیر، استقرار و نسخه ی نمایشی Redirect, Deployment and Demo

• چگونه کاربر احراز هویت نشده را از صفحه محافظت شده هدایت کنیم؟ How to redirect un-authenticated user from protected page?

• راهنمای استقرار Deployment guide

جایزه Bonus

• دوره های دیگری که ممکن است دوست داشته باشید Other Courses You May Like