آموزش MERN STACK WordPress Clone - ساخت CMS نهایی

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

معرفی Introduction

• نسخه ی نمایشی پروژه Project demo

• نسخه ی نمایشی پروژه (داشبورد) Project demo (dashboard)

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

• ویرایشگر کد Code editor

• استفاده از دمو زنده به عنوان راهنما Using live demo as a guide

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

شروع شدن Getting Started

• آیا با JavaScript React یا NodeJs تازه کار هستید؟ Are you new to JavaScript React or NodeJs?

• یک پروژه را با استفاده از npm راه اندازی کنید Initialize a project using npm

• راه اندازی پروژه React NextJs React NextJs project setup

• طراحی مورچه و جزء برنامه سفارشی Ant design and custom app component

• در حال آزمایش جزء مورچه Trying ant component

React Context و Hooks React Context and Hooks

• زمینه جهانی (نظریه) Global context (theory)

• واکنش قلاب React hooks

• دسترسی به زمینه Accessing context

• زمینه موضوع را تغییر دهید Toggle theme context

ناوبری و طرح‌بندی Navigation and Layouts

• پوشه ایستا برای ذخیره فایل های CSS Static folder for storing CSS files

• جزء منو Menu component

• پیوند بعدی برای پیمایش بین اجزا Next link to navigate between components

• جزء طرح Layout component

• جزء کلاس به عملکرد (نوار کناری) Class to functional component (sidebar)

• منوی مدیریت Admin menu

• نمادهای منو Menu icons

• url فعلی را تنظیم کنید Set current url

• تنظیم لینک فعال Set active link

• منوی جمع‌کردن خودکار بر اساس عرض پنجره Auto collapse menu based on window width

اجزای طراحی مورچه Ant Design Components

• فرم طراحی مورچه (تئوری) Ant design form (theory)

• آشنایی با شبکه و ستون ها Understanding grid and columns

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

• فرم ورود Signin form

راه اندازی سرور Server Setup

• ایجاد سرور احراز هویت Generate auth server

• درک سرور و درخواست GET Understanding server and GET request

• درک سرور و درخواست POST Understanding server and POST request

• در اطلس مونگو ثبت نام کنید Signup to mongo atlas

• در sendgrid ثبت نام کنید Signup to sendgrid

ثبت نام و ثبت نام Signup and Signin

• درخواست و اشکال زدایی Axios POST Axios POST request and debugging

• ذخیره کاربر در پایگاه داده Save user in database

• اعلان ها و بارگیری نان تست Toast notifications and loading

• زمینه احراز هویت Auth context

• استفاده از زمینه و ذخیره سازی محلی Using context and local storage

• فایل Env و پیکربندی axios Env file and axios configuration

• ورود به سیستم باطن Signin backend

• ورود به جلو Signin frontend

• خروج از سیستم Signout

• فیلدهای رندر و بازنشانی مشروط Conditional rendering and reset fields

رمز عبور را فراموش کرده و بازنشانی کنید Forgot and Reset Password

• نحوه کارکرد رمز عبور فراموش شده (تئوری) How forgot password works (theory)

• درخواست رمز عبور را فراموش کرده اید Forgot password request

• پاسخ رمز عبور را فراموش کرده اید Forgot password resposne

• پیاده سازی رمز عبور بازنشانی Implement reset password

• در حال تلاش برای بازنشانی رمز عبور Trying reset password

دسته ها (سرور) Categories (server)

• صفحه دسته های مدیریت Admin categories page

• فرم ایجاد دسته Category create form

• طرح واره دسته Category schema

• مسیر دسته بندی و عملکرد کنترلر Category route and controller function

• میان افزار توضیح داد Middleware explained

• درخواست سرصفحه ها Request headers

• نیاز به میان افزار ورود به سیستم Require signin middleware

• ایجاد دسته Create category

• میان افزار ادمین است Is admin middleware

کنترل دسترسی ادمین Admin Access Control

• تغییر مسیر مبتنی بر نقش Role based redirect

• محافظت از صفحات مدیریت Protecting admin pages

• وضعیت بارگیری Loading state

• نقطه پایانی مدیر فعلی Current admin endpoint

• محافظت از صفحه بر اساس پاسخ سرور Protecting page based on server response

مدیریت دسته ها (ادمین) Categories Management (admin)

• سرور لیست دسته ها Categories list server

• لیست مشتری دسته ها List of categories client

• طرح بندی ستون های مورچه ای Ant columns layout

• حذف دسته Delete category

• به روز رسانی سرور دسته Update category server

• استفاده از مولفه مدال Using modal component

• در حال به روز رسانی دسته بر روی مودال Updating category on modal

• به روز رسانی کامل دسته Complete category update

ویرایشگر متن غنی برای پست ها Rich Text Editor for Posts

• پیش نمایش ویرایشگر و صفحه پست ها Editor preview and posts page

• نصب ویرایشگر نشانه گذاری غنی Installing rich markdown editor

• ویرایشگر استایل Styling editor

• عنوان و محتوا را در حافظه محلی ارسال کنید Post title and content in local storage

• بارگذاری دسته ها Load categories

• انتخاب چندگانه Multiple select

• ویرایشگر متن غنی تصویر آپلود Rich text editor upload image

در حال آپلود تصاویر Uploading images

• عکس العمل تغییر اندازه تصویر و حل مشکلات ویرایشگر React image resize and resolve editor issues

• استفاده از ابری Using cloudinary

• در حال آپلود تصویر Uploading image

• پیش نمایش پست Post preview

• رسیدگی به انتشار Handle publish

پست ها (سرور) Posts (server)

• مسیر پست و طرحواره Post route and schema

• ذخیره پست در پایگاه داده Save post in database

• سرور همه پست ها All posts server

• ایجاد پست ها Creating posts

• لیست مشتری پست ها List posts client

متن پست Post Context

• چرا به زمینه پست (نظریه) نیاز داریم Why we need post context (theory)

• وضعیت بلند کردن پست ها Lifting state of posts

• وضعیت بالا بردن دسته ها Lifting state of categories

کتابخانه رسانه (با الهام از وردپرس) Media Library (wordpress inspired)

• کتابخانه رسانه ای الهام گرفته از وردپرس WordPress inspired media library

• مودال تصویر برجسته Featured image modal

• اجزای رسانه Media components

• کامپوننت را آپلود کنید Upload component

• ارسال تصویر به صورت فرم داده Sending image as formdata

• ذخیره رسانه در پایگاه داده Save media in database

• چندین تصویر را بکشید و رها کنید Drag and drop multiple images

• زمینه رسانه ای Media context

• پیش نمایش تصویر آپلود شده Uploaded image preview

• ایجاد پست با تصویر برجسته Create post with featured image

• نقاط پایانی رسانه ها Media endpoints

• واکشی رسانه Fetch media

• از کتابخانه رسانه انتخاب کنید Select from media library

• رسانه را حذف کنید Remove media

پست ها و رسانه ها (مشاهده حذف ویرایش سئو) Posts and Media (views SEO edit delete)

• سئو در برنامه های واکنش و برنامه های nextjs SEO in react apps and nextjs apps

• بارگیری همه پست ها Load all posts

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

• صفحه تک پست Single post page

• ارسال تصویر و محتوای متا Post image and meta content

• اسکرول نمای پست و طرح‌بندی واکنش‌گرا Scrolling post view and responsive layout

• حذف پست Delete post

• پست ویرایش صفحه Post edit page

• پست را برای ویرایش از قبل پر کنید Pre populate post for edit

• ارسال درخواست ویرایش Post edit request client

• سرور ویرایش پست Post edit server

• آپلود رسانه مدیریت Admin media upload

• کتابخانه رسانه مدیریت Admin media library

ایجاد چیدمان کاربر و نویسنده Creating User and Author Layout

• ایجاد کاربر توسط ادمین Create user by admin

• مولد رمز عبور را انتخاب کنید و کادر را علامت بزنید Password generator select and checkbox

• ایجاد کاربر توسط سرور مدیریت Create user by admin server

• اطلاعات حساب را از طریق ایمیل ارسال کنید Send account info by email

• بازآفرینی کد پست جدید Code refactoring new post

• لیست پست های بازآفرینی کد Code refactoring post list

• میان افزار ادمین است Is admin middleware

داشبورد نویسنده Author Dashboard

• پیمایش و طرح‌بندی نویسنده Author nav and layout

• صفحه ایجاد پست نویسنده Author post create page

• می‌تواند میان‌افزار حذف به‌روزرسانی خواندنی ایجاد کند Can create read update delete middleware

• میان افزار جدید را اعمال کنید Apply new middleware

• پست های نویسنده Author posts

• ویرایش پست نویسنده Author post edit

• مدیریت رسانه نویسنده Author media management

داشبورد مشترکین Subscriber Dashboard

• طرح و صفحات ناوبری مشترک Subscriber nav layout and pages

• صفحه کاربران برای ادمین Users page for admin

• لیست کاربران برای ادمین Users list for admin

• لیست کاربران با تعداد پست ها Users list with number of posts

• حذف کاربر توسط ادمین Delete user by admin

• صفحه به روز رسانی کاربر برای ادمین User update page for admin

• فیلدهای فرم و رسانه به روز رسانی کاربر User update form fields and media

• به روز رسانی کاربر توسط ادمین Update user by admin

• پیش نمایش تصویر کاربر User image preview

جستجو و فیلتر پروفایل کاربر User Profile Searching and Filtering

• صفحه نمایه Profile page

• صفحه مشخصات نویسنده و مشترک Author and subscriber profile page

• به روز رسانی نمایه شخصی بر اساس نقش ها Updating own profile based on roles

• تعداد پست ها و سرور صفحه بندی Post count and pagination server

• بارگذاری پست های بیشتر Load more posts

• همه پست ها برای ادمین All posts for admin

• جستجو و فیلتر کردن Searching and filtering

نظرات Comments

• ایجاد سرور نظر Creating comment server

• ارسال فرم نظر Post comment form

• ارسال نظر مشتری Posting comment client

• پر کردن نظرات پست Populating post comments

• رندر لیست نظرات Render list of comments

• می تواند سرور حذف نظرات را به روز کند Can update delete comments server

• نظرات عملکردهای کنترلر CRUD Comments CRUD controller functions

• صفحه نظرات ادمین Admin comments page

• ارائه نظرات برای ادمین Rendering comments for admin

• بارگذاری نظرات بیشتر Load more comments

• توضیحات توضیحات مشاهده و حذف Comments description view and delete

• نظرات توسط ادمین حذف می شود Comments delete by admin

• صفحه نظرات برای کاربران Comments page for users

• حالت ویرایش نظر Comment edit modal

• به روز رسانی نظر Comment update

فرم تماس و اشتراک اجتماعی Contact Form and Social Share

• صفحه تماس Contact page

• ارسال فرم تماس Contact form submit

• ارسال ایمیل فرم تماس Send contact form email

• پست را در شبکه های اجتماعی به اشتراک بگذارید Share post to social networks

آمار برنامه (ادمین) و قلاب های سفارشی App Statistics (admin) and Custom Hooks

• سرور آمار اسناد Documents statistics server

• صفحه فهرست مدیریت برای نمایش آمار Admin index page to display statistics

• اعداد با پیشرفت مقابله می کنند Numbers counter with progress

• دسته بندی استفاده از قلاب سفارشی Custom hook useCategory

• قلاب سفارشی useLatestPosts Custom hook useLatestPosts

• پست ها بر اساس سرور دسته Posts by category server

• پست ها بر اساس صفحه دسته بندی Posts by category page

• لیست پست ها بر اساس دسته بندی List of posts based on category

سفارشی سازی (ادمین) Customization (admin)

• تصویر تمام عرض Full width image

• در حال بارگیری برای تغییر مسیر Loading to redirect

• متن در بالای تصویر تمام عرض Text on top of full width image

• شمارنده آمار در صفحه اصلی Stats counter on home page

• آخرین پست ها در صفحه اصلی Latest posts in home page

• تصویر اختلاف منظر Parallax image

• لیست دسته ها در صفحه اصلی Categories list in home page

• پاورقی Footer

• سفارشی کردن صفحه Customize page

• صفحه اصلی را از داشبورد سفارشی کنید Customize home page from dashboard

• ایجاد صفحه و واکشی سرور Page create and fetch server

• صفحه اصلی را سفارشی کنید Customize home page

• قلاب سفارشی useHome Custom hook useHome

گسترش Deployment

• نمای کلی استقرار Deployment overview

• راه اندازی اقیانوس دیجیتال Digital ocean setup

• دسترسی به SSH SSH access

• کد را به github فشار دهید Push code to github

• نصب NodeJs NGINX و git clone Installing NodeJs NGINX and git clone

• نصب MongoDB و انجام تغییرات Installing MongoDB and commit changes

• در حال اجرا frontend Running frontend

• در حال تلاش برای ثبت نام Trying signup

• انجام اقدامات در داشبورد Performing actions in dashboard

• افکار نهایی Final thoughts

جایزه Bonus

• دوره های دیگری که ممکن است دوست داشته باشید Other courses you may like

• به سرور Discord من بپیوندید Join my Discord server