آموزش تسلط بر React 19: ساخت راهکارهای تجارت الکترونیک و آمادگی برای مصاحبه با TypeScript، Next.js و Remix - آخرین آپدیت

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

مقدمه Introduction

• IQ: ساخت اولین پروژه: React 19 IQ: Creating first project: React 19

• ساخت اولین پروژه: React 19 Creating first project: React 19

• IQ: ساخت پروژه با TypeScript IQ: Creating project with TypeScript

• درک ساختار پروژه Understanding project structure

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

• IQ: پروژه با TypeScript و Remix IQ: Project with TypeScript and Remix

• React RC چیست و آخرین نسخه React What is React RC and latest React version

• ساخت پروژه در Remix Creating project in Remix

• IQ: React RC چیست و آخرین نسخه React IQ: What is React RC and latest React version

• ساخت پروژه در NextJS Creating project in NextJS

• IQ: درک ساختار پروژه IQ: Understanding project structure

• ساخت پروژه با TypeScript Creating project with TypeScript

• تاریخچه React: نقاط عطف React history: Milestone

1. مبانی React 1. React Fundamentals

• پویا کردن کامپوننت محصول با استفاده از props Making product component dynamic using props

• مدیریت رویدادهای پایه: کلیک Basic event handling: Click

• IQ: قوانین JSX IQ: The rules of JSX

• IQ: پاس دادن پارامترها IQ: Parameter passing

• تفاوت Default export و Named export Default vs named export

• پاس دادن پارامترها Parameter passing

• IQ: ساخت کارت محصول IQ: Creating product card

• IQ: تخصیص JSX به متغیر IQ: Assigning JSX to variable

• درک مفاهیم props Understanding props

• رندر کردن مقادیر پویا از یک شیء (Object) Render dynamic values from an object

• رندر کردن مقادیر پویا از یک آرایه Rendering dynamic values from an array

• مفهوم ویژگی key در متد map() Concept of key attribute in map()

• IQ: تفاوت Default export و Named export IQ: Default vs named export

• ساخت کامپوننت از ابتدا Creating component from scratch

• IQ: رندر مقادیر پویا از آرایه و ویژگی key IQ: Rendering dynamic values from array and key attribute

• IQ: ساخت کامپوننت از ابتدا IQ: Creating component from scratch

• تخصیص JSX به متغیر Assigning JSX to variable

• قوانین JSX The rules of JSX

• رندرینگ شرطی (Conditional Rendering) Conditional rendering

• IQ: مدیریت رویدادهای پایه IQ: Basic event handling

• تمرین: رندرینگ شرطی در کامپوننت کارمند (isActive) Task: Conditional rendering on employee component (isActive)

• IQ: رندر مقادیر پویا از یک شیء IQ: Render dynamic values from an object

• تمرین: محاسبه مقدار فاکتوریل با پاس دادن پارامتر Task: Calculate the factorial value by passing parameter

• IQ: رندرینگ شرطی IQ: Conditional rendering

• تمرین: ساخت یک کامپوننت پویا برای کارمند Task: Create a dynamic employee component

• ساخت کارت محصول Creating product card

• IQ: درک مفاهیم props IQ: Understanding props

• IQ: React fragment و fragment خالی IQ: React fragment & empty fragment

• React fragment و fragment خالی React fragment & empty fragment

2. مدیریت وضعیت (State Management) 2. State Management

• استفاده از آرایه به عنوان وضعیت (State) Array as state

• کار با چندین وضعیت Working with multiple states

• IQ: وضعیت چیست و چرا به آن نیاز داریم؟ IQ: What is the state and why needed?

• وضعیت به عنوان یک Snapshot State as a snapshot

• هوک useState(): درک نحوه ایجاد وضعیت useState() hook: Understanding state creation

• IQ: شیء (Object) به عنوان وضعیت IQ: Object as state

• IQ: هوک useState(): درک نحوه ایجاد وضعیت IQ: useState() hook: Understanding state creation

• IQ: تابع مقداردهی اولیه: جلوگیری از بازسازی وضعیت اولیه IQ: Initializer function: Avoiding recreation of initial state

• تمرین: به‌روزرسانی عناصر وضعیت با استفاده از تابع updater Task: Update the elements of the state using updater function

• شیء (Object) به عنوان وضعیت Object as state

• IQ: وضعیت به عنوان یک Snapshot IQ: State as a snapshot

• IQ: آرایه به عنوان وضعیت IQ: Array as state

• به‌روزرسانی وضعیت بر اساس وضعیت قبلی Updating state based on previous state

• تابع مقداردهی اولیه: جلوگیری از بازسازی وضعیت اولیه Initializer function: Avoiding recreation of initial state

• وضعیت چیست و چرا به آن نیاز داریم؟ What is the state and why needed?

• IQ: به‌روزرسانی وضعیت بر اساس وضعیت قبلی IQ: Updating state based on previous state

• تمرین: مقداردهی اولیه وضعیت با یک آرایه بزرگ Task: Initialize the state with the large array

3. بررسی عمیق مدیریت رویدادها 3. Event Handling: Deep Dive

• IQ: شیء رویداد در React: Synthetic event IQ: React event object: Synthetic event

• IQ: متوقف کردن انتشار رویداد (Stopping propagation) IQ: Stopping propagation

• IQ: مدیریت رویدادها و Event IQ: Event handling and event

• متد preventDefault(): جلوگیری از رفتار پیش‌فرض preventDefault(): Preventing default behavior

• فیلدهای ورودی: چک‌باکس (Checkbox) Input fields: Checkbox

• مدیریت رویدادها: Event Event handling: Event

• مرور کلی مدیریت رویدادها Event handling recap

• IQ: تک مدیریت‌کننده رویداد با استفاده از کلید پویا IQ: Single event handler using dynamic key

• تمرین: مدیریت رویدادها و Event Task: Event handling and event

• فیلدهای ورودی: رادیو باتن (Radio button) Input fields: Radio button

• فرم با چندین وضعیت form with multiple states

• IQ: رویداد ورودی: تکست‌باکس (Textbox) IQ: Input event: Textbox

• تمرین: مدیریت فرم با تکست‌باکس، چک‌باکس و رادیو باتن Task: Form handling using textbox, checkbox, and radio buttons

• تمرین: استفاده از وضعیت شیء (Object State) در فرم Task: Using object state with form

• مدیریت رویدادها و Event Event handling and event

• تمرین: رویداد ورودی: تکست‌باکس Task: Input event: Textbox

• به‌روزرسانی تابعی: روش صحیح Functional update: The correct way

• تمرین: تک مدیریت‌کننده رویداد با کلید پویا Task: Single event handler using dynamic key

• مدیریت رویدادها: Event Event handling: Event

• IQ: و Event IQ: & event

• IQ: انتشار رویداد: Bubbling IQ: Event propagation: Bubbling

• انتشار رویداد: Bubbling Event propagation: Bubbling

• تمرین: فرم با چندین وضعیت Task: form with multiple states

• تمرین: مدیریت رویدادها و Event Task: Event handling and event

• شیء رویداد در React: Synthetic event React event object: Synthetic event

• IQ: متد preventDefault(): جلوگیری از رفتار پیش‌فرض IQ: preventDefault(): Preventing default behavior

• مدیریت رویدادها و Event Event handling and event

• رویداد ورودی: تکست‌باکس Input event: Textbox

• وضعیت‌های فرم به صورت شیء form states as object

• IQ: فیلدهای ورودی IQ: Input fields

• تمرین: فیلدهای ورودی: رادیو باتن Task: Input fields: Radio button

• تک مدیریت‌کننده رویداد با کلید پویا Single event handler using dynamic key

• متوقف کردن انتشار رویداد Stopping propagation

4. مدیریت عملی وضعیت‌ها 4. Managing State Practically

• رندر کردن محصولات فعال/غیرفعال Rendering active/inactive products

• پیاده‌سازی قابلیت حذف Implementing delete functionality

• مقدمه Introduction

• ساخت کامپوننت کارت محصول Creating product card component

• پیاده‌سازی قابلیت ویرایش محصول Implementing edit product functionality

• پیاده‌سازی قابلیت افزودن محصول Implementing add product functionality

• ساخت فرم برای افزودن محصول Creating form for add product

• ذخیره مقادیر فرم افزودن محصول Storing the values of the add product form

• راه‌اندازی پروژه با Tailwind CSS و ساخت هدر Project setup with Tailwind CSS and header creation

• رندر کردن لیست محصولات با داده‌های استاتیک Rendering product list with static data

• ساخت پروژه Project creation

• ساخت مودال افزودن محصول Creating add product modal

• تنظیم فرم ویرایش محصول Setting up edit product form

• پیاده‌سازی قابلیت فعال/غیرفعال کردن محصول Implementing active/inactive product functionality

5. هوک useEffect(): کار با چرخه حیات کامپوننت 5. useEffect(): Working with Component Life Cycles

• useEffect(): اهمیت آرایه وابستگی‌ها (Dependency Array) useEffect(): Importance of the dependency array

• تفاوت useEffect() و به‌روزرسانی‌های DOM: نیاز به useLayoutEffect() useEffect() vs DOM updates: Need of useLayoutEffect()

• چه زمانی از هوک useEffect در React اجتناب کنیم When to avoid using the useEffect hook in React

• IQ: useEffect(): اهمیت آرایه وابستگی‌ها IQ: useEffect(): Importance of the dependency array

• معرفی هوک useEffect Introduction to useEffect hook

• IQ: useEffect(): تابع پاک‌سازی (Cleanup function) IQ: useEffect(): Cleanup function

• IQ: استفاده از هوک ساده useEffect() IQ: Using simple useEffect() hook

• useEffect(): تابع پاک‌سازی useEffect(): Cleanup function

• به تاخیر انداختن افکت‌های تحریک شده توسط تعاملات در React Deferring effects triggered by interactions in React

• درک چرخه اضافی Setup و Cleanup در React Strict Mode Understanding React Strict Mode's extra setup and cleanup cycle

• درک چرخه حیات کامپوننت Understanding component life cycle

• مکان درست برای فراخوانی هوک useEffect() The right place to call the useEffect() hook

• استفاده از هوک ساده useEffect() Using simple useEffect() hook

• IQ: درک چرخه حیات کامپوننت IQ: Understanding component life cycle

• درک اینکه useEffect فقط در سمت کلاینت اجرا می‌شود Understanding useEffect only runs on client side

• هوک useEffect(): مدیریت وابستگی‌ها useEffect() hook: Managing dependencies

6. مسیریابی با React Router 6. React Router

• IQ: لایوت‌ها: Outlet / component IQ: Layouts: Outlet / component

• IQ: پیکربندی مسیرها با استفاده از React Router IQ: Configure routes using React Router

• ساخت کارت جزئیات محصول Creating product details card

• IQ: صفحه یافت نشد (404) IQ: Not found page (404)

• معرفی مسیریابی (Routing) Introduction to routing

• IQ: context، هوک useOutletContext()، "state" و useLocation() IQ: context, useOutletContext(), "state" and useLocation() hook

• پیکربندی مسیرها با استفاده از React Router Configure routes using React Router

• IQ: مسیرهای تودرتو: پارامتر مسیر IQ: Nested routes: Route parameter

• IQ: درک کامپوننت NavLink IQ: Understanding NavLink component

• ساخت نوار ناوبری (Navbar) در مسیر ریشه Navbar creation on root route

• IQ: ویژگی "index": ارجاع به مسیر والد IQ: "index" attribute: Referring the parent route

• کامپوننت Navigate برای تغییر مسیر (Redirection) Navigate component for redirection

• بازسازی ساختار پروژه Project restructuring

• استفاده از Navbar به عنوان یک لایوت Use navbar as a layout

• مدیریت پویای مسیرهای تودرتو: پارامتر مسیر Dynamically handling nested routes: Route parameter

• useNavigate(): روش صحیح تغییر مسیر useNavigate(): Correct way to redirect

• صفحه یافت نشد (404) Not found page (404)

• ویژگی index: ارجاع به مسیر والد index attribute: Referring the parent route

• درک کامپوننت NavLink Understanding NavLink component

• پاس دادن داده‌ها به کامپوننت فرزند: context و هوک useOutletContext() Passing data to child component: context & useOutletContext() hook

• بهبود رابط کاربری Interface improvement

• IQ: درک هوک useRoutes() IQ: Understanding the useRoutes() hook

• IQ: Navigate و useNavigate() IQ: Navigate and useNavigate()

• درک مسیریابی در React Understanding routing in React

• درک مسیرهای تودرتو (Nested Routes) Understanding nested routes

• درک هوک useRoutes() Understanding the useRoutes() hook

• IQ: تفاوت SPA و MPA IQ: SPA vs MPA

• لایوت‌ها: Outlet / component Layouts: Outlet / component

• ساخت صفحه محصولات Creating products page

• پاس دادن داده‌ها به کامپوننت فرزند: "state" و هوک useLocation() Passing data to child component: "state" and useLocation() hook

• درک اپلیکیشن تک صفحه‌ای (SPA) و اپلیکیشن چند صفحه‌ای (MPA) Understanding single-page application and multi-page application

7. هوک useContext(): مدیریت وضعیت سراسری 7. The useContext() Hook: Global State Management

• تامین‌کنندگان Context تودرتو Nested context providers

• IQ: مشکل Prop drilling IQ: Prop drilling

• راه‌اندازی Context API در اپلیکیشن ماشین حساب Setup Context API into calculator app

• Prop drilling Prop drilling

• IQ: دستکاری وضعیت سراسری IQ: Global state manipulation

• درک مفاهیم Context API Understanding of Context API

• IQ: هوک useContext() IQ: useContext() hook

• دستکاری وضعیت سراسری Global state manipulation

• ساخت رابط کاربری برای اپلیکیشن ماشین حساب Creating interface for calculator app

• هوک useContext() useContext() hook

• IQ: درک مفاهیم Context API IQ: Understanding of Context API

• مدیریت داده‌های ورودی در وضعیت سراسری Handling input data in the global state

8. ابزار Redux Tool Kit (RTK): مدیریت پیشرفته وضعیت سراسری 8. Redux Tool Kit (RTK): Advanced Global State Handling

• نحوه عملکرد تغییرناپذیری (Immutability) در اکشن‌ها در پشت صحنه How immutability in actions works behind the scenes

• پیکربندی Store Configuring store

• ساخت اکشن‌ها در Slice Creating actions in slice

• IQ: نحوه عملکرد تغییرناپذیری در اکشن‌ها در پشت صحنه IQ: How immutability in actions works behind the scenes

• دریافت داده‌های Store: هوک useSelector() Fetching the store data: useSelector()

• محاسبات عملیاتی ریاضی در Redux Calculating arithmetic operations in Redux

• ساخت Slice Creating slice

• مدیریت مقادیر ورودی در Redux Handling input values in Redux

• IQ: دریافت داده‌های Store: هوک useSelector() IQ: Fetching the store data: useSelector()

• IQ: معرفی Redux و RTK IQ: Introduction to Redux and RTK

• معرفی Redux و RTK Introduction to Redux and RTK

• IQ: ساخت Slice IQ: Creating slice

• IQ: پیکربندی Store IQ: Configuring store

• پیاده‌سازی Redux در اپلیکیشن React Router Implementing Redux in React Router app

• IQ: ساخت اکشن‌ها در Slice IQ: Creating actions in slice

9. مدیریت درخواست‌های HTTP 9. Handling HTTP Requests

• API fetch() fetch() API

• IQ: API fetch() IQ: fetch() API

• رندر کردن داده‌های کاربران Rendering users data

• متدهای PUT و PATCH در API fetch() PUT and PATCH method in fetch() API

• مدیریت خطا با بلوک try catch() Error handling with try-catch() block

• متد POST در API fetch() POST method in fetch() API

• متد DELETE در API fetch() DELETE method in fetch() API

• مدیریت خطا در API fetch() Error handling in fetch() API

• مقدمه: درخواست‌های HTTP Introduction: HTTP requests

• IQ: مقدمه: درخواست‌های HTTP IQ: Introduction: HTTP requests

10. سمت سرور: مبانی NodeJS و ساخت API با ExpressJS 10. Server Side: NodeJS Basics + API Creation with ExpressJS

• ساخت پروژه Project creation

• IQ: ساخت API پایه IQ: Creating basic API

• ارسال درخواست GET از Postman Making a GET request from Postman

• ساخت API پایه Creating basic API

• IQ: پیکربندی nodemon IQ: Configuring nodemon

• IQ: ساخت سرور با Express.js IQ: Creating server using Express.js

• ساخت سرور با Express.js Creating server using Express.js

• مقدمه Introduction

• نصب Postman Postman installation

• IQ: مقدمه IQ: Introduction

• پیکربندی nodemon Configuring nodemon

11. مبانی MySQL 11. MySQL Basics

• مرتب‌سازی داده‌ها با 'LIMIT' و 'ORDER BY' Sorting data with 'LIMIT' & 'ORDER BY'

• IQ: ساخت جدول IQ: Creating table

• نصب MySQL MySQL installation

• انواع داده‌ها Data types

• فیلتر کردن پایه با عبارت WHERE Basic filtering with WHERE clause

• IQ: مقدمه IQ: Introduction

• فیلتر کردن پیشرفته با عبارت WHERE Advanced filtering with WHERE clause

• مقدمه Introduction

• ساخت جدول Creating table

• پرس‌وجوی INSERT INSERT query

• ساخت دیتابیس Database creation

• حذف جدول (Drop table) Drop table

• حذف دیتابیس (Drop database) Drop database

• حذف رکوردها با عبارت DELETE Delete records using DELETE clause

• به‌روزرسانی داده‌ها Updating the data

12. ادغام دیتابیس در اپلیکیشن Node 12. Database Integration in Node App

• ساخت API برای حذف محصول Creating API to delete a product

• IQ: اتصال دیتابیس MySQL در اپلیکیشن Node IQ: Connect MySQL database in Node app

• پیکربندی مسیرهای سازمان‌یافته با express.Router() Configuring organized routes with express.Router()

• ساخت API برای دریافت یک محصول خاص Creating API to fetch a unique product

• دریافت محصولات از دیتابیس Fetching products from database

• ساخت API برای به‌روزرسانی داده‌های محصول Creating API to update product's data

• بازسازی اتصال دیتابیس و پیام‌های موفقیت Restructuring database connection and success messages

• IQ: ساخت API برای به‌روزرسانی داده‌های محصول IQ: Creating API to update product's data

• ساخت API برای افزودن محصولات Creating API for adding products

• اتصال دیتابیس MySQL در اپلیکیشن Node Connect MySQL database in Node app

• IQ: دریافت محصولات از دیتابیس IQ: Fetching products from database

13. تکمیل اپلیکیشن Fullstack (ادغام API) 13. Completing the Fullstack Application (API Integration)

• ادغام API حذف محصول Integrating delete product API

• ادغام API "افزودن محصول" Integrating 'Add Product' API

• مقدمه Introduction

• رندر کردن محصولات به صورت پویا Rendering products dynamically

• پیاده‌سازی فرم افزودن محصولات Implementing add products form

• دریافت پویای محصولات Fetching products dynamically

• ساخت پاپ‌آپ تایید حذف Creating delete confirmation popup

• ادغام API در صفحه جزئیات محصول Integrating API in product details page

• ساخت رابط کاربری برای افزودن محصولات Creating interface for adding products

• پیاده‌سازی قابلیت ویرایش محصولات Implementing edit products functionality

14. کار با هوک‌های سفارشی (Custom Hooks) 14. Working with Custom Hooks

• ساخت و استفاده از هوک سفارشی Create and use custom hook

• دریافت جزئیات محصول با استفاده از هوک سفارشی Fetching product details using custom hook

• تمرین ۱: ساخت هوک سفارشی برای تایمر Task 1: Create a custom hook for timer

• معرفی هوک‌های سفارشی Introduction to custom hooks

• IQ: معرفی هوک‌های سفارشی IQ: Introduction to custom hooks

15. اپلیکیشن لیست کارهای (To Do List) با Vite: تمرین عملی 15. To-Do List App with Vite: Hands-on Practice App

• ساخت کامپوننت فرم To do #2 To-do form component creation #2

• جمع‌بندی و تکالیف Conclusion and assignments

• کامپوننت TodoList: نمایش تسک‌ها TodoList component: Displaying tasks

• مقدمه و تعریف Introduction and definition

• ساخت کامپوننت فرم TO DO #1 TO-DO form component creation #1

• ساخت کامپوننت خلاصه تسک‌ها Creating a task summary component

• استایل‌دهی به اپلیکیشن Styling the application

• راه‌اندازی محیط Setting-up the environment

• مدیریت وضعیت تسک‌ها: کامپوننت آیتم Todo Managing tasks status: Todo-item component

• ماندگاری داده‌ها با localStorage Data persistence with localStorage

• نصب و پیکربندی Tailwind CSS Tailwind CSS installation and configuration

• پیاده‌سازی قابلیت حذف تسک Implementing task deletion functionality

16. معرفی NextJS 16. NextJS Introduction

• IQ: مقایسه Pages router و App router IQ: Pages router vs app router

• ساخت اولین پروژه Creating first project

• IQ: Next JS در مقابل ReactJS IQ: Next JS in spite of ReactJS

• Next JS در مقابل ReactJS Next JS in spite of ReactJS

• ساختار پروژه Project structure

• IQ: ساختار پروژه IQ: Project structure

• مقایسه Pages router و App router Pages router vs app router

• IQ: ساخت اولین پروژه IQ: Creating first project

17. مبانی NextJS با App Router 17. NextJS Basics with App Router

• لینک کردن صفحات با Link Linking pages with Link

• تعریف مسیرها Defining routes

• IQ: کامپوننت‌های سرور ناهمگام (Asynchronous) IQ: Asynchronous server components

• صفحه خطا Error page

• کامپوننت‌های سرور ناهمگام Asynchronous server components

• IQ: کامپوننت سرور در مقابل کامپوننت کلاینت IQ: React server component vs client component

• مسیرهای تودرتو Nested routes

• کامپوننت سرور در مقابل کامپوننت کلاینت React server component vs client component

• مسیرهای پویا و پارامترهای مسیر Dynamic routes and route params

18. کشینگ (Caching) در NextJS 18. Caching in NextJS

• IQ: درک کشینگ در Next IQ: Understanding caching in Next

• رفتارهای غیرمنتظره در بیلد پروژه Unexpected behaviour in project build

• تبدیل استاتیک به پویا: کنترل کش Static to dynamic: Cache control

• درک کشینگ در Next Understanding caching in Next

• IQ: تبدیل استاتیک به پویا: کنترل کش IQ: Static to dynamic: Cache control

• IQ: رفتارهای غیرمنتظره در بیلد پروژه IQ: Unexpected behaviour in project build

19. هوک‌های متفرقه 19. Miscellaneous Hooks

• IQ: هوک useActionState() IQ: useActionState() hook

• هوک useOptimistic() The useOptimistic() hook

• IQ: هوک‌های useCallback() و useMemo() IQ: useCallback() and useMemo() hook

• جادوی Memoization The magic of memoization

• هوک useActionState() useActionState() hook

• IQ: هوک useFormStatus() IQ: useFormStatus() hook

• IQ: Memoization IQ: Memoization

• هوک useFormStatus() The useFormStatus() hook

• هوک useDebugValue() The useDebugValue() hook

• هوک‌های useCallback() و useMemo() useCallback() and useMemo() hook

• IQ: هوک useDebugValue() IQ: useDebugValue() hook

• IQ: هوک useOptimistic() IQ: useOptimistic() hook

20. پروژه MyStore: بخش مدیریت 20. MyStore: Admin Section

• افزودن آیکون‌ها به سایدبار Adding icons to the sidebar

• بازسازی ساختار کد Refactoring code structure

• ساخت Server Action برای افزودن محصولات Creating server action for adding products

• ساخت صفحه "کاربران" Creating 'Users' page

• فعال‌سازی پاپ‌آپ تایید Enabling confirmation popup

• مقادیر پیش‌فرض پویا برای ویرایش Dynamic default values for edit

• رندر کردن کاربران در جدول Rendering users in the table

• پیاده‌سازی هشینگ (Hashing) Implementing hashing

• رندر داده‌های پویا در جدول محصولات Rendering dynamic data in products table

• ساخت صفحه ویرایش محصول Creating edit product page

• مقادیر پیش‌فرض پویا برای نوع محصول Dynamic default values for product type

• ساخت کامپوننت‌های Button و Input Creating button & input components

• IQ: افزودن مدل‌ها در اسکیما: نوع محصول و محصول IQ: Adding models in the schema: Product type & product

• مقدمه Introduction

• به‌روزرسانی نوع محصول با Server Action Updating product type with server action

• ساخت صفحه افزودن محصول Creating add product page

• IQ: @layer و @apply: ترکیب کلاس‌های Utility IQ: @layer and @apply: Combining utility classes

• پیاده‌سازی قابلیت ذخیره‌سازی تصویر Implementing image storage functionality

• ساخت رابط محصولات برای لیست کردن Creating products interface for listing

• مقادیر پیش‌فرض پویا برای محصول Dynamic default values for product

• IQ: پیاده‌سازی هشینگ IQ: Implementing hashing

• ساخت صفحه ویرایش نوع محصول Creating edit product type page

• تکمیل فرم افزودن محصول Completing add product form

• افزودن نوع محصول با استفاده از Server Action Adding product type using server action

• IQ: به‌روزرسانی محصول با Server Action IQ: Updating product with server action

• استایل‌دهی به سایدبار Styling the sidebar

• ساخت صفحه افزودن نوع محصول Creating add product type page

• پیاده‌سازی معماری مبتنی بر کامپوننت Implementing component-based architecture

• ساخت صفحه نوع محصول Creating product type page

• کار بر روی سایدبار Working on sidebar

• رندر انواع محصولات در جدول Rendering product types into the table

• افزودن کاربران با Server Action Adding users with server action

• حذف محصول با Server Action Deleting product with server action

• ساخت دیتابیس Database creation

• اعتبارسنجی ایجاد کاربر Validating user creation

• ساخت فرم "افزودن کاربران" Creating 'Add Users' form

• رندر داده‌های پویای انواع محصول در صفحه افزودن محصول Rendering dynamic product types data in add product page

• حذف کاربر Deleting user

• حذف نوع محصول با Server Action Deleting product type with server action

• رندر مقادیر پیش‌فرض در Switch و ورودی فایل Render default values in switch and file input

• افزودن مدل‌های نوع محصول و محصول به اسکیما Adding product types and product models into the schema

• ترکیب کلاس‌های Utility با @apply Combining utility classes with @apply

• ساخت کامپوننت سایدبار Creating sidebar component

• حذف کاربر از طریق پاپ‌آپ تایید Deleting user by confirmation popup

• ساخت پاپ‌آپ تایید حذف Creating delete confirmation popup

• ساخت پروژه Project creation

• ساخت کامپوننت Switch Creating switch component

• ساخت صفحه ویرایش کاربر Creating edit user page

• ساخت کامپوننت ورودی فایل Creating file input component

• تکمیل قابلیت افزودن محصول Completing add product functionality

• به‌روزرسانی داده‌های کاربر Updating user data

• ساخت صفحه محصولات Creating products page

• به‌روزرسانی محصول با Server Action Updating product with server action

21. پروژه MyStore: بخش کاربر 21. MyStore: Client Section

• رندر پویای نوع محصول با استفاده از API Dynamic product type rendering using API

• ساخت API برای دریافت محصول بر اساس ID API creation for fetching a product by its ID

• IQ: بستن منوی کشویی پروفایل با کلیک در بیرون IQ: Close profile dropdown menu on outside click

• ساخت کامپوننت Button Creating button component

• ساخت کامپوننت Input Creating input component

• ساخت صفحه سبد خرید Creating cart page

• تکمیل کامپوننت کارت محصول Completing product card component

• شروع بخش کلاینت Initiating client section

• تنظیم مقادیر فیلتر در Search Params Set filter values into the search params

• ساخت API برای لیست محصولات API creation for product listing

• ساخت صفحه اصلی Creating home page

• قابلیت فیلتر در سمت کلاینت Filter functionality on client side

• ساخت کامپوننت سفارشی Accordion Creating custom accordion component

• پویا کردن صفحه سبد خرید Making cart page dynamic

• رندر محصولات بر اساس وضعیت Rendering products based on status

• ساخت کامپوننت اسلایدر محدوده قیمت Creating price range slider component

• ساخت صفحه محصول Creating the product page

• تکمیل صفحه محصول Completing product page

• هوک useRef() useRef() hook

• افزودن منوی کشویی پروفایل Adding profile dropdown

• ساخت API برای دریافت انواع محصولات API creation for fetching product types

• پایان دادن به صفحه پویای سبد خرید Finishing dynamic cart page

• ساخت بخش فیلترها Creating filters section

• IQ: ساخت Context برای مدیریت محصولات IQ: Creating context for handling products

• ادامه کار روی بخش فیلتر Continue on filter section

• فعال‌سازی انتخاب تعداد Enabling quantity selection

• رندر پویای جزئیات محصول با استفاده از API Dynamic product details rendering using API

• تکمیل رابط کاربری سبد خرید Completing the cart UI

• ساخت کامپوننت کارت محصول Creating product card component

• IQ: ساخت کامپوننت سفارشی Accordion IQ: Creating custom accordion component

• رندر کارت آیتم‌های سبد خرید Rendering cart item card

• بستن منوی کشویی پروفایل با کلیک در بیرون Close profile dropdown menu on outside click

• قابلیت فیلتر جستجو Search filter functionality

• اصلاح API محصولات برای اعمال فیلترها Modifying products API to apply filters

• IQ: ترکیب کلاس‌های Tailwind با روش بهینه IQ: Joining Tailwind classes with ideal approach

• ساخت کامپوننت هدر Creating header component

• رندر پویای محصولات با استفاده از Server Action Dynamic product rendering using server action

• ساخت Context برای مدیریت محصولات Creating context for handling products

• پیاده‌سازی قابلیت‌های سبد خرید Implement cart functionalities

• پیاده‌سازی نوار جستجو Implementing search bar

• ترکیب کلاس‌های Tailwind با روش بهینه Joining Tailwind classes with ideal approach

• تکمیل کامپوننت سفارشی Accordion Completing custom accordion component

22. پروژه MyStore: احراز هویت 22. MyStore: Authentication

• تست API ثبت‌نام با Postman Testing signup API using Postman

• معرفی JOSE و JWT Introduction of JOSE + JWT

• راه‌اندازی جریان احراز هویت با JOSE و JWT Setup authentication flow using JOSE + JWT

• پیاده‌سازی قابلیت ورود مشتری Implementing customer login functionality

• دریافت داده‌های مشتری با API در بخش کلاینت Fetching customer's data using API in the client section

• ساخت API ثبت‌نام Creating sign-up API

• مدیریت مسیرهای خصوصی و عمومی با Middleware Handling private and public routes using middleware

• ساخت رابط کاربری برای مسیرهای احراز هویت Creating interface for authentication routes

• ساخت مسیرهای احراز هویت در بخش کلاینت Creating authentication routes in client section

• IQ: احراز هویت مبتنی بر کوکی (Cookie-based) IQ: Cookie-based authentication

• تست API ورود با Postman Testing the login API using Postman

• احراز هویت تمام Server Actionهای بخش مدیریت Authenticate all server actions of admin section

• قابلیت خروج در بخش کلاینت Logout functionality in the client section

• ساخت API ورود Creating login API

• دریافت داده‌های کاربر احراز هویت شده Fetching authenticated user data

• API برای دریافت داده‌های یک مشتری خاص API to fetch unique customer's data

• پیاده‌سازی قابلیت ثبت‌نام در بخش کلاینت Implementing signup functionality in the client section

• ساخت صفحه ورود Creating login page

• پیاده‌سازی خروج با Server Action Implementing logout with server action

• ساخت جدول خریداران در دیتابیس Creating buyer table in the database

• ساخت Server Action برای ورود Create server action for login

• احراز هویت مبتنی بر کوکی Cookie-based authentication

23. پروژه MyStore: درگاه پرداخت و فروش 23. MyStore: Payment Gateway & Sales

• ادغام API پرداخت (Checkout) در بخش کلاینت Integrating checkout API in the client section

• ساخت پویای نشست پرداخت (Checkout session) Creating checkout session dynamically

• API برای به‌روزرسانی دیتابیس پس از پرداخت موفق API to update database after the successful checkout

• رندر داده‌های پویا در جدول خریداران Rendering dynamic data in buyers table

• ساخت بخش مدیریت خریداران Creating buyer master section

• رندر فرم پرداخت جاسازی شده Stripe Rendering Stripe's embedded checkout form

• پیکربندی‌های پایه Stripe Basic configurations of Stripe

• ساخت صفحه وضعیت پرداخت Creating payment status page

• ساخت جدول فروش و تراکنش‌ها در دیتابیس Creating sales and transaction table in database

• مقدمه Introduction

• تست API پرداخت با Postman Testing the checkout API using Postman

• IQ: مقدمه IQ: Introduction

24. پروژه MyStore: گزارشات و تحلیل‌ها (نمودارها) 24. MyStore: Reports and Analysis (Charts)

• مقدمه Introduction

• رندر محصولات در جدول محصولات خریداری شده Render products in the purchased products table

• ساخت کامپوننت بخش نمودار Creating chart section component

• تهیه گزارش فروش با استفاده از نمودار Preparing sales report using chart

• ساخت مودال محصولات خریداری شده Creating purchased products modal

• تهیه گزارش مشتریان با استفاده از نمودار Preparing customers report using chart

• تهیه گزارش مشتریان و خریداران Preparing customers and buyers report

• پیاده‌سازی نمودار با Recharts Implementing chart using Recharts

• رندر گزارش مشتریان و خریداران Rendering customers & buyers report

• رندر نمودار فروش با مقادیر پویا Rendering sales chart with dynamic values

• دریافت محصولات خریداری شده در مودال Fetching purchased products in modal

• تهیه گزارش سفارشات اخیر Preparing recent order report

• تهیه گزارش کل درآمد Preparing total revenue report

25. پروژه MyStore: استقرار (Deployment) 25. MyStore: Deployment

• مقدمه CI/CD Introduction to CI/CD

• استقرار اپلیکیشن مدیریت روی Vercel Deploying admin app on Vercel

• مقدمه Introduction

• مهاجرت دیتابیس از SQLite به MySQL Database migration from SQLite to MySQL

• اتصال دیتابیس MySQL به اپلیکیشن مدیریت Link the MySQL database to admin application

• IQ: مقدمه IQ: Introduction

• IQ: ادغام با GitHub IQ: GitHub integration

• IQ: مقدمه CI/CD IQ: Introduction to CI/CD

• ادغام با GitHub GitHub integration

• استقرار اپلیکیشن کلاینت روی Vercel Deploying client app on Vercel

26. پروژه کوچک: تایید ایمیل با کد OTP 26. Bit-Sized Project: Email OTP Verification

• ارسال ایمیل با SendGrid Sending email using SendGrid

• ساخت مسیرها Creating routes

• راه‌اندازی محیط Setting up the environment

• مقدمه و تعریف پروژه Introduction & project definition

• نصب Postman Postman installation

• چرا Vite را به CRA ترجیح دهیم؟ Why choose Vite over CRA?

• ساخت API برای تایید OTP Creating API to verify OTP

• راه‌اندازی سرور Express با Node.js Setting up Express server using Node.js

• تنظیم زمان انقضای OTP Set OTP expiration time

• ساخت کارت تایید OTP Creating OTP verification card

• مدیریت مقادیر فرم Handling form values

• ساخت API ساده GET Creating basic GET API

• ساخت کارت تایید ایمیل Creating card for email verification

• ادغام API برای تایید OTP Integrating API to verify the OTP

• سازمان‌دهی مسیرها با "express.Router()" Organizing routes with "express.Router()"

• نصب و پیکربندی Tailwind CSS Install and configure Tailwind CSS

• ادغام API برای ارسال OTP API integration for sending OTP

• ارسال درخواست POST از Postman Making a POST request from Postman

• ساخت یک API ساده POST Creating a simple POST API