آموزش Next.js را با React & Node - Beautiful Portfolio App تکمیل کنید

Complete Next.js with React & Node - Beautiful Portfolio App

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: با Next.js برنامه های وب بدون سرور بسازید. قلاب ها را یاد بگیرید به Vercel مستقر شوید. Next.js (Next JS 10+)، React (React 16+) & Node. توسعه برنامه های وب بدون سرور و کلاسیک با جدیدترین Next JS و React با ایجاد برنامه های کاربردی واقعی مفاهیم وب را به وضوح درک کنید ایجاد SEO (بهینه سازی موتور جستجو) و برنامه های کاربردی ایزومورفیک خود را در زمینه محیط توسعه وب هیجان انگیز Next و React تثبیت کنید پیش نیازها: اصول اولیه در HTML و CSS دانش پایه جاوا اسکریپت مورد نیاز است

آیا این دوره برای شما مناسب است؟

اگر قصد دارید حرفه خود را به عنوان یک توسعه دهنده شروع کنید یا مهارت های برنامه نویسی خود را بهبود بخشید، این دوره برای شما مناسب است. بیاموزید که چگونه یک وب سایت نمونه کار فوق العاده بسازید که می توانید آن را با همکاران یا کارفرمایان آینده خود به اشتراک بگذارید.

همه آنچه برای شروع توسعه وب نیاز دارید را در یک دوره دریافت کنید! با فناوری‌های توسعه وب شروع کنید تا موضوعات پیشرفته‌تر را شروع کنید تا زمانی که برنامه شما در Heroku یا Vercel مستقر شود و به صورت آنلاین در اینترنت قابل دسترسی باشد.

این منبع تنها چیزی است که برای شروع توسعه وب با Next.js، React و Node نیاز دارید. شما اعتماد به نفس و مهارت های مورد نیاز برای ایجاد پروژه های خود را در طول این دوره به دست خواهید آورد. شما ذهنیت مناسبی برای درخواست شغل توسعه‌دهنده و بهبود چارچوب‌های مدرن مانند Next.js، React.js و Node خواهید داشت.

Next.js چیست؟

Next.js یک چارچوب React است که زیرساخت و تجربه توسعه ساده را برای برنامه‌های رندر سمت سرور (SSR) فراهم می‌کند.

  • یک سیستم مسیریابی مبتنی بر صفحه (با پشتیبانی از مسیرهای پویا)

  • پیش رندر، هر دو تولید استاتیک (SSG) و رندر سمت سرور (SSR) بر اساس هر صفحه پشتیبانی می شوند.

ساختار دوره به شرح زیر است:

  • [پروژه 1]: برنامه کاربردی منبع (مبتدیان)

  • [پروژه 2]: برنامه نمونه کارها (مبتدیان/متوسط)

  • [پروژه 3]: برنامه فیلم (کد قدیمی، مبتدیان)

  • [پروژه 4]: برنامه نمونه کارها (کد قدیمی، مبتدیان/متوسط)

قرار است روی چه چیزی کار کنیم؟

پروژه منبع

این پروژه مفاهیم اساسی را پوشش می دهد. شما یاد خواهید گرفت که React و Next JS چگونه کار می کنند.

شما وضعیت و امکانات را درک خواهید کرد.

هدف اصلی این پروژه درک مفاهیم اساسی است که شما را برای برنامه دوم آماده می کند.

پروژه نمونه کارها

ابتدا، ما می‌خواهیم طرح پایه برنامه را یکپارچه کنیم. ما طرح را به قطعات کوچک تقسیم می کنیم و بسیاری از اجزای قابل استفاده مجدد مانند نوار ناوبری، کارت نمونه کارها و بسیاری دیگر را ایجاد می کنیم. من نحوه عملکرد رندر سمت سرور، نحوه استفاده از تکنیک‌های مختلف واکشی داده‌ها و تفاوت‌ها و مزایای واکشی روی سرور در مقابل مشتری را توضیح خواهم داد.

اولین ویژگی بزرگی که روی آن کار خواهیم کرد، احراز هویت است. ارائه دهنده Auth0 احراز هویت را انجام می دهد. با این وجود، کارهای زیادی برای انجام دادن وجود خواهد داشت.

کاربران فقط برای کاربران احراز هویت شده ثبت نام می‌کنند و وارد سیستم می‌شوند و ویژگی را تجربه می‌کنند. شما یاد خواهید گرفت که چگونه دسترسی به صفحات را محدود کنید و وضعیت احراز هویت را از طریق برنامه خود مدیریت کنید، که منجر به تغییرات UI در طرح‌بندی برنامه می‌شود.

بعد، روی ویژگی‌های نمونه کار خواهیم کرد. ما عملکردی را برای ایجاد یک نمونه کار اجرا خواهیم کرد و نحوه مدیریت آسان فرم ها را توضیح خواهم داد. سپس به عملکرد به روز رسانی نگاه می کنیم، جایی که به شما نشان خواهم داد که چگونه ورودی ها را با داده های موجود پر کنید. در پایان بخش، ما روی قابلیت حذف کار خواهیم کرد. همه ویژگی‌ها به صورت واکنش‌گرا و نمایش به‌روزرسانی در زمان واقعی خواهند بود، و شما یاد خواهید گرفت که چگونه صفحات استاتیک سریع با توابع Next.js جدید ایجاد کنید.

ویژگی وبلاگ بزرگترین خواهد بود. کاربران با استفاده از یک ویرایشگر تخته سنگ که گزینه های قالب بندی متفاوتی را ارائه می دهد، وبلاگ ایجاد می کنند. هر وبلاگ در ابتدا به عنوان یک وبلاگ پیش نویس ذخیره می شود و مسئولیت انتشار آن بر عهده کاربر خواهد بود. برای این منظور، یک صفحه داشبورد ایجاد می کنیم که همه وبلاگ های کاربران را برای انتشار یا تهیه پیش نویس از وبلاگ نمایش می دهد. همه وبلاگ های منتشر شده در صفحه وبلاگ ها برجسته می شوند و به عنوان صفحات ثابت ایجاد می شوند که عملکرد بهتری را تضمین می کنند. ما قابلیت حذف و به‌روزرسانی را نیز ایجاد خواهیم کرد.

در مرحله بعد، روی بهبود SEO (بهینه سازی موتور جستجو) کار خواهیم کرد. من اصول اولیه سئو و نحوه کارکرد آن با Next.js را توضیح خواهم داد.

بخش آخر استقرار را پوشش می دهد. سرور Express API در Heroku مستقر خواهد شد. برنامه نمونه کارها Next.js در پلتفرم Vercel بدون سرور مستقر می شود و برنامه ما را در اینترنت فوق العاده سریع می کند.


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

معرفی Introduction

  • بررسی اجمالی پروژه Project Overview

  • بررسی اجمالی پروژه Project Overview

  • نحوه حل مسائل + ساختار پروژه How to resolve issues + Project structure

  • نحوه حل مسائل + ساختار پروژه How to resolve issues + Project structure

معرفی Introduction

[پروژه 1]: پروژه را آغاز کنید [Project 1]: Init the Project

  • معرفی پروژه Project Introduction

  • معرفی پروژه Project Introduction

  • مقداردهی اولیه پروژه Project initialisation

  • ساختار پوشه Folder Structure

  • ساختار پوشه Folder Structure

  • کامپوننت _app _app Component

  • کامپوننت _app _app Component

  • اجزاء Components

  • اجزای کلاس Class components

  • اجزای کلاس Class components

  • JSX JSX

  • توابع پیکان Arrow Functions

  • توابع پیکان Arrow Functions

[پروژه 1]: پروژه را آغاز کنید [Project 1]: Init the Project

  • مقداردهی اولیه پروژه Project initialisation

  • اجزاء Components

  • JSX JSX

[پروژه 1]: وضعیت و تجهیزات [Project 1]: State & Props

  • حالت State

  • حالت State

  • حالت افزایشی Increment state

  • حالت افزایشی Increment state

  • تغییر حالت Change state

  • حالت طبقاتی Class state

  • حالت طبقاتی Class state

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

  • از افکت استفاده کنید Use effect

  • از افکت استفاده کنید Use effect

  • وسایل کلاس Class props

  • وسایل کلاس Class props

  • برنامه های وب چگونه کار می کنند How web apps work

  • اطلاعات بیشتر در مورد وسایل More about props

[پروژه 1]: وضعیت و تجهیزات [Project 1]: State & Props

  • تغییر حالت Change state

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

  • برنامه های وب چگونه کار می کنند How web apps work

  • اطلاعات بیشتر در مورد وسایل More about props

[پروژه 1]: چیدمان [Project 1]: Layout

  • Bulma css Bulma css

  • Bulma css Bulma css

  • جداسازی به اجزا Separation into components

  • مسیر مطلق Absolute path

  • چیدمان Layout

  • چیدمان Layout

  • داده های منابع Resource data

  • لیست برجسته Highlight list

  • لیست برجسته Highlight list

  • فهرست منابع Resource list

[پروژه 1]: چیدمان [Project 1]: Layout

  • جداسازی به اجزا Separation into components

  • مسیر مطلق Absolute path

  • داده های منابع Resource data

  • فهرست منابع Resource list

[پروژه 1]: واکشی داده ها [Project 1]: Data fetching

  • توابع Api Api functions

  • توابع Api Api functions

  • لوازم ثابت را دریافت کنید Get static props

  • لوازم ثابت را دریافت کنید Get static props

  • دریافت استاتیک در مقابل دریافت لوازم جانبی سرور Get static vs get server side props

  • دریافت استاتیک در مقابل دریافت لوازم جانبی سرور Get static vs get server side props

  • [سرور] برنامه Api [Server] Api app

  • [سرور] برنامه Api [Server] Api app

  • [سرور] نقاط پایانی Api [Server] Api endpoints

  • [سرور] منابع را از API دریافت کنید [Server] Get resources from API

  • دریافت اطلاعات از 3001 Get data from 3001

  • دریافت اطلاعات از 3001 Get data from 3001

  • Cors و Proxy Cors and Proxy

[پروژه 1]: واکشی داده ها [Project 1]: Data fetching

  • [سرور] نقاط پایانی Api [Server] Api endpoints

  • [سرور] منابع را از API دریافت کنید [Server] Get resources from API

  • Cors و Proxy Cors and Proxy

[پروژه 1]: فرم ها و ایجاد منبع [Project 1]: Forms & Create Resource

  • مهم! 13 به روز رسانی بعدی Important! Next 13 Updates

  • مهم! 13 به روز رسانی بعدی Important! Next 13 Updates

  • منبع صفحه جدید Resource new page

  • منبع صفحه جدید Resource new page

  • فرم منبع Resource form

  • ورودی های بیشتر More inputs

  • ورودی های بیشتر More inputs

  • مقادیر فرم Form values

  • فرم ارسال Form Submit

  • تغییر عنوان را کنترل کنید Handle title change

  • کنترل همه تغییرات ورودی Handle all inputs change

[پروژه 1]: فرم ها و ایجاد منبع [Project 1]: Forms & Create Resource

  • فرم منبع Resource form

  • مقادیر فرم Form values

  • فرم ارسال Form Submit

  • تغییر عنوان را کنترل کنید Handle title change

  • کنترل همه تغییرات ورودی Handle all inputs change

[پروژه 1]: درخواست ارسال [Project 1]: Post Request

  • ارسال درخواست پست Send a post request

  • ارسال درخواست پست Send a post request

  • داده ها را در درخواست ضمیمه کنید Attach data in the request

  • Axios Axios

  • Axios Axios

  • اعتبارسنجی داده ها Validate data

  • خطای گرفتن Catching error

  • خطای گرفتن Catching error

  • [سرور] نقطه پایانی پست [Server] post endpoint

  • [سرور] نقطه پایانی پست [Server] post endpoint

  • [سرور] نقطه پایانی پست به پایان می رسد [Server] finishing post endpoint

  • [سرور] نقطه پایانی پست به پایان می رسد [Server] finishing post endpoint

  • رسیدگی به درخواست پست در API Handling post request in API

  • پس از ایجاد تغییر مسیر دهید Redirect after create

[پروژه 1]: درخواست ارسال [Project 1]: Post Request

  • داده ها را در درخواست ضمیمه کنید Attach data in the request

  • اعتبارسنجی داده ها Validate data

  • رسیدگی به درخواست پست در API Handling post request in API

  • پس از ایجاد تغییر مسیر دهید Redirect after create

[پروژه 1]: جزئیات منابع [Project 1]: Resource Details

  • [سرور] منبع را با نقطه پایانی شناسه دریافت کنید [Server] get resource by ID endpoint

  • [سرور] منبع را با نقطه پایانی شناسه دریافت کنید [Server] get resource by ID endpoint

  • صفحه جزئیات منبع Resource detail page

  • اطلاعات واکشی صفحه منبع Resource page fetch data

  • اطلاعات واکشی صفحه منبع Resource page fetch data

  • پیوند به صفحه جزئیات Link to detail page

  • لوازم اولیه را دریافت کنید Get Initial Props

  • مسیرهای ثابت را دریافت کنید Get static paths

  • مسیرهای ثابت را دریافت کنید Get static paths

  • بازگشت واقعی است Fallback true

  • بازگشت واقعی است Fallback true

  • اعتبار مجدد Revalidate

  • اعتبار مجدد Revalidate

[پروژه 1]: جزئیات منابع [Project 1]: Resource Details

  • صفحه جزئیات منبع Resource detail page

  • پیوند به صفحه جزئیات Link to detail page

  • لوازم اولیه را دریافت کنید Get Initial Props

  • مسیرهای ثابت را دریافت کنید Get static paths

[پروژه 1]: ویرایش منابع [Project 1]: Resource Edit

  • صفحه ویرایش منابع Resource edit page

  • صفحه ویرایش منابع Resource edit page

  • جزء فرم منبع Resource Form Component

  • فرم ویرایش منابع Resource Edit Form

  • نقطه پایانی Resource Patch API Resource Patch API endpoint

  • نقطه پایانی Resource Patch API Resource Patch API endpoint

  • [سرور] نقطه پایانی پچ [Server] Patch Endpoint

[پروژه 1]: ویرایش منابع [Project 1]: Resource Edit

  • جزء فرم منبع Resource Form Component

  • فرم ویرایش منابع Resource Edit Form

  • [سرور] نقطه پایانی پچ [Server] Patch Endpoint

[پروژه 1]: منبع فعال [Project 1]: Active Resource

  • جزء منبع فعال Active resource component

  • درخواست پچ منبع فعال Active resource patch request

  • درخواست پچ منبع فعال Active resource patch request

  • [سرور] منبع را فعال کنید [Server] Activate resource

  • [سرور] نقطه پایانی منبع فعال [Server] Active resource endpoint

  • واکشی منبع فعال در بعدی Fetch active resource in next

  • واکشی منبع فعال در بعدی Fetch active resource in next

  • زمان اتمام در چند ثانیه Time to finish in seconds

  • حالت ثانیه Seconds state

  • حالت ثانیه Seconds state

[پروژه 1]: منبع فعال [Project 1]: Active Resource

  • جزء منبع فعال Active resource component

  • [سرور] منبع را فعال کنید [Server] Activate resource

  • [سرور] نقطه پایانی منبع فعال [Server] Active resource endpoint

  • زمان اتمام در چند ثانیه Time to finish in seconds

[پروژه 1]: بهبودهای UX [Project 1]: UX Improvements

  • بهبودهای UX UX improvements

  • منبع کامل Complete resource

  • منبع کامل Complete resource

  • [سرور] به روز رسانی منبع کامل را ممنوع کنید [Server] Forbid update of not complete resource

  • وضعیت منابع Resource Status

  • رنگ وضعیت منبع Resource status color

  • نمایش دکمه های غیرفعال Display buttons on inactive ones

  • نمایش دکمه های غیرفعال Display buttons on inactive ones

  • متغیرهای Env Env variables

[پروژه 1]: بهبودهای UX [Project 1]: UX Improvements

  • بهبودهای UX UX improvements

  • [سرور] به روز رسانی منبع کامل را ممنوع کنید [Server] Forbid update of not complete resource

  • وضعیت منابع Resource Status

  • رنگ وضعیت منبع Resource status color

  • متغیرهای Env Env variables

[پروژه 1]: استقرار [Project 1]: Deployment

  • Git & Heroku Git & Heroku

  • ارسال کد به Github Pushing Code to Github

  • ارسال کد به Github Pushing Code to Github

  • در حال اعزام به هروکو Deploying to Heroku

  • فایل env تولید Production env file

  • فایل env تولید Production env file

  • استقرار در Vercel Deployment To Vercel

[پروژه 1]: استقرار [Project 1]: Deployment

  • Git & Heroku Git & Heroku

  • در حال اعزام به هروکو Deploying to Heroku

  • استقرار در Vercel Deployment To Vercel

[پروژه 2]: شروع کننده (بدون سرور) [Project 2]: Starter(Serverless)

  • بخش معرفی Section Intro

  • نمونه کارها بعدی را راه اندازی کنید Init Next Portfolio

  • صفحات و هدر Pages and Header

  • صفحات و هدر Pages and Header

  • چیدمان پایه Base layout

  • چیدمان پایه Base layout

  • واکشی پست ها Fetch posts

  • واکشی پست ها Fetch posts

  • صفحه جزئیات نمونه کارها Portfolio detail page

  • صفحه جزئیات نمونه کارها Portfolio detail page

  • دریافت پست با شناسه Get post by id

  • اشکال زدایی Debug

  • اشکال زدایی Debug

  • Reactstrap Reactstrap

  • Reactstrap Reactstrap

  • فونت ها Fonts

  • فونت ها Fonts

  • یک ظاهر طراحی شده Scss Scss styling

  • بهبود چیدمان Layout Improvement

  • سرتیتر Header

  • سرتیتر Header

  • خود تایپ شده Self Typed

  • خود تایپ شده Self Typed

  • صفحه پایه Base Page

  • قبل از تماشا توجه داشته باشید Note Before Watching

  • قبل از تماشا توجه داشته باشید Note Before Watching

  • مسیر مطلق Absolute path

  • دکمه ورود Login button

  • دکمه ورود Login button

  • توابع Api - قسمت 1 Api functions - part 1

  • توابع Api - قسمت 1 Api functions - part 1

  • توابع Api - قسمت 2 Api functions - part 2

  • توابع Api - قسمت 2 Api functions - part 2

  • توابع Api - قسمت 3 Api functions - part 3

  • توابع Api - قسمت 3 Api functions - part 3

  • وضعیت بارگیری Loading state

  • وضعیت بارگیری Loading state

  • دریافت پست با شناسه Fetch post by ID

  • استفاده ازSWR useSWR

  • استفاده ازSWR توسط ID useSWR by ID

[پروژه 2]: شروع کننده (بدون سرور) [Project 2]: Starter(Serverless)

  • بخش معرفی Section Intro

  • نمونه کارها بعدی را راه اندازی کنید Init Next Portfolio

  • دریافت پست با شناسه Get post by id

  • Reactstrap Reactstrap

  • فونت ها Fonts

  • یک ظاهر طراحی شده Scss Scss styling

  • بهبود چیدمان Layout Improvement

  • صفحه پایه Base Page

  • مسیر مطلق Absolute path

  • دریافت پست با شناسه Fetch post by ID

  • استفاده ازSWR useSWR

  • استفاده ازSWR توسط ID useSWR by ID

[پروژه 2]: احراز هویت [Project 2]: Authentication

  • بخش معرفی Section Intro

  • Auth0 ثبت نام Auth0 Registration

  • به روز رسانی های جدید Auth0! New Auth0 Updates!

  • ورود به API Route Login API Route

  • ورود به API Route Login API Route

  • پکیج Webpack Dotenv Webpack Dotenv package

  • متغیرهای Env Env Variables

  • صفحه ورود Login Screen

  • ورود به سیستم کار کند Get login working

  • ورود به سیستم کار کند Get login working

  • دریافت کاربر Get User

  • دریافت کاربر Get User

  • ارسال کاربر به طرح Pass user to layout

  • ارسال کاربر به طرح Pass user to layout

  • خروج Logout

  • خروج Logout

  • صفحه مخفی Secret page

  • صفحه مخفی Secret page

  • تغییر مسیر Redirect

  • تغییر مسیر Redirect

  • شروع HOC HOC Start

  • شروع HOC HOC Start

  • با Auth HOC withAuth HOC

  • لوازم جانبی سرور Server side props

  • لوازم جانبی سرور Server side props

  • سمت سرور دوباره کار کنید Rework server side

  • سمت سرور دوباره کار کنید Rework server side

  • با سمت سرور Auth withAuth Server side

  • با سمت سرور Auth withAuth Server side

  • درباره نقش ها About Roles

  • حقوق مدیریت Admin Rights

  • مدیریت SSR Admin SSR

  • مدیریت SSR Admin SSR

  • متغیرهای ENV ENV Variables

[پروژه 2]: احراز هویت [Project 2]: Authentication

  • Auth0 ثبت نام Auth0 Registration

  • به روز رسانی های جدید Auth0! New Auth0 Updates!

  • پکیج Webpack Dotenv Webpack Dotenv package

  • متغیرهای Env Env Variables

  • صفحه ورود Login Screen

  • با Auth HOC withAuth HOC

  • درباره نقش ها About Roles

  • حقوق مدیریت Admin Rights

  • متغیرهای ENV ENV Variables

[پروژه 2]: ویژگی نمونه کارها [Project 2]: Portfolio Feature

  • بخش معرفی Section Intro

  • سرور API API Server

  • Git Ignore Git Ignore

  • Git Ignore Git Ignore

  • مسیرها و کنترلرها Routes and Controllers

  • Mongo DB Mongo DB

  • تغییرات ساختاری در DB Structural changes in DB

  • داده های نمونه کارها را ایجاد کنید Create portfolio data

  • DB را پر کنید Populate DB

  • نمونه کارها را با شناسه دریافت کنید Get portfolio by ID

  • نمونه کارها را دریافت کنید Get Portfolios

  • نمونه کارها را دریافت کنید Get Portfolios

  • کارت نمونه کارها Portfolio Card

  • کارت نمونه کارها Portfolio Card

  • استایل های صفحه پایه Base Page Stylings

  • سمت سرور نمونه کارها را دریافت کنید Get portfolio server side

  • مسیرهای ثابت را دریافت کنید Get static paths

  • مسیرهای ثابت را دریافت کنید Get static paths

  • SSR در مقابل استاتیک SSR vs Static

  • نمونه کارها صفحه "جدید". Portfolio "new" page

  • ارسال فرم Submit form

  • خرماگیر Datepicker

  • دسته خرما Handle Dates

  • غیرفعال کردن تاریخ پایان Disable end date

  • مسیر Api برای ایجاد نمونه کارها Api route to create portfolio

  • مسیر Api برای ایجاد نمونه کارها Api route to create portfolio

  • نقطه پایان نمونه کارها را ایجاد کنید Create portfolio endpoint

  • نقطه پایان نمونه کارها را ایجاد کنید Create portfolio endpoint

  • تست ایجاد نمونه کارها Testing create portfolio

  • تست ایجاد نمونه کارها Testing create portfolio

  • JWT Middleware JWT Middleware

  • JWT Middleware JWT Middleware

  • رمز دسترسی را دریافت کنید Get access token

  • نمونه کارها را از برنامه ایجاد کنید Create portfolio from App

  • نمونه کارها را از برنامه ایجاد کنید Create portfolio from App

  • تابع هوک برای ایجاد نمونه کارها Hook function to create portfolio

  • تابع هوک برای ایجاد نمونه کارها Hook function to create portfolio

  • ایجاد کننده قلاب - کنترل کننده Api Hook creator - Api handler

  • رسیدگی به خطاها Handle Errors

  • رسیدگی به خطاها Handle Errors

  • صفحه ویرایش نمونه کارها Portfolio edit page

  • صفحه ویرایش نمونه کارها Portfolio edit page

  • فرم را با داده ها از قبل پر کنید Pre-fill form with data

  • فرم را با داده ها از قبل پر کنید Pre-fill form with data

  • به روز رسانی نمونه کارها در سرور Update portfolio on Server

  • به روز رسانی در مشتری Update on client

  • پیام های نان تست Toast messages

  • پیام های نان تست Toast messages

  • رسیدگی به خطاها Handle errors

  • دکمه های ویرایش و حذف Edit and Delete buttons

  • روی سرور حذف کنید Delete on server

  • حذف در مشتری Delete on client

  • حذف در مشتری Delete on client

  • حذف از ایالت Delete from state

  • نقش روی سرور را بررسی کنید Check role on server

  • فهرست کشویی Dropdown menu

  • منوی کشویی انجام شد Dropdown menu done

  • منوی کشویی انجام شد Dropdown menu done

  • به روز رسانی های بعدی 9.4 - قسمت 1 Next 9.4 Updates - part 1

  • توجه: اعتبار مجدد Note: Revalidate

  • به روز رسانی های بعدی 9.4 - قسمت 2 Next 9.4 Updates - part 2

  • به روز رسانی های بعدی 9.4 - قسمت 2 Next 9.4 Updates - part 2

[پروژه 2]: ویژگی نمونه کارها [Project 2]: Portfolio Feature

  • بخش معرفی Section Intro

  • سرور API API Server

  • مسیرها و کنترلرها Routes and Controllers

  • Mongo DB Mongo DB

  • تغییرات ساختاری در DB Structural changes in DB

  • داده های نمونه کارها را ایجاد کنید Create portfolio data

  • DB را پر کنید Populate DB

  • نمونه کارها را با شناسه دریافت کنید Get portfolio by ID

  • استایل های صفحه پایه Base Page Stylings

  • سمت سرور نمونه کارها را دریافت کنید Get portfolio server side

  • مسیرهای ثابت را دریافت کنید Get static paths

  • SSR در مقابل استاتیک SSR vs Static

  • نمونه کارها صفحه "جدید". Portfolio "new" page

  • ارسال فرم Submit form

  • خرماگیر Datepicker

  • دسته خرما Handle Dates

  • غیرفعال کردن تاریخ پایان Disable end date

  • رمز دسترسی را دریافت کنید Get access token

  • ایجاد کننده قلاب - کنترل کننده Api Hook creator - Api handler

  • به روز رسانی نمونه کارها در سرور Update portfolio on Server

  • به روز رسانی در مشتری Update on client

  • رسیدگی به خطاها Handle errors

  • دکمه های ویرایش و حذف Edit and Delete buttons

  • روی سرور حذف کنید Delete on server

  • حذف از ایالت Delete from state

  • نقش روی سرور را بررسی کنید Check role on server

  • فهرست کشویی Dropdown menu

  • به روز رسانی های بعدی 9.4 - قسمت 1 Next 9.4 Updates - part 1

  • توجه: اعتبار مجدد Note: Revalidate

[پروژه 2]: ویژگی وبلاگ [Project 2]: Blog Feature

  • بخش معرفی Section Intro

  • ویرایشگر وبلاگ Blog Editor

  • پیاده سازی سرور وبلاگ Blog Server implementation

  • نقاط پایانی وبلاگ Blog endpoints

  • نقاط پایانی وبلاگ Blog endpoints

  • ایجاد وبلاگ در سرور Create blog on server

  • ایجاد وبلاگ از مشتری Create blog from client

  • تغییر مسیر به به روز رسانی وبلاگ Redirect to blog update

  • محتوای اولیه را برای به روز رسانی وبلاگ دریافت کنید Get initial content to blog update

  • محتوای اولیه را برای به روز رسانی وبلاگ دریافت کنید Get initial content to blog update

  • به روز رسانی وبلاگ در سرور Update blog on server

  • به روز رسانی وبلاگ در سرور Update blog on server

  • وبلاگ را از مشتری به روز کنید Update blog from client

  • پایه API Base API

  • پایه API Base API

  • صفحه داشبورد Dashboard page

  • صفحه داشبورد Dashboard page

  • واکشی وبلاگ ها توسط کاربر Fetch blogs by user

  • واکشی وبلاگ ها توسط کاربر Fetch blogs by user

  • وبلاگ ها را فیلتر کنید Filter blogs

  • وبلاگ ها را فیلتر کنید Filter blogs

  • کشویی در داشبورد Dropdown in dashboard

  • کشویی در داشبورد Dropdown in dashboard

  • گزینه ها را ایجاد کنید Generate options

  • گزینه ها را ایجاد کنید Generate options

  • Slugify عنوان Slugify title

  • Slugify عنوان Slugify title

  • وبلاگ را به روز کنید Update blog

  • تابع جهش Mutate function

  • تابع جهش Mutate function

  • راب های منحصر به فرد Unique slugs

  • راب های منحصر به فرد Unique slugs

  • حذف وبلاگ Delete blog

  • صفحه فهرست وبلاگ Blog index page

  • صفحه فهرست وبلاگ Blog index page

  • نمایش وبلاگ ها Display blogs

  • پیوند به جزئیات وبلاگ + تاریخ Link to blog detail + Dates

  • پیوند به جزئیات وبلاگ + تاریخ Link to blog detail + Dates

  • صفحه جزئیات وبلاگ Blog detail page

  • صفحه جزئیات وبلاگ Blog detail page

[پروژه 2]: ویژگی وبلاگ [Project 2]: Blog Feature

  • بخش معرفی Section Intro

  • ویرایشگر وبلاگ Blog Editor

  • پیاده سازی سرور وبلاگ Blog Server implementation

  • ایجاد وبلاگ در سرور Create blog on server

  • ایجاد وبلاگ از مشتری Create blog from client

  • تغییر مسیر به به روز رسانی وبلاگ Redirect to blog update

  • وبلاگ را از مشتری به روز کنید Update blog from client

  • وبلاگ را به روز کنید Update blog

  • حذف وبلاگ Delete blog

  • نمایش وبلاگ ها Display blogs

[پروژه 2]: بهبودهای UX [Project 2]: UX Improvements

  • بخش معرفی Section Intro

  • کارت را برگردانید Flip the card

  • صفحه درباره About page

  • تغییر اندازه کشویی Dropdown resizing

  • تغییر اندازه کشویی Dropdown resizing

  • بهبود صفحه اصلی Home screen improvements

  • بهبود صفحه اصلی Home screen improvements

  • لینک های فعال Active Links

  • لینک های فعال Active Links

  • صفحه رزومه CV Page

  • سعی کنید یک نشانه دسترسی دریافت کنید Try to get an access token

  • یک نشانه دسترسی دریافت کنید Get an access token

  • یک کاربر دریافت کنید Get a user

  • وبلاگ را با حلزون حل کنید Fix blog by slug

  • دریافت وبلاگ با کاربر Get blogs with user

  • دریافت وبلاگ با کاربر Get blogs with user

  • نمایش کاربر Display user

[پروژه 2]: بهبودهای UX [Project 2]: UX Improvements

  • بخش معرفی Section Intro

  • کارت را برگردانید Flip the card

  • صفحه درباره About page

  • صفحه رزومه CV Page

  • سعی کنید یک نشانه دسترسی دریافت کنید Try to get an access token

  • یک نشانه دسترسی دریافت کنید Get an access token

  • یک کاربر دریافت کنید Get a user

  • وبلاگ را با حلزون حل کنید Fix blog by slug

  • نمایش کاربر Display user

[پروژه 2]: سئو [Project 2]: SEO

  • بخش معرفی Section Intro

  • عنوان سر Head title

  • نوع صفحه فهرست Index page type

  • توضیحات متا Meta description

  • نمودار را باز کنید Open graph

  • ابتدایی Canonical

  • ابتدایی Canonical

  • فونت ها، تصاویر، فاویکون Fonts, images, favicon

  • فونت ها، تصاویر، فاویکون Fonts, images, favicon

  • اطلاعات بیشتر در مورد فونت More about fonts

  • اطلاعات بیشتر در مورد فونت More about fonts

  • جزئیات نمونه کارها Portfolio detail

  • داده های جزئیات نمونه کارها Portfolio detail data

  • تغییر تصاویر Change images

  • تغییر تصاویر Change images

[پروژه 2]: سئو [Project 2]: SEO

  • بخش معرفی Section Intro

  • عنوان سر Head title

  • نوع صفحه فهرست Index page type

  • توضیحات متا Meta description

  • نمودار را باز کنید Open graph

  • جزئیات نمونه کارها Portfolio detail

  • داده های جزئیات نمونه کارها Portfolio detail data

[پروژه 2]: استقرار [Project 2]: Deployment

  • بخش معرفی Section Intro

  • بخش معرفی Section Intro

  • شروع استقرار Deploying start

  • شروع استقرار Deploying start

  • API به heroku API to heroku

  • API به heroku API to heroku

  • اعزام به هروکو Deployment to Heroku

  • با صفحه html پاسخ دهید Respond with html page

  • با صفحه html پاسخ دهید Respond with html page

  • تست با PROD api Testing with PROD api

  • اصلاحات کوچک Small fixes

  • استقرار در Vercel Deployment to Vercel

  • آزمایش برنامه Next.js Testing Next.js app

  • آزمایش برنامه Next.js Testing Next.js app

  • پایان دوره Course Ending

  • پایان دوره Course Ending

[پروژه 2]: استقرار [Project 2]: Deployment

  • بخش معرفی Section Intro

  • اعزام به هروکو Deployment to Heroku

  • تست با PROD api Testing with PROD api

  • اصلاحات کوچک Small fixes

  • استقرار در Vercel Deployment to Vercel

[پروژه 3]: برنامه فیلم، مبانی [Project 3]: Movie App, Basics

  • راه اندازی برنامه Application Initialization

  • راه اندازی برنامه Application Initialization

  • ایجاد صفحه فهرست Create index page

  • ایجاد صفحه فهرست Create index page

  • اجزای عملکردی Functional Components

  • اجزای کلاس Class Components

  • اجزای کلاس Class Components

  • قطعات قابل استفاده مجدد Reusable Components

  • قطعات قابل استفاده مجدد Reusable Components

  • برخی از سبک های اولیه Some basics styles

  • برخی از سبک های اولیه Some basics styles

  • دولت چیست What is the State

  • دولت چیست What is the State

  • بیایید حالت را جهش دهیم Let's mutate State

  • بیایید حالت را جهش دهیم Let's mutate State

  • اشتباهات رایج با دولت Common mistakes with State

  • اشتباهات رایج با دولت Common mistakes with State

  • وضعیت جزء عملکردی State of functional component

  • وضعیت جزء عملکردی State of functional component

  • لوازم جانبی چیست What are props

  • لوازم جانبی چیست What are props

  • برنامه وب چگونه کار می کند How web app works

  • تکرار روی فهرست داده ها Iterate over list of data

  • عملکرد کوتاه کردن Shorten Function

  • عملکرد کوتاه کردن Shorten Function

  • داده های فیلم را به فروشگاه منتقل کنید Move movie data to Store

  • دریافت داده های فیلم + وعده ها Get movie data + Promises

  • دریافت داده های فیلم + وعده ها Get movie data + Promises

  • از افکت استفاده کنید Use Effect

  • دریافت فیلم در جزء کلاس Get movies in class component

  • گرفتن خطا در Promise Catch error in Promise

  • لوازم اولیه را دریافت کنید Get initial props

  • صفحات بیشتر، لینک های بیشتر More pages, more links

  • ظرف برنامه App container

  • ظرف برنامه App container

  • لوازم کانتینر برنامه App container props

  • صفحه جزئیات فیلم Detail page of movie

  • دریافت فیلم با آیدی Get movie by id

  • پیوندها را در صفحه جزئیات اصلاح کنید Fix links in detail page

  • صفحه جزئیات را تمام می کند Finishes detail page

  • صفحه جزئیات را تمام می کند Finishes detail page

  • از فیلم ها عکس بگیرید Get images from movies

  • از فیلم ها عکس بگیرید Get images from movies

  • نمایش تصاویر جلد Display cover images

  • دسته بندی ها را دریافت کنید Get categories

  • اجرای Modal + Close Modal Modal implementation + Close Modal

  • فرم ایجاد فیلم & Containment Form to create movie & Containment

  • فرم ایجاد فیلم & Containment Form to create movie & Containment

  • مقادیر را از فرم دریافت کنید Get values from the form

  • مدیریت تغییرات ژانر Handle genre changes

  • مدیریت تغییرات ژانر Handle genre changes

  • رسیدگی به فرم ارسال Handle form submit

  • بستن عملکرد داده های Modal & Uncontrolled Close Modal & Uncontrolled data functionality

  • شناسه فیلم را ارائه دهید Provide ID of movie

  • شناسه فیلم را ارائه دهید Provide ID of movie

  • پیاده سازی سرور پایه Base server implementation

  • پیاده سازی سرور پایه Base server implementation

  • اطلاعات بیشتر در مورد سرور More about Server

  • دریافت فیلم از سرور Getting movies from server

  • دریافت فیلم با شناسه Get movie by ID

  • ذخیره فیلم ها Saving movies

  • ذخیره فیلم ها Saving movies

  • حذف فیلم Delete movie

  • ویرایش صفحه برای فیلم Edit page for movie

  • ویرایش صفحه برای فیلم Edit page for movie

  • داده ها را برای ویرایش صفحه ارائه دهید Provide data to Edit page

  • داده ها را برای ویرایش صفحه ارائه دهید Provide data to Edit page

  • آخرین اقدامات بر روی عملکرد به‌روزرسانی فیلم‌ها Final touches on Update movies functionality

  • آخرین اقدامات بر روی عملکرد به‌روزرسانی فیلم‌ها Final touches on Update movies functionality

  • رفع ناوبری Navigation fixes

  • با فیلتر کردن شروع کنید Starting with filtering

  • فیلترینگ به پایان رسید Filtering finished

  • فیلترینگ به پایان رسید Filtering finished

  • بهبود استایل Styling improvements

  • بهبود استایل Styling improvements

  • نقاط پایانی API API Endpoints

  • نقاط پایانی API API Endpoints

  • ارسال نقطه پایانی Post endpoint

  • ارسال نقطه پایانی Post endpoint

[پروژه 3]: برنامه فیلم، مبانی [Project 3]: Movie App, Basics

  • اجزای عملکردی Functional Components

  • برنامه وب چگونه کار می کند How web app works

  • تکرار روی فهرست داده ها Iterate over list of data

  • داده های فیلم را به فروشگاه منتقل کنید Move movie data to Store

  • از افکت استفاده کنید Use Effect

  • دریافت فیلم در جزء کلاس Get movies in class component

  • گرفتن خطا در Promise Catch error in Promise

  • لوازم اولیه را دریافت کنید Get initial props

  • صفحات بیشتر، لینک های بیشتر More pages, more links

  • لوازم کانتینر برنامه App container props

  • صفحه جزئیات فیلم Detail page of movie

  • دریافت فیلم با آیدی Get movie by id

  • پیوندها را در صفحه جزئیات اصلاح کنید Fix links in detail page

  • نمایش تصاویر جلد Display cover images

  • دسته بندی ها را دریافت کنید Get categories

  • اجرای Modal + Close Modal Modal implementation + Close Modal

  • مقادیر را از فرم دریافت کنید Get values from the form

  • رسیدگی به فرم ارسال Handle form submit

  • بستن عملکرد داده های Modal & Uncontrolled Close Modal & Uncontrolled data functionality

  • اطلاعات بیشتر در مورد سرور More about Server

  • دریافت فیلم از سرور Getting movies from server

  • دریافت فیلم با شناسه Get movie by ID

  • حذف فیلم Delete movie

  • رفع ناوبری Navigation fixes

  • با فیلتر کردن شروع کنید Starting with filtering

[پروژه 4]: شروع کننده (میراث) [Project 4]: Starter(Legacy)

  • اطلاعات میراث Legacy Info

  • شروع پروژه Project Init

  • صفحات بیشتر + سرصفحه More pages + Header

  • چیدمان پایه Base Layout

  • چیدمان پایه Base Layout

  • سبک ها Styles

  • ارسال داده ها Post Data

  • ارسال داده ها Post Data

  • جزئیات نمونه کارها Portfolio Detail

  • جزئیات نمونه کارها Portfolio Detail

  • نمونه کارها را با شناسه دریافت کنید Get portfolio by ID

  • نمونه کارها را با شناسه دریافت کنید Get portfolio by ID

  • سرور سفارشی Custom server

  • سرور سفارشی Custom server

  • مسیرهای بعدی Next routes

  • مسیرهای بعدی Next routes

  • Reactstrap Reactstrap

  • Reactstrap Reactstrap

  • فونت ها Fonts

  • فونت ها Fonts

  • پاکسازی + اشکال زدایی Cleanup + Debugging

  • چیدمان مناسب Proper layout

  • چیدمان مناسب Proper layout

  • کتابخانه Typed.js Typed.js Library

  • کتابخانه Typed.js Typed.js Library

  • ادغام هدر قسمت 1 Header Integration part 1

  • ادغام هدر قسمت 1 Header Integration part 1

  • ادغام هدر قسمت 2 Header Integration part 2

  • ادغام هدر قسمت 2 Header Integration part 2

  • کامپوننت صفحه پایه و لوازم پیش فرض Base Page Component and Default Props

[پروژه 4]: شروع کننده (میراث) [Project 4]: Starter(Legacy)

  • اطلاعات میراث Legacy Info

  • شروع پروژه Project Init

  • صفحات بیشتر + سرصفحه More pages + Header

  • سبک ها Styles

  • Reactstrap Reactstrap

  • فونت ها Fonts

  • پاکسازی + اشکال زدایی Cleanup + Debugging

  • کامپوننت صفحه پایه و لوازم پیش فرض Base Page Component and Default Props

[پروژه 4]: احراز هویت با Auth0 [Project 4]: Authentication with Auth0

  • دکمه های شروع، ورود و خروج تأیید اعتبار Auth Start, Login and Logout Buttons

  • ایجاد و سرویس برنامه Auth0 Auth0 App Creation and Service

  • ایجاد و سرویس برنامه Auth0 Auth0 App Creation and Service

  • صفحه احراز هویت و تماس را کنترل کنید Handle Authentication and Callback Page

  • صفحه احراز هویت و تماس را کنترل کنید Handle Authentication and Callback Page

  • صفحه برگشت به تماس و تغییر مسیر کاربر Callback Page and Redirect User

  • صفحه برگشت به تماس و تغییر مسیر کاربر Callback Page and Redirect User

  • Google Setup Auth0 Google Setup Auth0

  • Google Setup Auth0 Google Setup Auth0

  • توکن ها را در کوکی ها ذخیره کنید Save Tokens in Cookies

  • توکن ها را در کوکی ها ذخیره کنید Save Tokens in Cookies

  • نمایش/پنهان کردن دکمه های ورود Display/Hide Login Buttons

  • نمایش/پنهان کردن دکمه های ورود Display/Hide Login Buttons

  • کوکی ها را از سرور/مشتری دریافت کنید Get Cookies from Server / Client

  • کوکی ها را از سرور/مشتری دریافت کنید Get Cookies from Server / Client

  • هدر را درباره احراز هویت اطلاع دهید Inform Header About Authentication

  • بهبود زمان انقضای توکن را تأیید کنید Verify Token Expiration Time Improvement

  • Auth Debugging & Display User Auth Debugging & Display User

  • JWKS امضای رمز را تأیید می کند JWKS verify token signature

  • اشکال زدایی و توضیح JWKS JWKS Debugging and Explanation

  • اشکال زدایی و توضیح JWKS JWKS Debugging and Explanation

  • رفع رمز رمزگشایی شده! Decoded Token Fix!

  • رفع رمز رمزگشایی شده! Decoded Token Fix!

  • صفحه محافظت شده مخفی Secret Protected Page

  • (HOC) اجزای سفارش بالا - شروع (HOC) High Order Components - Start

  • (HOC) اجزای سفارش بالا - شروع (HOC) High Order Components - Start

  • withAuth HOC - getInitialProps withAuth HOC - getInitialProps

  • withAuth HOC - getInitialProps withAuth HOC - getInitialProps

  • سرور نقطه پایان مخفی Secret Endpoint Server

  • سرور نقطه پایان مخفی Secret Endpoint Server

  • بررسی JWT معرفی Middlewares CheckJWT Intro to Middlewares

  • CheckJWT Real Middleware قسمت 1 CheckJWT Real Middleware part 1

  • CheckJWT Real Middleware قسمت 1 CheckJWT Real Middleware part 1

  • CheckJWT Real Middleware قسمت 2 CheckJWT Real Middleware part 2

  • CheckJWT Real Middleware قسمت 2 CheckJWT Real Middleware part 2

  • هدرهای Axios Auth Axios Auth Headers

  • درخواست مجوز در Get Initial Props Authorise Request in Get Initial Props

  • نقش ها در Auth0 Roles in Auth0

  • نقش ها در Auth0 Roles in Auth0

  • HOC برای بررسی یک نقش HOC to check a Role

  • HOC برای بررسی یک نقش HOC to check a Role

  • مجوز نقش سمت سرور Server Side Role Authorization

[پروژه 4]: احراز هویت با Auth0 [Project 4]: Authentication with Auth0

  • دکمه های شروع، ورود و خروج تأیید اعتبار Auth Start, Login and Logout Buttons

  • هدر را درباره احراز هویت اطلاع دهید Inform Header About Authentication

  • بهبود زمان انقضای توکن را تأیید کنید Verify Token Expiration Time Improvement

  • Auth Debugging & Display User Auth Debugging & Display User

  • JWKS امضای رمز را تأیید می کند JWKS verify token signature

  • صفحه محافظت شده مخفی Secret Protected Page

  • بررسی JWT معرفی Middlewares CheckJWT Intro to Middlewares

  • هدرهای Axios Auth Axios Auth Headers

  • درخواست مجوز در Get Initial Props Authorise Request in Get Initial Props

  • مجوز نقش سمت سرور Server Side Role Authorization

[پروژه 4]: ویژگی نمونه کارها [Project 4]: Portfolio Feature

  • سربرگ های مختلف Different Headers

  • یک ظاهر طراحی کارت نمونه کارها Portfolio Card Styling

  • React Simple Form React Simple Form

  • انواع ورودی بیشتر More Input Types

  • انواع ورودی بیشتر More Input Types

  • معرفی فرمیک Formik Intro

  • معرفی فرمیک Formik Intro

  • ورودی های خاص فورمیک Formik Specific Inputs

  • Formik + Bootstrap Formik + Bootstrap

  • کامپوننت جداگانه فرمیک Formik Separate Component

  • اعتبار سنجی فرم با Formik Validate Form with Formik

  • اعتبار سنجی فرم با Formik Validate Form with Formik

  • مؤلفه انتخابگر تاریخ Date Picker Component

  • انتخابگر تاریخ سبک Style Date Picker

  • توضیح رویداد در مورد تغییر On Change Event Explanation

  • اعتبارسنجی تاریخ Date Validation

  • غیرفعال کردن تاریخ پایان Disable End Date

  • تغییرات استایل پورتفولیو + Refactor کوچک Portfolio Styling Changes + Small Refactor

  • تغییرات پایگاه داده Database Changes

  • تغییرات پایگاه داده Database Changes

  • معرفی MongoDB MongoDB Intro

  • معرفی MongoDB MongoDB Intro

  • پوشه پیکربندی Dev.js Config Folder Dev.js

  • پوشه پیکربندی Dev.js Config Folder Dev.js

  • مدل کتاب + مسیر پست Book Model + Post Route

  • کتاب‌ها بیشتر نقاط پایانی Books More Endpoints

  • کتاب مسیرها و کنترلرها Books Routes & Controllers

  • مدل نمونه کارها Portfolio Model

  • کنترلرها و مسیرها Portfolios Controllers & Routes

  • به روز رسانی نمونه کارها و حذف نقطه پایانی Portfolio Update & Delete Endpoint

  • نمونه کارها را در سمت مشتری دریافت کنید Get Portfolios on Client Side

  • نمونه کارها را در سمت مشتری دریافت کنید Get Portfolios on Client Side

  • نمونه کارها را از برنامه مشتری ایجاد کنید Create Portfolio from Client App

  • نمونه کارها را از برنامه مشتری ایجاد کنید Create Portfolio from Client App

  • رسیدگی به خطا در فرم ایجاد Handle Error in Create Form

  • رفع اعتبار + تغییر مسیر Fix Validation + Redirect

  • صفحه به روز رسانی نمونه کارها، نمونه کارها را بر اساس شناسه دریافت کنید Portfolio Update Page, Get Portfolio By Id

  • مقادیر اولیه در فرم نمونه کارها Initial Values in Portfolio Form

  • به روز رسانی نمونه کارها در مشتری Update Portfolio on Client

  • به روز رسانی نمونه کارها در مشتری Update Portfolio on Client

  • تست عملکرد به روز رسانی Testing Update Functionality

  • تست عملکرد به روز رسانی Testing Update Functionality

  • ناوبری دکمه های رابط کاربری UI Buttons Navigation

  • پنهان کردن دکمه‌ها برای کاربرانی که وارد نشده‌اند Hide Buttons for not Logged in Users

  • مشتری نمونه کارها را حذف کنید Delete Portfolio Client

  • مشتری نمونه کارها را حذف کنید Delete Portfolio Client

  • معرفی نمونه کارها Portfolio Modal Intro

  • معرفی نمونه کارها Portfolio Modal Intro

  • Modal را با داده های نمونه کارها پر کنید Fill Modal with Portfolio Data

  • توقف انتشار با کلیک Stop Propagation on Click

  • توقف انتشار با کلیک Stop Propagation on Click

  • مرتب سازی تاریخ و پنهان کردن رفع تاریخ اولیه Sort Date & Hide Initial Date Fix

[پروژه 4]: ویژگی نمونه کارها [Project 4]: Portfolio Feature

  • سربرگ های مختلف Different Headers

  • یک ظاهر طراحی کارت نمونه کارها Portfolio Card Styling

  • React Simple Form React Simple Form

  • ورودی های خاص فورمیک Formik Specific Inputs

  • Formik + Bootstrap Formik + Bootstrap

  • کامپوننت جداگانه فرمیک Formik Separate Component

  • مؤلفه انتخابگر تاریخ Date Picker Component

  • انتخابگر تاریخ سبک Style Date Picker

  • توضیح رویداد در مورد تغییر On Change Event Explanation

  • اعتبارسنجی تاریخ Date Validation

  • غیرفعال کردن تاریخ پایان Disable End Date

  • تغییرات استایل پورتفولیو + Refactor کوچک Portfolio Styling Changes + Small Refactor

  • مدل کتاب + مسیر پست Book Model + Post Route

  • کتاب‌ها بیشتر نقاط پایانی Books More Endpoints

  • کتاب مسیرها و کنترلرها Books Routes & Controllers

  • مدل نمونه کارها Portfolio Model

  • کنترلرها و مسیرها Portfolios Controllers & Routes

  • به روز رسانی نمونه کارها و حذف نقطه پایانی Portfolio Update & Delete Endpoint

  • رسیدگی به خطا در فرم ایجاد Handle Error in Create Form

  • رفع اعتبار + تغییر مسیر Fix Validation + Redirect

  • صفحه به روز رسانی نمونه کارها، نمونه کارها را بر اساس شناسه دریافت کنید Portfolio Update Page, Get Portfolio By Id

  • مقادیر اولیه در فرم نمونه کارها Initial Values in Portfolio Form

  • ناوبری دکمه های رابط کاربری UI Buttons Navigation

  • پنهان کردن دکمه‌ها برای کاربرانی که وارد نشده‌اند Hide Buttons for not Logged in Users

  • Modal را با داده های نمونه کارها پر کنید Fill Modal with Portfolio Data

  • مرتب سازی تاریخ و پنهان کردن رفع تاریخ اولیه Sort Date & Hide Initial Date Fix

[پروژه 4]: ویژگی وبلاگ - ویرایشگر Slate [Project 4]: Blog Feature - Slate Editor

  • لیست وبلاگ Blog Listing

  • لیست وبلاگ Blog Listing

  • رفع دکمه ورود فهرست وبلاگ Blog Listing Login Button Fix

  • رفع دکمه ورود فهرست وبلاگ Blog Listing Login Button Fix

  • معرفی ویرایشگر Slate Slate Editor Intro

  • معرفی ویرایشگر Slate Slate Editor Intro

  • رویداد Handler در Slate Event Handler in Slate

  • رویداد Handler در Slate Event Handler in Slate

  • تخته سنگ سفارشی بلوک Custom Blocks Slate

  • تخته سنگ علامت های سفارشی Custom Marks Slate

  • تخته سنگ علامت های سفارشی Custom Marks Slate

  • نشانگر شروع منو Hover Menu Start

  • منوی نشانگر اشکال زدایی Hover Menu Debugging

  • دکمه های بلوک منو را نگه دارید Hover Menu Block Buttons

  • دکمه های بلوک منو را نگه دارید Hover Menu Block Buttons

  • اشکال زدایی قالب بندی بلوک Block Formatting Debugging

  • اشکال زدایی قالب بندی بلوک Block Formatting Debugging

  • بهبود استایل ویرایشگر Styling Improvement of Editor

  • بهبود استایل ویرایشگر Styling Improvement of Editor

[پروژه 4]: ویژگی وبلاگ - ویرایشگر Slate [Project 4]: Blog Feature - Slate Editor

  • تخته سنگ سفارشی بلوک Custom Blocks Slate

  • نشانگر شروع منو Hover Menu Start

  • منوی نشانگر اشکال زدایی Hover Menu Debugging

[پروژه 4]: ویژگی پیشرفته وبلاگ [Project 4]: Advance Blog Feature

  • مدل وبلاگ Blog Model

  • مدل وبلاگ Blog Model

  • رفع تاریخ در مدل Date Fix in Model

  • رفع تاریخ در مدل Date Fix in Model

  • پست وبلاگ Endopoint POST Blog Endopoint

  • پست وبلاگ Endopoint POST Blog Endopoint

  • دریافت Blog By Id Endpoint Get Blog By Id Endpoint

  • منوی کنترل Controll Menu

  • ذخیره وبلاگ قسمت 1 Save Blog part 1

  • ذخیره وبلاگ قسمت 2 Save Blog part 2

  • ذخیره وبلاگ قسمت 2 Save Blog part 2

  • ذخیره وبلاگ قسمت 3 Save Blog part 3

  • Serialise & Deserialise مقدمه Serialise & Deserialise Introduction

  • Serialise & Deserialise مقدمه Serialise & Deserialise Introduction

  • اصلاح قوانین سریال Serialise Rules Fix

  • اصلاح قوانین سریال Serialise Rules Fix

  • سریال به HTML Serialise to HTML

  • ذخیره عمل وبلاگ Save Blog Action

  • ذخیره عمل وبلاگ Save Blog Action

  • هنگام ذخیره کردن، دکمه ذخیره را غیرفعال کنید Disable Save Button while Saving

  • صفحه به روز رسانی ویرایشگر وبلاگ Blog Editor Update Page

  • مقدار اولیه برای صفحه ویرایشگر وبلاگ Initial Value for Blog Editor Page

  • مقدار اولیه برای صفحه ویرایشگر وبلاگ Initial Value for Blog Editor Page

  • پس از ذخیره تغییر مسیر دهید Redirect After Save

  • ذخیره وبلاگ - درخواست را قفل کنید Save Blog - Lock the request

  • ذخیره وبلاگ - درخواست را قفل کنید Save Blog - Lock the request

  • سرور وبلاگ را به روز کنید Update Blog Server

  • سرور وبلاگ را به روز کنید Update Blog Server

  • کلاینت وبلاگ را به روز کنید Update Blog Client

  • کلاینت وبلاگ را به روز کنید Update Blog Client

  • ذخیره میانبر وبلاگ Save Blog Shortcut

  • ذخیره میانبر وبلاگ Save Blog Shortcut

  • پیام های توستر وبلاگ Blog Toaster Messages

  • پیام های توستر وبلاگ Blog Toaster Messages

  • صفحه داشبورد وبلاگ های کاربر User Blogs Dashboard Page

  • صفحه داشبورد وبلاگ های کاربر User Blogs Dashboard Page

  • دریافت وبلاگ های خاص کاربر Get User Specific Blogs

  • دریافت وبلاگ های خاص کاربر Get User Specific Blogs

  • نمایش وبلاگ های کاربران Display User Blogs

  • نمایش وبلاگ های کاربران Display User Blogs

  • منوی کشویی برای شروع وبلاگ Dropdown Menu for the Blog Init

  • گزینه های پویا برای منوی کشویی Dynamic Options for Dropdown Menu

  • گزینه های پویا برای منوی کشویی Dynamic Options for Dropdown Menu

  • کنترل کننده های کشویی Dropdown Handlers

  • کنترل کننده های کشویی Dropdown Handlers

  • درباره Slug بیاموزید Learn about Slug

  • انتشار پیش نویس وبلاگ ها Publish Draft Blogs

  • حذف و دریافت وبلاگ های منتشر شده در سرور Delete and Get Published Blogs on the Server

  • حذف وبلاگ از برنامه Delete Blog from the App

  • دریافت و نمایش وبلاگ های منتشر شده Get & Display Published Blogs

  • دریافت و نمایش وبلاگ های منتشر شده Get & Display Published Blogs

  • جزئیات صفحه وبلاگ - دریافت صفحه توسط اسلاگ Detail Blog Page - Get Page by Slug

  • جزئیات صفحه وبلاگ - دریافت صفحه توسط اسلاگ Detail Blog Page - Get Page by Slug

  • جزئیات صفحه وبلاگ کامل شد Detail Blog Page Complete

  • جزئیات صفحه وبلاگ کامل شد Detail Blog Page Complete

  • خلاصه بخش 1 Recap of Section part 1

  • خلاصه بخش 2 Recap of Section part 2

  • خلاصه بخش 2 Recap of Section part 2

[پروژه 4]: ویژگی پیشرفته وبلاگ [Project 4]: Advance Blog Feature

  • دریافت Blog By Id Endpoint Get Blog By Id Endpoint

  • منوی کنترل Controll Menu

  • ذخیره وبلاگ قسمت 1 Save Blog part 1

  • ذخیره وبلاگ قسمت 3 Save Blog part 3

  • سریال به HTML Serialise to HTML

  • هنگام ذخیره کردن، دکمه ذخیره را غیرفعال کنید Disable Save Button while Saving

  • صفحه به روز رسانی ویرایشگر وبلاگ Blog Editor Update Page

  • پس از ذخیره تغییر مسیر دهید Redirect After Save

  • منوی کشویی برای شروع وبلاگ Dropdown Menu for the Blog Init

  • درباره Slug بیاموزید Learn about Slug

  • انتشار پیش نویس وبلاگ ها Publish Draft Blogs

  • حذف و دریافت وبلاگ های منتشر شده در سرور Delete and Get Published Blogs on the Server

  • حذف وبلاگ از برنامه Delete Blog from the App

  • خلاصه بخش 1 Recap of Section part 1

[پروژه 4]: بهبود تجربه کاربری صفحه [Project 4]: Page UX Improvement

  • درباره صفحه About Page

  • درباره صفحه About Page

  • کارت برگردان قسمت 1 Flipping Card part 1

  • Flipping Card قسمت 2 Flipping Card part 2

  • Flipping Card قسمت 2 Flipping Card part 2

  • کارت برگردان قسمت 3 Flipping Card part 3

  • لینک فعال قسمت 1 Active Link part 1

  • لینک فعال قسمت 1 Active Link part 1

  • لینک فعال قسمت 2 Active Link part 2

  • وبلاگ های کشویی برای صاحب سایت Dropdown Blogs for Site Owner

  • وبلاگ های کشویی برای صاحب سایت Dropdown Blogs for Site Owner

  • رفع سبک وبلاگ های کشویی Dropdown Blogs Styling Fixes

  • تنظیم فاصله زمانی انیمیشن رفع Set Interval Animation Fix

  • رفع منوی کشویی در صفحه نمایش های کوچکتر Dropdown Menu on Smaller Screens Fix

  • ارتفاع تصویر در صفحات کوچکتر Height of the Image on Smaller Screens

  • صفحه رزومه CV Page

  • صفحه رزومه CV Page

[پروژه 4]: بهبود تجربه کاربری صفحه [Project 4]: Page UX Improvement

  • کارت برگردان قسمت 1 Flipping Card part 1

  • کارت برگردان قسمت 3 Flipping Card part 3

  • لینک فعال قسمت 2 Active Link part 2

  • رفع سبک وبلاگ های کشویی Dropdown Blogs Styling Fixes

  • تنظیم فاصله زمانی انیمیشن رفع Set Interval Animation Fix

  • رفع منوی کشویی در صفحه نمایش های کوچکتر Dropdown Menu on Smaller Screens Fix

  • ارتفاع تصویر در صفحات کوچکتر Height of the Image on Smaller Screens

[پروژه 4]: بهبود سئو [Project 4]: SEO Improvements

  • توضیح عنوان Title Explanation

  • توضیح عنوان Title Explanation

  • توضیحات را فراموش نکنید Don't forget about Description

  • نمودار را باز کنید Open Graph

  • نمودار را باز کنید Open Graph

  • ربات ها Robots

  • ربات ها Robots

  • Cannonical & H1 & Alt Cannonical & H1 & alt

  • فاویکون Favicon

[پروژه 4]: بهبود سئو [Project 4]: SEO Improvements

  • توضیحات را فراموش نکنید Don't forget about Description

  • Cannonical & H1 & Alt Cannonical & H1 & alt

  • فاویکون Favicon

[پروژه 4]: برای استقرار آماده شوید [Project 4]: Get Ready for Deploy

  • تغییرات کوچک پیش از استقرار Small pre-deploy Changes

  • تنظیم متغیرهای محیطی Setup Environment Variables

  • تنظیم متغیرهای محیطی Setup Environment Variables

  • تنظیم فضای نام Setup Namespace

  • تنظیم فضای نام Setup Namespace

  • تنظیم تولید Mongo DB و Auth0 Mongo DB & Auth0 Production Setup

  • تنظیم تولید Mongo DB و Auth0 Mongo DB & Auth0 Production Setup

  • اولین استقرار First Deployment

  • بهبود عملکرد - تصاویر و JS Performance Improvements - Images & JS

  • بهبود عملکرد - تصاویر و JS Performance Improvements - Images & JS

  • CSS را بهینه کنید Optimise CSS

  • بارگذاری فونت ها در Client Load fonts on Client

  • بارگذاری فونت ها در Client Load fonts on Client

  • استقرار و تست بعد از فونت Deploy & Test after Fonts

  • فونت‌های Google & Deploy Google Fonts & Deploy

  • فونت‌های Google & Deploy Google Fonts & Deploy

  • استقرار و آزمایش نهایی Final Deploy and Test

  • استقرار و آزمایش نهایی Final Deploy and Test

  • تصحیح عنوان سرصفحه Header Title Fix

  • تصحیح عنوان سرصفحه Header Title Fix

  • کلمات پایانی Final Words

[پروژه 4]: برای استقرار آماده شوید [Project 4]: Get Ready for Deploy

  • تغییرات کوچک پیش از استقرار Small pre-deploy Changes

  • اولین استقرار First Deployment

  • CSS را بهینه کنید Optimise CSS

  • استقرار و تست بعد از فونت Deploy & Test after Fonts

  • کلمات پایانی Final Words

[اختیاری]: راه اندازی برای برنامه نویسان مشغول [Optional]: Setup For Busy Developers

  • راه اندازی پروژه تکمیل شده Setup Completed Project

  • راه اندازی پروژه تکمیل شده Setup Completed Project

[اختیاری]: راه اندازی برای برنامه نویسان مشغول [Optional]: Setup For Busy Developers

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش Next.js را با React & Node - Beautiful Portfolio App تکمیل کنید
جزییات دوره
70 hours
448
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
9,382
4.4 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Eincode by Filip Jerga Eincode by Filip Jerga

آموزش آنلاین Eincode تضمین می کند که بهترین تجربه یادگیری آنلاین را برای مخاطبان خود فراهم می کند. محتوای با کیفیت بالا و مفاهیم برنامه نویسی که در پروژه های واقعی توضیح داده شده اند، زمینه هایی هستند که Eincode در آنها می درخشد! Eincode عمدتا دوره هایی را پوشش می دهد که بر راهنمای برنامه نویسی برای توسعه وب و موبایل تمرکز دارند. اگر به دنبال راهنماهای کامل و جامع هستید، Eincode انتخاب مناسبی برای شماست. دوره ها نیز توسط مربی فیلیپ جرگا منتشر می شود. به سلامتی و به کدنویسی ادامه دهید!

Filip Jerga Filip Jerga

مهندس نرم افزار نام من فیلیپ جرگا است و من یک مهندس نرم افزار با تجربه و توسعه دهنده آزاد هستم. من دارای مدرک کارشناسی ارشد در هوش مصنوعی و چندین سال تجربه کار بر روی طیف گسترده ای از فناوری ها و پروژه ها از توسعه ++C برای دستگاه های اولتراسوند گرفته تا برنامه های موبایل و وب مدرن در React و Angular هستم. در طول زندگی حرفه‌ای‌ام، دانش فنی پیشرفته و توانایی توضیح موضوعات برنامه‌نویسی را به وضوح و با جزئیات برای مخاطبان گسترده کسب کرده‌ام. از شما دعوت می‌کنم دوره آموزشی خود را بگذرانید، جایی که من تلاش زیادی کرده‌ام تا مفاهیم مهندسی وب و نرم‌افزار را به صورت مفصل، عملی و قابل درک توضیح دهم.