React & Redux Hero: برنامه وب ایمن و مقیاس پذیر بسازید!!

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

مقدمه Introduction

• نحوه استفاده از دوره How to use the Course

• منبع پروژه Github Github Project Resource

• پروژه Github را دانلود کنید Download Github Project

• اصول طراحی - اجزا و مدولاریت Design Principles - Components and Modularity

• ساختار برنامه - شروع به کدنویسی Application Structure - Getting started to code

• راه اندازی مسیریابی اولیه Basic routing setup

• پیمایش به مسیرهای فرعی و مسیریابی پیش فرض Navigating to sub routes and default routing

راه اندازی پایه Base Setup

• ایجاد مؤلفه ورود به سیستم Creating the Sign-in component

• صفحه ثبت نام و پس زمینه را اضافه کنید Add Sign-up page and background

• اصلاح ناوبری برنامه‌ای و استایل Programatic navigation and styling fixes

• اجزای کنترل شده و کنترل نشده Controlled and Un-Controlled components

Redux Redux

• اصل طراحی - مدیریت دولتی Design Principle - State management

• شروع Redux Redux Getting Started

• افزودن فروشگاه Redux و ایجاد Redux Slices Adding Redux store and creating Redux Slices

• افزودن todo به فروشگاه Redux، Redux devtools Adding todo to Redux store , Redux devtools

• افزودن، حذف و تغییر وضعیت Todos Add , Remove and Toggle Todos

• استفاده از انتخابگرها در Redux، ویرایش Todos Using selectors in Redux , editing Todos

• فرم‌های Redux، اصول اولیه Redux Forms , The basics

• راه اندازی فرم Redux و React Redux and React form setup

• ورود به سیستم را از طریق فرم Redux مدیریت کنید Manage Signin via Redux form

• رفع Css در Signin Css fixes on Signin

• اعتبار سنجی فرم، رسیدگی به خطا Form validation , error handling

• پیوند فرم ثبت نام به فرم Redux Signup form link to Redux form

• اصل طراحی - سازگاری کد Design Principle - Code Consistency

• احراز هویت بر اساس اصل سازگاری کد Auth refactoring based on Code Consistency principle

لیست املاک Property Listings

• شروع صفحه فهرست املاک Property Listing page starter

• ساخت رابط کاربری AppBar Making the AppBar UI

• اضافه کردن نوار دسته Adding category bar

• افزودن جزء کارت ملک Adding property card component

• افزودن دکمه FAB به لیست املاک Adding FAB button to Property Listing

• افزودن انتخابگر زبان Adding Language Selector

• اصل طراحی - مقیاس پذیری و زیرساخت کد Design Principle - Scalability and Code Infrastructure

• نظریه زیرساخت مدال Modals Infrasturcture theory

• اجرای زیرساخت مدال - قسمت 1 Modals infrastructure implementation - Part 1

• اجرای زیرساخت مدال - قسمت 2 Modals infrastructure implementation - Part 2

• افزودن فیلدهای رابط کاربری ویژگی Adding Add Property UI Fields

• اضافه کردن ترجمه های زیر Adding Translations infra

• جابجایی بین زبان ها Switching between languages

• جای جای در ترجمه ها Placeholders in translations

• مرز خطا در استفاده از اجزای کلاس Error Boundary using Class components

• استفاده از کتابخانه مرزی خطا Using Error boundary library

پیاده سازی Backend Backend Implementation

• شروع به کار Backend - راه اندازی MongoDB Getting Backend started - MongoDB setup

• وارد کردن داده های نمونه، اتصال به DB Importing sample data , connecting to DB

• کاوش اجرای Backend Exploring the backend implementation

• رمزگذاری رمز عبور Encrypting the password

• استاندارد کردن پاسخ موفقیت آمیز Backend Standardize Backend Success response

• استاندارد کردن پاسخ خطای Backend Standardize Backend Error Response

پرس و جو RTK RTK Query

• مقدمه پرس و جو RTK RTK Query introduction

• تنظیم پرس و جو RTK - وارد شوید RTK query setup - Sign in

• استفاده از پرس و جوی RTK در کامپوننت Sing in Using RTK query in Sing in component

• تعمیر باطن - نمی توان به DB متصل شد Fixing backend - Cannot connect to DB

• رفع خطاها هنگام ارسال درخواست به backend Fixing errors when sending request to backend

• حل مسائل CORS Solving CORS issues

• اتصال پرس و جو RTK به فروشگاه Redux Hooking RTK query to Redux store

• تبدیل پاسخ سرور، مدیریت وضعیت رابط کاربری Transforming server response , UI State handling

• به منطق ورود به سیستم در Backend به روز رسانی کنید Update to the Sign in logic on Backend

• رسیدگی به خطاهای ورود به سیستم Handling Sign in errors

جریان JWT JWT Flows

• درک نحوه عملکرد جریان JWT Understanding how JWT flow works

• پیاده سازی JWT Signin در سرور JWT Signin implementation on Server

• بازخوانی نشانه ها Refresh tokens

• افزودن نشانه رفرش به ورود Adding refresh token to Sign in

• اعتبار سنجی توکن JWT Validating the JWT token

• افزودن سیاست های مسیر (Middlewares) Adding route polices ( Middlewares )

• شناسه کاربری را از توکن JWT بگیرید Capture User ID from JWT token

• نقطه پایان نشانه را بازخوانی کنید Refresh token endpoint

• محدود کردن استفاده مجدد از نشانه Refresh Restricting reuse of Refresh token

• اطلاعیه زیر در React Notification infra on React

• افزودن جزئیات Auth به Redux User Slice Adding Auth details to Redux User Slice

• افزودن سرصفحه auth به ایجاد ویژگی Adding auth headers to Create property

• در حال واکشی لیست اموال در Frontend Fetching Property list on Frontend

• Reducer Path، ارائه خواص از طریق API Reducer Path , rendering properties via API

• رفع UI در فهرست اموال UI fixes on Property Listing

• اضافه کردن redux persist برای ذخیره حالت Adding redux persist to save state

ذخیره سازی Caching

• RTK Caching RTK Caching

• RTK Caching در عمل در Todo RTK Caching in action on Todo

• پرس و جو RTK مشروط، ابزارهای ویرایش Conditional RTK Query , Editing toods

• واکشی خودکار جستارهای RTK Automatic fetch of RTK queries

• برچسب های کش RTK RTK Cache tags

• باطل کردن حافظه پنهان توسط Todo ID Invalidating cache by Todo ID

• رفع اشکال برای به روز رسانی Todos Bug fix for updating Todos

• پیش واکشی پرس و جوها با استفاده از RTK Pre-fetching queries using RTK

• به روز رسانی خوش بینانه با استفاده از کش RTK Optimistic Update using RTK Cache

• رفع ID در حین انجام آپدیت خوش بینانه Fixing ID while doing Optimistic Update

• افزودن برچسب کش به برنامه Property Adding cache tags to Property app

• Redux persist لیست سیاه Redux persist blacklist

• رفع UI، Redux persist fix UI Fixes , Redux persist fix

• اجرای توکن را در RTK به روز کنید Refresh token implementation in RTK

• مدیریت خرابی توکن به‌روزرسانی Handling refresh token failure

• پیمایش کاربر در مورد خرابی Reauth Navigating the user on Reauth failure

• پیاده سازی Mutex برای جلوگیری از تماس های متعدد API Implementing Mutex for preventing multiple API calls

مجوز Authorization

• مفهوم معماری مجوز Authorization architecture concept

• مرتبط کردن نقش ها با کاربران Associating roles with users

• اجرای سیاست مجوز Implementing Authorization policy

• منطق مجوز اشکال زدایی Debugging authorization logic

• منطق اجرای Frontend Auth Frontend Auth implementation Logic

• Auth infra را برای عناصر UI پیاده سازی کنید Implement Auth infra for UI elements

• محافظت از URL بر اساس مجوزهای Roles URL Protection based on Roles permissions

ارتباط زمان واقعی Real time communication

• بخش. مقدمه - ارتباط بیدرنگ چیست؟ Section. introduction - What is realtime communication ?

• نظرسنجی کوتاه Short polling

• نظرسنجی طولانی Long polling

• رویدادهای ارسال شده توسط سرور - پیاده سازی باطن Server sent events - backend implementation

• رویدادهای ارسال شده توسط سرور - اجرای جلویی Server sent events - front-end implementation

• رویدادهای ارسال شده توسط سرور - اعلان در مورد اضافه کردن کارها Server sent events - Notification on add todos

• معرفی و راه اندازی اتصال سوکت Socket connection introduction and setup

• پیام اتصال سوکت Socket connection messaging

• اتصال سوکت IO در فرانت اند Socket IO connection on frontend

• پخش جریانی Todos به Frontend Streaming Todos to frontend

• راه اندازی مادون پشتیبان اعلان Notification backend infra setup

• نظرسنجی کوتاه با استفاده از پرس و جو RTK Short polling using RTK query

• پخش جریانی اعلان‌ها به جلو Streaming notifications to frontend

افزایش UX UX Enhancement

• جستجوی ملک با استفاده از پرس و جو Searching property using query

• استفاده از پرس و جوهای تنبل در RTK Using lazy queries in RTK

• درخواست رد کردن Debouncing request

• یادآوری اجزای React Memonizing React components

• رفع عملکرد useCallback Fixing useCallback functionality

• یادداشت کردن مقادیر با استفاده از useMemo Memonizing values using useMemo

• رفع عملکرد جستجوی منحرف شده Fixing debounced search functionality

• استفاده از لیست مجازی Using Virtualized list

• نحوه مدیریت تم های رابط کاربری How to manage UI themes

• HOC برای ردیابی حرکات ماوس HOC for tracking mouse movements

• ردیابی اگر کاربر بیکار است Tracking if user is Idle

اضافی Extra

• مقدمه ای بر بارگذاری تنبل و اسکرول بی نهایت Introduction to Lazy loading and Infinite Scroll

• پیاده سازی صفحه بندی در لیست اموال Implementing pagination on property list

• افزودن API تقاطع Adding intersection API

• بارگیری داده های صفحه بندی شده از API Loading paginated data from API

• ادغام داده ها در حافظه پنهان Redux Merging data in Redux Cache

• اضافه کردن اسکلت لودرها Adding Skeleton Loaders

تنظیمات و امنیت Configs and Security

• پرچم گذاری ویژگی Feature flagging

• ارائه دهنده پرچم گذاری ویژگی (ارائه دهنده خارجی) Feature flagging provider ( External Provider )

• اجرای سفارشی پرچم‌گذاری ویژگی Feature flagging custom implementation

• ایمن سازی JWT با اثر انگشت دستگاه Securing JWT with device fingerprint

• اضافه کردن اثر انگشت در Frontend Adding fingerprint on Frontend

• تایید اثر انگشت از طریق JWT Validating fingerprint via JWT

• حملات XSS XSS attacks

• توکن های CSRF CSRF tokens

• حملات SSRF SSRF Attacks

• تزریق جاوا اسکریپت سمت سرور (SSJI) Server side Javascript injection ( SSJI )

افزودن انعطاف پذیری Adding Resiliency

• عقب نشینی نمایی با RTK مجدد Exponential backoff with retry RTK

• تلاش مجدد با خط مشی وجود Retries with exist policy

• افزودن میان افزار Redux برای ورود به سیستم Adding Redux middleware for logging