آموزش دوره جامع React 19 و بوت‌کمپ تجارت الکترونیک (E-Commerce) + آمادگی مصاحبه - آخرین آپدیت

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

مقدمه Introduction

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

• تاریخچه React - نقطه عطف React History - Milestone

• React RC چیست و آخرین نسخه React کدام است؟ What is React RC & Latest React version

• سوال هوش - React RC چیست و آخرین نسخه React کدام است؟ IQ - What is React RC & Latest React version

• ایجاد اولین پروژه - React 19 Creating first project - React 19

• سوال هوش - ایجاد اولین پروژه - React 19 IQ - Creating first project - React 19

• درک ساختار پروژه Understanding Project Structure

• سوال هوش - درک ساختار پروژه IQ - Understanding Project Structure

• ایجاد پروژه با TypeScript Creating Project with TypeScript

• سوال هوش - ایجاد پروژه با TypeScript IQ - Creating Project with TypeScript

• ایجاد پروژه در NextJS Creating project in NextJS

• ایجاد پروژه در Remix Creating project in Remix

• سوال هوش - پروژه با TypeScript و Remix IQ - Project with TypeScript and Remix

مبانی React React Fundamentals

• ایجاد کامپوننت از ابتدا Creating component from scratch

• سوال هوش - ایجاد کامپوننت از ابتدا IQ - Creating component from scratch

• ایجاد کارت محصول Creating Product Card

• سوال هوش - ایجاد کارت محصول IQ - Creating Product Card

• رندر مقادیر پویا از یک Object Render Dynamic values from an Object

• سوال هوش - رندر مقادیر پویا از یک Object IQ - Render Dynamic values from an Object

• رندر مقادیر پویا از یک Array Rendering Dynamic values from an Array

• مفهوم ویژگی Key در Map() Concept of Key attribute in Map()

• سوال هوش - رندر مقادیر پویا از Array و ویژگی Key IQ - Rendering Dynamics Values from Array and Key attribute

• React Fragment و Empty Fragment React Fragment & Empty Fragment

• سوال هوش - React Fragment و Empty Fragment IQ - React Fragment & Empty Fragment

• Default vs Named Export Default vs Named Export

• سوال هوش - Default vs Named Export IQ - Default vs Named Export

• قواعد JSX The Rules of JSX

• سوال هوش - قواعد JSX IQ - The Rules of JSX

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

• سوال هوش - اختصاص JSX به متغیر IQ - Assigning JSX to variable

• درک Props Understanding Props

• سوال هوش - درک Props IQ - Understanding Props

• پویاسازی کامپوننت محصول با استفاده از Props Making Product Component Dynamic using Props

• رندر شرطی Conditional rendering

• سوال هوش - رندر شرطی IQ - Conditional rendering

• مدیریت رویداد پایه - click Basic Event Handling - click

• سوال هوش - مدیریت رویداد پایه IQ - Basic Event Handling

• ارسال پارامتر Parameter Passing

• سوال هوش - ارسال پارامتر IQ - Parameter Passing

• تکلیف - ایجاد یک کامپوننت پویای کارمند Task - Create a Dynamic Employee Component

• تکلیف - رندر شرطی در کامپوننت کارمند (isActive) Task - Conditional Rendering on Employee component (isActive)

• تکلیف - محاسبه مقدار فاکتوریل با ارسال پارامتر Task - Calculate the Factorial value by Passing Parameter

مدیریت State State Management

• State چیست و چرا مورد نیاز است؟ What is the state and why needed?

• سوال هوش - State چیست و چرا مورد نیاز است؟ IQ - What is the state and why needed

• هوک useState() - درک ایجاد State useState() hook - Understanding state creation

• سوال هوش - هوک useState() - درک ایجاد State IQ - useState() hook - Understanding state creation

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

• سوال هوش - State به عنوان یک Snapshot IQ - State as a Snapshot

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

• سوال هوش - به‌روزرسانی State بر اساس State قبلی IQ - Updating state based on previous state

• کار با چندین State Working with multiple states

• تابع Initializer - اجتناب از ایجاد مجدد State اولیه Initializer function - Avoiding recreation of initial state

• سوال هوش - تابع Initializer - اجتناب از ایجاد مجدد State اولیه IQ - Initializer function - Avoiding recreation of initial state

• Array به عنوان State Array as state

• سوال هوش - Array به عنوان State IQ - Array as state

• Object به عنوان State Object as state

• سوال هوش - Object به عنوان State IQ - Object as state

• تکلیف - مقداردهی اولیه State با Array بزرگ Task - Initialise the State with the large Array

• تکلیف - به‌روزرسانی عناصر State با استفاده از تابع Updater Task - Update the Elements of the state using Updater Function

مدیریت رویداد - بررسی عمیق Event Handling - Deep Dive

• مرور مدیریت رویداد Event handling recap

• React Event Object - Synthetic Event React Event Object - Synthetic Event

• سوال هوش - React Event Object - Synthetic Event IQ - React Event Object - Synthetic Event

• Input Event - Textbox Input Event - Textbox

• تکلیف - Input Event - Textbox Task - Input Event - Textbox

• سوال هوش - Input Event - Textbox IQ - Input Event - Textbox

• Event Propogation - Bubbling Event Propogation - Bubbling

• سوال هوش - Event Propogation - Bubbling IQ - Event Propogation - Bubbling

• توقف Propogation Stopping Propogation

• سوال هوش - توقف Propogation IQ - Stopping Propogation

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

• سوال هوش - preventDefault() - جلوگیری از رفتار پیش‌فرض IQ - preventDefault() - Preventing default behavior

• <form> با چندین State <form> with Multiple States

• تکلیف - <form> با چندین State Task - <form> with Multiple States

• <from> States به عنوان Object <from> States as Object

• تکلیف - استفاده از Object State با <form> Task - Using Object State with <form>

• Single Event Handler با استفاده از Dynamic Key Single Event Handler Using Dynamic Key

• سوال هوش - Single Event Handler با استفاده از Dynamic Key IQ - Single Event Handler Using Dynamic Key

• تکلیف - Single Event Handler با استفاده از Dynamic Key Task - Single Event Handler Using Dynamic Key

• Functional Update - روش صحیح Functional Update - The correct way

• Input Fields - Checkbox Input Fields - Checkbox

• Input Fields - Radio Button Input Fields - Radio Button

• تکلیف - Input Fields - Radio Button Task - Input Fields - Radio Button

• سوال هوش - Input Fields IQ - Input Fields

• تکلیف - Form Handling با استفاده از Textbox، Checkbox و Radio Buttons Task - Form Handling using Textbox, Checkbox & Radio Buttons

• Event Handling - onFocus Event Event Handling - onFocus Event

• Event Handling - onBlur Event Event Handling - onBlur Event

• تکلیف - Event Handling - رویدادهای onFocus و onBlur Task - Event Handling - onFocus & onBlur event

• Event Handling - رویدادهای onKeyUp و onKeyDown Event Handling - onKeyUp & onKeyDown event

• سوال هوش - Event Handling - رویدادهای onKeyUp و onKeyDown IQ - Event Handling - onKeyUp & onKeyDown event

• Event Handling - رویدادهای onMouseEnter و onMouseLeave Event Handling - onMouseEnter & onMouseLeave event

• تکلیف - Event Handling - رویدادهای onMouseEnter و onMouseLeave Task - Event Handling - onMouseEnter & onMouseLeave event

• سوال هوش - رویدادهای onMouseEnter و onMouseLeave IQ - onMouseEnter & onMouseLeave event

مدیریت State به صورت عملی Managing State Practically

• مقدمه Introduction

• ایجاد پروژه Project Creation

• راه‌اندازی پروژه با Tailwind CSS و ایجاد Header Project Setup with Tailwind CSS and Header Creation

• ایجاد کامپوننت کارت محصول Creating Product Card Component

• رندر لیست محصولات با داده‌های Static Rendering Product List with Static Data

• ایجاد Modal افزودن محصول Creating Add Product Modal

• ایجاد Form برای افزودن محصول Creating Form for Add Product

• ذخیره‌سازی مقادیر Form افزودن محصول Storing the Values of the Add Product Form

• پیاده‌سازی قابلیت افزودن محصول Implementing Add Product Functionality

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

• تنظیم Form ویرایش محصول Setting Up Edit Product Form

• پیاده‌سازی قابلیت ویرایش محصول Implementing Edit Product Functionality

• پیاده‌سازی قابلیت فعال/غیرفعال کردن محصول Implementing Active/Inactive Product Functionality

• رندر محصولات فعال/غیرفعال Rendering Active/Inactive Products

useEffect() - کار با چرخه‌های حیات کامپوننت useEffect() - Working with component life cycles

• درک چرخه حیات کامپوننت Understanding Component Life Cycle

• سوال هوش - درک چرخه حیات کامپوننت IQ-Understanding Component Life Cycle

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

• استفاده از هوک ساده useEffect() Using Simple useEffect() Hook

• سوال هوش - استفاده از هوک ساده useEffect() IQ - Using Simple useEffect() Hook

• useEffect() - اهمیت آرایه Dependency useEffect() - Importance of the Dependency Array

• سوال هوش - useEffect() - اهمیت آرایه Dependency IQ - useEffect() - Importance of the Dependency Array

• useEffect() - تابع Cleanup useEffect() - Cleanup Function

• سوال هوش - useEffect() - تابع Cleanup IQ - useEffect() - Cleanup Function

• مکان مناسب برای فراخوانی هوک useEffect() The Right Place to Call the useEffect() Hook

• چه زمانی باید از استفاده از هوک useEffect در React اجتناب کرد When to Avoid using the useEffect Hook in React

• درک چرخه اضافی راه‌اندازی و Cleanup حالت Strict React Understanding React Strict Mode's Extra Setup and Cleanup Cycle

• هوک useEffect() - مدیریت Dependencies useEffect() hook - Managing Dependencies

• useEffect() در مقابل به‌روزرسانی‌های DOM - نیاز به UseLayoutEffect() useEffect() Vs DOM Updates - Need of UseLayoutEffect()

• به تعویق انداختن Effects که توسط Interactions در React تحریک می‌شوند Deferring Effects Triggered by Interactions in React

• درک این که useEffect فقط در Client Side اجرا می‌شود Understanding of useEffect only runs on Client Side

React Router React Router

• معرفی Routing Introduction to Routing

• درک Routing در React Understanding Routing in React

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

• سوال هوش - پیکربندی Routes با استفاده از React Router IQ - Configure Routes using React Router

• درک Single-page Application و Multi-page Application Understanding of Single-page Application and Multi-page Application

• سوال هوش - SPA در مقابل MPA IQ - SPA vs MPA

• ایجاد Navbar در Root Route Navbar Creation on Root Route

• ایجاد صفحه محصولات Creating Products Page

• صفحه یافت نشد (404) Not Found Page (404)

• سوال هوش - صفحه یافت نشد (404) IQ - Not Found Page (404)

• درک Nested Routes Understanding Nested Routes

• مدیریت پویای Nested Routes - Route Parameter Dynamically Handling Nested Routes - Route Parameter

• سوال هوش - Nested Routes - Route Parameter IQ - Nested Routes - Route Parameter

• Layouts - <Outlet /> Layouts - <Outlet />

• سوال هوش - Layouts - <Outlet /> IQ - Layouts - <Outlet />

• ویژگی "index" - ارجاع به Parent Route "index" Attribute - Referring the Parent Route

• سوال هوش - ویژگی "index" - ارجاع به Parent Route IQ - "index" Attribute - Referring the Parent Route

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

• ارسال داده به Child Component - context و هوک useOutletContext() Passing Data to Child Component - context & useOutletContext() hook

• ارسال داده به Child Component - "state" و هوک useLocation() Passing Data to Child Component - "state" and useLocation() hook

• سوال هوش - context، useOutletContext()، "state" و هوک useLocation() IQ - context, useOutletContext(), "state" and useLocation() hook

• ایجاد کارت جزئیات محصول Creating Product Details Card

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

• سوال هوش - درک هوک "useRoutes()" IQ - Understanding the "useRoutes()" hook

• درک کامپوننت <NavLink> Understanding <NavLink> Component

• سوال هوش - درک کامپوننت <NavLink> IQ - Understanding <NavLink> Component

• کامپوننت <Navigate> برای Redirection <Navigate> Component for Redirection

• "useNavigate()" - روش صحیح Redirection "useNavigate()" - Correct Way to Redirect

• سوال هوش - <Navigate> و useNavigate() IQ - <Navigate> & useNavigate()

• تغییر ساختار پروژه Project Restructuring

• بهبود Interface Interface Improvement

هوک useContext() - مدیریت Global State The useContext() hook - Global State Management

• Prop Drilling Prop Drilling

• سوال هوش - Prop Drilling IQ - Prop Drilling

• درک Context API Understanding of Context API

• سوال هوش - درک Context API IQ - Understanding of Context API

• هوک useContext() useContext() Hook

• سوال هوش - هوک useContext() IQ - useContext() Hook

• ایجاد Interface برای برنامه Calculator Creating Interface for Calculator App

• تنظیم Context API در برنامه Calculator Setup Context API into Calculator App

• مدیریت Input Data در Global State Handling Input Data in the Global State

• دستکاری Global State Global State Manipulation

• سوال هوش - دستکاری Global State IQ - Global State Manipulation

• Nested Context Providers Nested Context Providers

Redux Tool Kit (RTK) - مدیریت پیشرفته Global State Redux Tool Kit (RTK) - Advance Global State Handling

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

• سوال هوش - معرفی Redux و RTK IQ - Introduction to Redux and RTK

• ایجاد Slice Creating Slice

• سوال هوش - ایجاد Slice IQ - Creating Slice

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

• سوال هوش - پیکربندی Store IQ - Configuring Store

• واکشی Store Data - useSelector() Fetching the Store Data - useSelector()

• سوال هوش - واکشی Store Data - useSelector() IQ - Fetching the Store Data - useSelector()

• ایجاد Actions در Slice Creating Actions in Slice

• سوال هوش - ایجاد Actions در Slice IQ - Creating Actions in Slice

• چگونگی کارکرد Immutability در Actions در پشت صحنه How immutability in actions works behind the scenes

• سوال هوش - چگونگی کارکرد Immutability در Actions در پشت صحنه IQ - How immutability in actions works behind the scenes

• مدیریت مقادیر Input در Redux Handling Input values in the Redux

• محاسبه عملیات حسابی در Redux Calculating Arithmetic Operations in Redux

• پیاده‌سازی Redux در React Router App Implementing Redux in React Router App

مدیریت HTTP Requests Handling HTTP Requests

• معرفی - HTTP Requests Introduction - HTTP Requests

• سوال هوش - معرفی - HTTP Requests IQ - Introduction - HTTP Requests

• Fetch() API Fetch() API

• سوال هوش - Fetch() API IQ - Fetch() API

• رندر Users Data Rendering Users Data

• POST Method در fetch() API POST Method in fetch() API

• PUT و PATCH Method در fetch() API PUT and PATCH Method in fetch() API

• DELETE Method در fetch() API DELETE Method in fetch() API

• مدیریت خطا در Fetch() API Error Handling in Fetch() API

• مدیریت خطا با بلوک Try Catch() Error Handling with Try Catch() block

Server Side - مبانی NodeJS + ایجاد API با ExpressJS Server Side - NodeJS Basics + API Creation with ExpressJS

• مقدمه Introduction

• سوال هوش - مقدمه IQ - Introduction

• ایجاد پروژه Project Creation

• ایجاد Server با استفاده از Express.js Creating Server using Express.js

• سوال هوش - ایجاد Server با استفاده از Express.js IQ - Creating Server using Express.js

• ایجاد Basic API Creating Basic API

• سوال هوش - ایجاد Basic API IQ - Creating Basic API

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

• سوال هوش - پیکربندی Nodemon IQ - Configuring Nodemon

• نصب POSTMAN POSTMAN Installation

• ایجاد یک GET Request از POSTMAN Making a GET Request from POSTMAN

مبانی MySQL MySQL Basics

• مقدمه Introduction

• سوال هوش - مقدمه IQ - Introduction

• نصب MySQL MySQL Installation

• ایجاد Database Database Creation

• حذف Database Drop Database

• DataTypes DataTypes

• ایجاد Table Creating Table

• سوال هوش - ایجاد Table IQ - Creating Table

• INSERT Query INSERT Query

• فیلتر کردن پایه با WHERE Clause Basic Filtering with WHERE Clause

• فیلتر کردن پیشرفته با WHERE Clause Advanced Filtering with WHERE Clause

• مرتب‌سازی داده با ‘LIMIT’ & ‘ORDER BY’ Sorting Data with ‘LIMIT’ & ‘ORDER BY’

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

• حذف Records با استفاده از DELETE Clause Delete Records Using DELETE Clause

• حذف Table Drop Table

ادغام Database در Node App Database Integration in Node App

• اتصال MySQL Database در Node App Connect MySQL Database in Node App

• سوال هوش - اتصال MySQL Database در Node App IQ - Connect MySQL Database in Node App

• واکشی Products از Database Fetching Products from Database

• سوال هوش - واکشی Products از Database IQ - Fetching Products from Database

• پیکربندی Organized Routes با "express.Router()" Configuring Organized Routes with "express.Router()"

• ایجاد API برای افزودن Products Creating API for Adding Products

• ایجاد API برای واکشی یک Product منحصر به فرد Creating API to Fetch a Unique Product

• ایجاد API برای به‌روزرسانی داده‌های Product Creating API to Update Product's data

• سوال هوش - ایجاد API برای به‌روزرسانی داده‌های Product IQ - Creating API to Update Product's data

• ایجاد API برای حذف یک Product Creating API to Delete a Product

• تغییر ساختار اتصال Database و Success Messages Restructuring Database Connection and Success Messages

تکمیل Fullstack Application (ادغام API) Completing the Fullstack Application (API Integration)

• مقدمه Introduction

• واکشی Products به صورت پویا Fetching Products Dynamically

• رندر Products به صورت پویا Rendering Products Dynamically

• ادغام API در صفحه جزئیات محصول Integrating API in Porduct Details Page

• ایجاد Interface برای افزودن Products Creating Interface for Adding Products

• پیاده‌سازی Form افزودن Products Implementing Add Products Form

• ادغام API 'افزودن Product' Integrating 'Add Product' API

• پیاده‌سازی قابلیت ویرایش Products Implementing Edit Products Functionality

• ایجاد پاپ‌آپ تایید حذف Creating Delete Confirmation Popup

• ادغام API حذف Product Integrating Delete Product API

کار با Custom Hooks Working With Custom Hooks

• معرفی Custom Hooks Introduction to Custom Hooks

• سوال هوش - معرفی Custom Hooks IQ-Introduction to custom hooks

• ایجاد و استفاده از Custom Hook Create and Use Custom Hook

• تکلیف 1 - ایجاد یک Custom Hook برای Timer Task 1 - Create A Custom Hook For Timer

• واکشی جزئیات محصول با استفاده از Custom Hook Fetching Product Details using Custom Hook

معرفی NextJS NextJS Introduction

• NEXT JS به جای ReactJS NEXT JS in spite of ReactJS

• سوال هوش - NEXT JS به جای ReactJS IQ - NEXT JS in spite of ReactJS

• ایجاد اولین پروژه Creating First Project

• سوال هوش - ایجاد اولین پروژه IQ - Creating First Project

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

• سوال هوش - ساختار پروژه IQ - Project Structure

• Pages Router در مقابل App Router Pages Router Vs App Router

• سوال هوش - Pages Router در مقابل App Router IQ - Pages Router Vs App Router

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

• تعریف Routes Defining Routes

• Nested Routes Nested Routes

• لینک دادن صفحات با <Link> Linking Pages with <Link>

• React Server Component در مقابل Client Component React Server Component Vs Client Component

• سوال هوش - React Server Component در مقابل Client Component IQ - React Server Component Vs Client Component

• صفحه خطا Error Page

• Dynamic Routes و Route Params Dynamic Routes and Route Params

• Asynchronous Server Components Asynchronous Server Components

• سوال هوش - Asynchronous Server Components IQ - Asynchronous Server Components

Caching در NextJS Caching in NextJS

• درک Caching در Next Understanding Caching in Next

• سوال هوش - درک Caching در Next IQ - Understanding Caching in Next

• Unexpected Behaviour در Project Build Unexpected Behaviour in Project Build

• سوال هوش - Unexpected Behaviour در Project Build IQ - Unexpected Behaviour in Project Build

• Static به Dynamic - Cache Control Static to Dynamic - Cache Control

• سوال هوش - Static به Dynamic - Cache Control IQ - Static to Dynamic - Cache Control

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

• هوک useActionState() useActionState() Hook

• سوال هوش - هوک useActionState() IQ - useActionState() Hook

• جادوی Memoization The Magic of Memoization

• سوال هوش - Memoization IQ - Memoization

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

• سوال هوش - هوک‌های useCallback() و useMemo() IQ - useCallback() and useMemo() Hook

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

• سوال هوش - هوک useOptimistic() IQ - useOptimistic() Hook

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

• سوال هوش - هوک useFormStatus() IQ - useFormStatus() Hook

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

• سوال هوش - هوک useDebugValue() IQ - useDebugValue() Hook

MyStore - بخش Admin MyStore - Admin Seciton

• مقدمه Introduction

• ایجاد پروژه Project Creation

• ایجاد کامپوننت Sidebar Creating Sidebar Component

• کار روی Sidebar Working on Sidebar

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

• سوال هوش - @layer & @apply - ترکیب کلاس‌های Utility IQ - @layer & @apply - Combining Utility Classes

• استایل دادن به Sidebar Styling the Sidebar

• اضافه کردن آیکون به Sidebar Adding Icons to the Sidebar

• ایجاد صفحه 'Users' Creating ‘Users’ Page

• ایجاد Form 'Add Users' Creating ‘Add Users’ Form

• پیاده‌سازی Component Based Architecture Implementing Component Based Architecture

• ایجاد کامپوننت‌های Button و Input Creating Button & Input Components

• Refactoring ساختار کد Refactoring Code Structure

• ایجاد Database Database Creation

• اضافه کردن Users با Server Action Adding Users with Server Action

• پیاده‌سازی Hashing Implementing Hashing

• سوال هوش - پیاده‌سازی Hashing IQ - Implementing Hashing

• اعتبارسنجی ایجاد User Validating User Creation

• رندر Users در Table Rendering Users in the Table

• ایجاد صفحه Edit User Creating Edit User Page

• Dynamic Default Values برای Edit Dynamic Default Values for Edit

• به‌روزرسانی داده‌های User Updating User Data

• حذف User Deleting User

• ایجاد Delete Confirmation Popup Creating Delete Confirmation Popup

• فعال‌سازی Confirmation Popup Enabling Confirmation Popup

• حذف User با Confirmation Popup Deleting User by confirmation popup

• ایجاد صفحه Product Type Creating Product Type Page

• ایجاد صفحه Add Product Type Creating Add Product Type Page

• اضافه کردن Product Types و Products Models به Schema Adding Product Types and Products models into the schema

• سوال هوش - اضافه کردن Models در Schema - Product Type & Product IQ - Adding Models In the Schema - Product Type & Product

• اضافه کردن Product Type با استفاده از Server Action Adding Product Type using server action

• رندر Product Types در Table Rendering Product Types into the Table

• ایجاد صفحه Edit Product Type Creating Edit Product Type Page

• Dynamic Default Values برای Product Type Dynamic Default values for Product Type

• به‌روزرسانی Product Type با Server Action Updating Product Type with server action

• حذف Product Type با Server Action Deleting Product Type with server action

• ایجاد صفحه Products Creating Products Page

• ایجاد Products Interface برای لیست کردن Creating Products interface for listing

• ایجاد صفحه Add Product Creating Add Product Page

• تکمیل Form Add Products Completing Add Products Form

• ایجاد Switch Component Creating Switch Component

• ایجاد File Input Component Creating File Input Component

• رندر Dynamic Product Types Data در صفحه Add Product Rendering Dynamic Product Types Data in Add Product Page

• ایجاد Server Action برای اضافه کردن Products Creating Server Action for Adding Products

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

• تکمیل قابلیت Add Product Completing Add Product Functionality

• رندر Dynamic Data در Table Products Rendering Dynamic Data in Products table

• ایجاد صفحه Edit Product Creating Edit Product Page

• Dynamic Default Values برای Product Dynamic Default values for Product

• رندر Default Values در Switch و File Input Render Default values in Switch and File Input

• به‌روزرسانی Product با Server Action Updating Product with server action

• سوال هوش - به‌روزرسانی Product با Server Action IQ - Updating Product with server action

• حذف Product با Server Action Deleting Product with server action

Mystore - بخش Client Mystore - Client Section

• شروع بخش Client Initiating Client Section

• ایجاد کامپوننت Header Creating Header Component

• پیاده‌سازی Search bar Implementing Search bar

• Joining Tailwind Classes با رویکرد Ideal Joining Tailwind Classes with Ideal Approach

• سوال هوش - Joining Tailwind Classes با رویکرد Ideal IQ-Joining Tailwind Classes with Ideal Approach

• اضافه کردن Profile Dropdown Adding Profile Dropdown

• هوک useRef() useRef() Hook

• بستن منوی Profile Dropdown با کلیک بیرون Close Profile Dropdown menu on outside click

• سوال هوش - بستن منوی Profile Dropdown با کلیک بیرون IQ-Close Profile Dropdown menu on outside click

• ایجاد کامپوننت Input Creating Input component

• ایجاد صفحه Home Creating Home Page

• ایجاد بخش Filters Creating Filters Section

• ایجاد Custom Accordion Component Creating Custom Accordion Component

• سوال هوش - ایجاد Custom Accordion Component IQ-Creating Custom Accordion Component

• تکمیل Custom Accordion Component Completing Custom Accordion Component

• ادامه در بخش Filter Continue on Filter Section

• ایجاد Price Range Slider Component Creating Price Range Slider Component

• ایجاد Product Card Component Creating Product Card Component

• تکمیل Product Card Component Completing Product Card Component

• ایجاد Button Component Creating Button Component

• ایجاد API برای Product listing API creation for Product listing

• Dynamic Product Rendering با استفاده از Server Action Dynamic Product Rendering using Server Action

• ایجاد API برای واکشی Product Types API Creation For Fetching Product Types

• Dynamic Product Type Rendering با استفاده از API Dynamic Product Type Rendering using API

• تنظیم Filter Values در Search Params Set Filter values into the search params

• تغییر API Products برای اعمال Filters Modifying Products API to Apply Filters

• قابلیت Filter در Client Side Filter Functionality on client side

• قابلیت Search Filter Search Filter Functionality

• ایجاد صفحه Product Creating the Product Page

• تکمیل صفحه Product Completing Product Page

• ایجاد API برای واکشی یک Product بر اساس ID آن API Creation For Fetching a Product by its ID

• Dynamic Product Details Rendering با استفاده از API Dynamic Product Details Rendering using API

• رندر Products بر اساس Status Rendering Products based on status

• ایجاد صفحه Cart Creating Cart Page

• رندر Cart Item Card Rendering Cart Item Card

• تکمیل Cart UI Completing the Cart UI

• ایجاد Context برای مدیریت Products Creating Context for Handling Products

• سوال هوش - ایجاد Context برای مدیریت Products IQ - Creating Context for Handling Products

• پیاده‌سازی Cart Functionalities Implement Cart Functionalities

• پویاسازی صفحه Cart Making Cart Page Dynamic

• فعال‌سازی Quantity Selection Enabling Quantity Selection

• پایان Dynamic Cart Page Finishing Dynamic Cart Page

Mystore - احراز هویت Mystore - Authenitcation

• ایجاد صفحه Login Creating Login Page

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

• تنظیم Authentication flow با استفاده از JOSE + JWT Setup Authentication flow using JOSE + JWT

• ایجاد Server Action برای Login Create Server action for Login

• Cookie Based Authentication Cookie Based Authentication

• سوال هوش - Cookie Based Authentication IQ - Cookie Based Authentication

• مدیریت مسیرهای خصوصی و عمومی با استفاده از میان‌افزار Handling Private and Public routes using middleware

• واکشی اطلاعات کاربر احراز هویت شده Fetching Authenticated User Data

• پیاده‌سازی خروج از حساب با اکشن سرور Implementing Logout with Server Action

• احراز هویت تمام اکشن‌های سرور بخش ادمین Authenticate all the Server Actions of Admin Section

• ایجاد مسیرهای احراز هویت در بخش کلاینت Creating Authentication Routes in Client Section

• ایجاد اینترفیس برای مسیرهای احراز هویت Creating Interface for Authentication Routes

• ایجاد جدول خریدار در پایگاه داده Creating Buyer Table in the Database

• ایجاد API ثبت‌نام Creating Sign-up API

• تست API ثبت‌نام با استفاده از Postman Testing Signup API using Postman

• ایجاد API ورود به حساب Creating Login API

• تست API ورود به حساب با استفاده از Postman Testing the Login API Using Postman

• پیاده‌سازی قابلیت ثبت‌نام در بخش کلاینت Implementing Signup Functionality in the Client Section

• پیاده‌سازی قابلیت ورود مشتری به حساب Implementing Customer Login Functionality

• API برای واکشی داده‌های منحصر به فرد مشتری API to Fetch Unique Customer's data

• واکشی داده‌های مشتری با استفاده از API در بخش کلاینت Fetching Customer's data using API in the Client Section

• قابلیت خروج از حساب در بخش کلاینت Logout Functionality in the Client Section

فروشگاه من - درگاه پرداخت و فروش Mystore - Payment Gateway & Sales

• مقدمه Introduction

• IQ - مقدمه IQ - Introduction

• پیکربندی‌های اولیه Stripe Basic Configurations of Stripe

• رندر کردن فرم پرداخت توکار Stripe Rendering Stripe's Embedded Checkout Form

• ایجاد پویا Session پرداخت Creating Checkout Session Dynamically

• ایجاد صفحه وضعیت پرداخت Creating Payment Status Page

• ایجاد جدول فروش و تراکنش در پایگاه داده Creating Sales and Transaction Table in Database

• API برای به‌روزرسانی پایگاه داده بعد از پرداخت موفقیت‌آمیز API to Update Database after the Successful Checkout

• تست API پرداخت با استفاده از Postman Testing the Checkout API using Postman

• ادغام API پرداخت در بخش کلاینت Integrating Checkout API in the Client Section

• ایجاد بخش اصلی خریدار Creating Buyer Master Section

• رندر کردن داده‌های پویا در جدول خریداران Rendering Dynamic data in Buyers Table

فروشگاه من - گزارش‌ها و تجزیه و تحلیل (نمودارها) MyStore - Reports and Analysis (Charts)

• مقدمه Introduction

• تهیه گزارش مشتریان و خریداران Preparing Customers and Buyers Report

• رندر کردن گزارش مشتریان و خریداران Rendering Customers & Buyers Report

• تهیه گزارش کل درآمد Preparing Total Revenue Report

• تهیه گزارش سفارش‌های اخیر Preparing Recent Order Report

• ایجاد Modal محصولات خریداری شده Creating Purchased Products Modal

• واکشی محصولات خریداری شده در Modal Fetching Purchased Products in Modal

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

• پیاده‌سازی نمودار با استفاده از Recharts Implementing Chart Using Recharts

• تهیه گزارش فروش با استفاده از نمودار Preparing Sales Report using Chart

• رندر کردن نمودار فروش با مقادیر پویا Rendering Sales Chart with dynamic values

• تهیه گزارش مشتریان با استفاده از نمودار Preparing Customers Report using Chart

• ایجاد کامپوننت بخش نمودار Creating Chart Section Component

فروشگاه من - استقرار MyStore - Deployment

• مقدمه Introduction

• IQ - مقدمه IQ - Introduction

• مقدمه‌ای بر CI/CD Introduction to CI/CD

• IQ - مقدمه‌ای بر CI/CD IQ - Introduction to CI/CD

• ادغام Github Github Integration

• IQ - ادغام Github IQ - Github integration

• انتقال پایگاه داده از SQLite به MySQL Database Migration from SQLite to MySQL

• اتصال پایگاه داده MySQL به برنامه ادمین Link the MySQL database to Admin Application

• استقرار برنامه ادمین روی Vercel Deploying Admin App on Vercel

• استقرار برنامه کلاینت روی Vercel Deploying Client App on Vercel