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

دانلود Mastering React 19 + E-Commerce Bootcamp + Interview Q&A

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

آموزش جامع React 19 و Next.js + پروژه فروشگاهی با MERN Stack

آیا می‌خواهید یک توسعه‌دهنده حرفه‌ای React 19 و Next.js شوید؟ این دوره جامع با پوشش کامل MERN stack، شما را برای ورود به دنیای توسعه وب مدرن آماده می‌کند.

آنچه در این دوره می‌آموزید:

  • React 19: اصول و مبانی ReactJS، نحوه ایجاد کامپوننت، رندرینگ داده‌های داینامیک و استفاده از React Hooks.
  • Next.js: مفاهیم اساسی NextJS، کشینگ، مسیریابی مدرن با App Router، Server Side Rendering و Static Site Generation.
  • MERN Stack: تسلط بر توسعه فول استک با MongoDB, ExpressJS, ReactJS و NodeJS.
  • Redux Toolkit: مدیریت state به صورت حرفه‌ای با Redux (RTK) و useContext().
  • NodeJS و ExpressJS: ایجاد API های قدرتمند با NodeJS و ExpressJS.
  • MySQL: آشنایی با پایگاه داده MySQL و مفاهیم اساسی پایگاه داده.
  • TailwindCSS: طراحی رابط کاربری زیبا و واکنش‌گرا با TailwindCSS.
  • Stripe: پیاده‌سازی درگاه پرداخت امن با Stripe.
  • E-Commerce Project: ساخت یک پروژه فروشگاهی کامل با Next.js، شامل سیستم احراز هویت کاربر با JWT و JOSE، سبد خرید، و درگاه پرداخت Stripe.

ویژگی‌های کلیدی دوره:

  • آموزش جامع از مبتدی تا پیشرفته
  • پوشش کامل مفاهیم JSX، رندرینگ شرطی، و مدیریت رویدادها
  • درک عمیق SPA با react-router-dom
  • کار با درخواست‌های HTTP با متد fetch()
  • پیاده‌سازی عملی CRUD operations با React JS
  • پرسش و پاسخ های مصاحبه و راهنمای آمادگی
  • تمرین‌ها و تکالیف عملی با توضیحات کامل
  • آموزش مفاهیم پیشرفته مانند Server-Side Rendering و Static Site Generation برای بهبود سئو و عملکرد
  • پیاده‌سازی عملی Redux Toolkit
  • آموزش Best Practices برای ساخت برنامه‌های MERN + Next.js مقیاس‌پذیر

پیش‌نیازها: آشنایی با مفاهیم اولیه JavaScript بسیار مفید خواهد بود.

این دوره برای افرادی مناسب است که می‌خواهند به یک توسعه‌دهنده MERN stack حرفه‌ای تبدیل شوند و در دنیای توسعه وب مدرن موفق باشند.

همین حالا ثبت‌نام کنید و قدمی قاطع به سوی یک شغل موفق در دنیای توسعه وب بردارید!


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

مقدمه 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

نمایش نظرات

آموزش دوره جامع React 19 و بوت‌کمپ تجارت الکترونیک (E-Commerce) + آمادگی مصاحبه
جزییات دوره
26 hours
429
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
134
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Nirmal Joshi Nirmal Joshi

مدیر عامل شرکت ، مربی شرکت ، برنامه نویسی AficionadoHi! من نیرمال جوشی هستم ، بنیانگذار و مدیرعامل یک شرکت توسعه فناوری در هند. من بیش از 23 سال تجربه کار با افراد ، فرایندها و کدها را دارم. من سالها مربی شرکتی فعال هستم و با شرکتهای برتر Fortune 1000 مشورت می کنم. سفر من در اینجا در Udemy شامل به اشتراک گذاری آموزشهای پیشرفته توسعه وب Front-end/Full-stack با تمرکز بر آخرین ابزارها ، تکنیک ها ، پروژه ها و شیوه های استاندارد برنامه نویسی برای کمک به افراد خلاق در پیاده سازی عالی فناوری است. اگر شما مشتاق فناوری هستید یا کسی که علاقه مند به ایجاد چیزهای شگفت انگیز در پیکسل و کد است ، حتماً در دوره های من ثبت نام کنید. ارتباط با من آسان است. سوالات خود را در بخش پرسش و پاسخ با من در میان بگذارید. موفق باشید!

Init Tech Labs Dhairya Joshi Init Tech Labs Dhairya Joshi

آغاز تک (Init Tech) یا آزمایشگاه های آغاز تک (Init Tech Labs)