React TypeScript - ساخت پروژه تجارت الکترونیک (Redux، TanStack)

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

مقدمه Introduction

• مقدمه Introduction

• در این دوره چه چیزی یاد خواهید گرفت؟ What'll you learn in this course?

• توجه - قبل از ثبت نام در این دوره NOTE - Before you enroll this course

TypeScript و React TypeScript TypeScript & React TypeScript

• نمای کلی بخش Section Overview

• انواع داده های اولیه Primitive data types

• هر نوع Any type

• نوع اتحادیه Union type

• آرایه Array

• آرایه قسمت 2 Array part 2

• شیء Object

• تابع Function

• عملکرد با پارامترهای شی Function with object parameters

• نوع سفارشی Custom type

• نوع سفارشی - قسمت 2 Custom type - part 2

• رابط Interface

• عمومی Generic

• با React و TypeScript شروع کنید Start with React & TypeScript

• زمین بازی با پروژه React TS Playground with React TS project

• کامپوننت در React TS Component in React TS

• استفاده از قلاب حالت useState hook

• useState hook - قسمت 2 useState hook - part 2

• useState hook - قسمت 3 useState hook - part 3

• لوازم جانبی Props

• با رویداد کار کنید Work with event

زمان پروژه بزرگ - راه اندازی Big Project Time - Setup

• ایجاد پروژه با استفاده از VITE Create project using VITE

• راه اندازی ساختار پوشه برای پروژه Setup folder structure for project

• راه اندازی react روتر dom Setup react router dom

• راه‌اندازی مسیر تودرتو Setting up Nested Route

• مسیر تودرتو چگونه کار می کند؟ (جزئیات را توضیح دهید) How nested route work ? (Explain Detail)

• راه اندازی رابط کاربری مواد (MUI) Setup Material UI (MUI)

• تنظیم بیانیه واردات مطلق Setup absolute import statement

راه اندازی Backend Setup Backend

• مهم (پرش نکنید) IMPORTANT (DO NOT SKIP)

• راه اندازی پروژه باطن Setup backend project

• راه اندازی لایه API با axios Setup API Layer with axios

ویژگی: احراز هویت JWT Feature: Authentication JWT

• حافظه محلی در مقابل کوکی Local storage vs Cookie

• راه اندازی (سریع) Sign Un Component Setup (Fast) Sign Un Component

• راه اندازی مؤلفه ورود به سیستم Setup Sign In Component

• تأیید فیلد با مؤلفه کنترل شده Validate Field with Controlled Component

• فیلد را با فرم React Hook تأیید کنید Validate Field with React Hook Form

• اعتبار سنجی طرحواره با yup Schema validation with yup

• راه اندازی نان تست با دست... Setup toastify by hand...

• راه اندازی نان تست قسمت 2 Setup toastify part 2

• ردوکس را برای نان تست تنظیم کنید Setup redux for toastify

• مولفه متحرک نان تست Moving Toast component

• دسته API ثبت نام Signup API handle

• پرس و جو واکنش tanstack را راه اندازی کنید Setup tanstack react query

• api ثبت نام را با react query تغییر دهید Mutate sign up api with react query

• تنظیم redux برای وضعیت کاربر Setup redux for user state

• دسته کاربر فعلی را دریافت کنید Get current user handle

• یک قلاب سفارشی برای react query ایجاد کنید Create a custom hook for react query

• تمرین: قابلیت ورود به سیستم Excercise: Sign In Functionality

• قابلیت ورود به سیستم Sign In Functionality

• در صورت عدم احراز هویت، تغییر مسیر دهید Redirect if NOT authenticated

• قلاب سفارشی برای احراز هویت Custom hook for authenticate

• داشبورد مدیریت ایجاد کنید Create admin dashboard

• قلاب useAuthenticate را رفع کنید fix useAuthenticate hook

• سربرگ و خروج Header & Logout

• هدر Admin & Sidebar Header Admin & Sidebar

ویژگی: مدیریت دسته Feature: Category Management

• داده های نوار کناری Sidebar data

• تنظیم جزء دسته Setup category component

• اضافه کردن دسته بندی معین Add category modal

• useQuery برای ارائه فهرست دسته بندی ها useQuery to render category list

• اضافه کردن دسته Add category

• نمایش نماد در فرم Show Icon on Form

• داده های دسته را باطل کنید Invalidate category data

• حذف دسته بندی مدال Delete category modal

• برای حذف یک دسته با useMutation با API تماس بگیرید Call API to Delete a category with useMutation

• به روز رسانی فرم و به اشتراک گذاری داده ها Update form & share data

• به روز رسانی را با API مدیریت کنید Handle Update with API

• جمع بندی دسته Category wrap up

ویژگی: مدیریت محصول Feature: Product Management

• راه اندازی صفحه محصول Setup product page

• راه اندازی شبکه داده و نحوه پیدا کردن مثال Setup data grid & How to find example

• فهرست محصولات را به شبکه داده ارائه دهید Render product list to data grid

• مودال محصول ایجاد کنید Create product modal

• کنترل تصویر پیش نمایش Handle preview image

• دسته را انتخاب کنید Select category

• اعتبار سنجی فرم محصول Product form validation

• نمایش تصویر در شبکه داده Show image on data grid

• شناسه دسته را به نام دسته تغییر دهید Change category id to category name

• عملکردها را رندر کنید Render actions

• حذف مؤلفه تأیید و استفاده مجدد Modal Delete Modal Confirm & Reuse Component

• به روز رسانی محصول - داده های الزام آور Update product - binding data

• به روز رسانی محصول - handle API Update product - handle API

• محصول - بسته بندی Product - wrap up

ویژگی: مدیریت گالری محصولات Feature: Product Galleries Management

• راه اندازی صفحه گالری محصولات Setup product galleries page

• کامپوننت UI را راه اندازی کنید Setup UI component

• رفع UI و تغییر ستون Fix UI & Change Column

• رندر گالری ها Render galleries

• بارگذاری چند تصویر Upload mutiple images

• حذف تصویر Delete image

• گالری پیچ و تاب Gallery warp up

ویژگی: محصول (کاربر) Feature: Product (User)

• راه اندازی صفحه محصول Setup product page

• جزء کارت محصول Product card component

• رندر محصول Render product

• راه اندازی صفحه بندی (سمت سرور) Setup pagination (server side)

• همگام سازی صفحه با آدرس اینترنتی Sync page to url

• پیش‌فرض لغزنده قیمت Price slider default

• قیمت فیلتر را با آدرس اینترنتی همگام کنید Sync filter price to url

• تنظیم صفحه جزئیات محصول Setup product detail page

• نمایش تصویر با چرخ فلک Show image with carousel

• اجزای جداگانه Separate components

• محصولات را جستجو کنید Search products

ویژگی: سبد خرید Feature: Cart

• افزودن محصول به سبد خرید - داده های ساخت Add product to cart - build data

• افزودن محصول به سبد خرید - handle API Add product to cart - handle API

• راه اندازی صفحه سبد خرید Setup cart page

• تنظیم جدول سبد خرید و قیمت کل Setup cart table & total price

• رندر اقلام سبد خرید Render cart items

• پاک کردن مورد سبد خرید Clear cart item

ویژگی: پروفایل Feature: Profile

• تنظیم صفحه نمایه Setup profile page

• برگه های نمایه Profile Tabs

• فیلدها را برای برگه های نمایه تنظیم کنید Setup fields for Profile Tabs

• اعتبارسنجی اطلاعات نمایه Profile info validation

• به روز رسانی اطلاعات پروفایل Update profile information

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

• افزودن آدرس Adding address

• آدرس را حذف کنید Delete address

ویژگی: سفارش Feature: Order

• کمیت جهانی در هدر Global quantity on header

• API سفارش اجمالی Overview order API

• پردازش پرداخت Checkout processing

• صفحه سفارشات من را راه اندازی کنید Setup my orders page

• سفارشات من را دریافت کنید Get my orders

• ستون را ثابت کنید Fix column

• رفع اشکال JSON Fix JSON bug

• تنظیم صفحه جزئیات سفارش Setup order detail page

• اقلام سفارش را دریافت کنید Get order items

ویژگی: بررسی Feature: Review

• تنظیم مؤلفه بررسی Setup review component

• بررسی محصول را دریافت کنید Get product review

• محصول را بررسی کنید Review product

ویژگی: مدیریت سفارش Feature: Order Management

• تنظیم صفحه مدیریت سفارش Setup order's admin page

• همه سفارشات را انجام دهید Render all orders

• به روز رسانی وضعیت سفارش Update order status

• رفع UI Fix UI

ویژگی: کوپن Feature: Coupon

• تنظیم صفحه کوپن Setup coupon page

• میز کوپن Coupon table

• ایجاد فرم و اعتبار کوپن Create coupon form & validation

• ایجاد کوپن - API دسته Create coupon - handle API

• حذف کوپن Delete coupon

• درخواست کوپن Apply coupon

بارگیری و خطای جهانی Global loading & error

• بارگیری نوار پیشرفت ProgressBar loading

• خطا و موفقیت جهانی Global error & success