آموزش React Next.js Node API AWS - Build Scaling MERN Stack App

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

معرفی Introduction

• آیا با JavaScript React و NodeJs تازه کار هستید؟ Are you new to JavaScript React and NodeJs?

• آنچه را که خواهیم ساخت What we will build

• آنچه را که خواهیم ساخت What we will build

• هدف پروژه Aim of the project

• هدف پروژه Aim of the project

• گردش کار برنامه Application workflow

• گردش کار برنامه Application workflow

• نسخه ی نمایشی پروژه به پایان رسید Finished project demo

• نسخه ی نمایشی پروژه به پایان رسید Finished project demo

معرفی Introduction

• آیا با JavaScript React و NodeJs تازه کار هستید؟ Are you new to JavaScript React and NodeJs?

React/Next Js Client React / Next Js Client

• توجه: پروژه نمایشی NOTE: Demo project

• کلاینت react nextjs را راه اندازی کنید Setup react nextjs client

• کلاینت react nextjs را راه اندازی کنید Setup react nextjs client

• جزء طرح Layout component

• جزء طرح Layout component

• بخش سر Head section

• بخش سر Head section

• مولفه پیوند Link component

• مولفه پیوند Link component

• نوار پیشرفت مسیر Nav progress bar

• در حال بارگیری css Loading css

• صفحه ثبت نام Register page

• صفحه ثبت نام Register page

• راه اندازی پوشه کلاینت و مراحل بعدی Client folder setup and next steps

• راه اندازی پوشه کلاینت و مراحل بعدی Client folder setup and next steps

React/Next Js Client React / Next Js Client

• توجه: پروژه نمایشی NOTE: Demo project

• نوار پیشرفت مسیر Nav progress bar

• در حال بارگیری css Loading css

Node Js API Node Js API

• راه اندازی سرور Server setup

• مسیرها Routes

• مسیرها Routes

• کنترل کننده ها Controllers

• طرحواره کاربر User schema

• طرحواره کاربر User schema

• زمینه و روش های مجازی Virtual field and methods

• زمینه و روش های مجازی Virtual field and methods

• بسته های NPM بیشتر More NPM packages

• درخواست پست Axios Axios post request

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

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

• نسخه Mongoose Mongoose version

• نسخه Mongoose Mongoose version

• اطلس مونگو Mongo atlas

• اطلس مونگو Mongo atlas

Node Js API Node Js API

• راه اندازی سرور Server setup

• کنترل کننده ها Controllers

• بسته های NPM بیشتر More NPM packages

• درخواست پست Axios Axios post request

شروع با AWS Starting with AWS

• ثبت نام AWS AWS signup

• AWS SES برای ارسال ایمیل AWS SES for sending email

شروع با AWS Starting with AWS

• ثبت نام AWS AWS signup

• AWS SES برای ارسال ایمیل AWS SES for sending email

ورود/ثبت نام/AWS SES Login / Register / AWS SES

• ثبت ایمیل فعال سازی Register activation email

• ثبت پارامترهای ایمیل Register email params

• ثبت پارامترهای ایمیل Register email params

• پیغام های موفقیت و خطا Success and error messages

• پیغام های موفقیت و خطا Success and error messages

• همگام سازی در انتظار Async await

• متغیرهای محیطی با nextjs Environment variables with nextjs

• متغیرهای محیطی با nextjs Environment variables with nextjs

• فعال کردن حساب - مشتری Activate account - client

• فعال کردن حساب - مشتری Activate account - client

• فعال کردن حساب - سرور Activate account - server

• ورود - سرور Login - server

• ورود - مشتری Login - client

• ورود - مشتری Login - client

• کمک‌های ذخیره‌سازی محلی و کوکی Local storage and cookie helpers

• رمز کاربر را در کوکی مرورگر ذخیره کنید Save user token in browser cookie

• رمز کاربر را در کوکی مرورگر ذخیره کنید Save user token in browser cookie

• تغییر مسیر بر اساس نقش Redirect based on role

• خروج و رندر شرطی Logout and conditional rendering

• خروج و رندر شرطی Logout and conditional rendering

ورود/ثبت نام/AWS SES Login / Register / AWS SES

• ثبت ایمیل فعال سازی Register activation email

• همگام سازی در انتظار Async await

• فعال کردن حساب - سرور Activate account - server

• ورود - سرور Login - server

• کمک‌های ذخیره‌سازی محلی و کوکی Local storage and cookie helpers

• تغییر مسیر بر اساس نقش Redirect based on role

دسترسی کاربر/مدیر User / Admin Access

• میان افزار اکسپرس JWT Express JWT middleware

• میان افزار اکسپرس JWT Express JWT middleware

• میان افزار احراز هویت و مدیریت Auth and admin middleware

• مشخصات کاربر - سرور User profile - server

• SSR و getInitialProps SSR and getInitialProps

• سمت سرور مسیرهای تأیید اعتبار Auth routes server side

• سمت سرور مسیرهای تأیید اعتبار Auth routes server side

• withUser و withAdmin HOC withUser and withAdmin HOC

دسترسی کاربر/مدیر User / Admin Access

• میان افزار احراز هویت و مدیریت Auth and admin middleware

• مشخصات کاربر - سرور User profile - server

• SSR و getInitialProps SSR and getInitialProps

• withUser و withAdmin HOC withUser and withAdmin HOC

رمز عبور فراموش شده/بازنشانی Password Forgot / Reset

• بعدش چی؟ What's next?

• بعدش چی؟ What's next?

• رمز عبور را فراموش کرده اید - سرور Forgot password - server

• بازنشانی رمز عبور - سرور Reset password - server

• بازنشانی رمز عبور - سرور Reset password - server

• رمز عبور را فراموش کرده اید - مشتری Forgot password - client

• رمز عبور را فراموش کرده اید - مشتری Forgot password - client

• بازنشانی رمز عبور - مشتری Reset password - client

• بازنشانی رمز عبور - مشتری Reset password - client

رمز عبور فراموش شده/بازنشانی Password Forgot / Reset

• رمز عبور را فراموش کرده اید - سرور Forgot password - server

دسته ها/بارگذاری ها/AWS S3 Categories / Uploads / AWS S3

• طرح واره دسته Category schema

• طرح واره دسته Category schema

• مسیرهای دسته بندی و راه اندازی کنترلرها Category routes and controllers setup

• در حال تلاش برای ایجاد دسته با پستچی Trying create category with postman

• در حال تلاش برای ایجاد دسته با پستچی Trying create category with postman

• AWS S3 AWS S3

• AWS S3 AWS S3

• آپلود تصاویر در S3 با استفاده از داده های فرم Uploading images to S3 using form data

• آپلود تصاویر در S3 با استفاده از داده های فرم Uploading images to S3 using form data

• ایجاد دسته - مشتری Create category - client

• ایجاد دسته - مشتری Create category - client

• نمایش همه دسته ها Show all categories

• نمایش همه دسته ها Show all categories

• آپلود تصویر base64 در S3 Uploading base64 image to S3

• آپلود تصویر base64 در S3 Uploading base64 image to S3

• تغییر اندازه تصویر سمت مشتری و آپلود Image resize client side and upload

• تغییر اندازه تصویر سمت مشتری و آپلود Image resize client side and upload

• ویرایشگر متن توانمند Rich text editor

دسته ها/بارگذاری ها/AWS S3 Categories / Uploads / AWS S3

• مسیرهای دسته بندی و راه اندازی کنترلرها Category routes and controllers setup

• ویرایشگر متن توانمند Rich text editor

پیوندها Links

• طرحواره پیوند Link schema

• طرحواره پیوند Link schema

• مسیرهای اعتبارسنجی و کنترلرها را پیوند دهید Link validators routes and controllers

• ایجاد پیوند و خواندن - سرور Link create and read - server

• مراحل ایجاد/ارسال پیوند - مشتری Steps to create/submit link - client

• مراحل ایجاد/ارسال پیوند - مشتری Steps to create/submit link - client

• ارسال صفحه پیوند قسمت 1 Submit link page part 1

• ارسال صفحه پیوند قسمت 1 Submit link page part 1

• ارسال صفحه پیوند قسمت 2 Submit link page part 2

• ارسال صفحه پیوند قسمت 3 Submit link page part 3

• ارسال صفحه پیوند قسمت 3 Submit link page part 3

• ارسال صفحه پیوند قسمت 4 Submit link page part 4

• ارسال صفحه پیوند قسمت 5 Submit link page part 5

• ارسال صفحه پیوند قسمت 5 Submit link page part 5

• دسته بندی واحد با پیوندها - سرور Single category with links - server

• صفحه تک دسته با پیوند قسمت 1 Single category page with links part 1

• صفحه تک دسته با پیوند قسمت 1 Single category page with links part 1

• صفحه تک دسته با پیوند قسمت 2 Single category page with links part 2

پیوندها Links

• مسیرهای اعتبارسنجی و کنترلرها را پیوند دهید Link validators routes and controllers

• ایجاد پیوند و خواندن - سرور Link create and read - server

• ارسال صفحه پیوند قسمت 2 Submit link page part 2

• ارسال صفحه پیوند قسمت 4 Submit link page part 4

• دسته بندی واحد با پیوندها - سرور Single category with links - server

• صفحه تک دسته با پیوند قسمت 2 Single category page with links part 2

Load More/روی تعداد/Infinite Scroll کلیک کنید Load More / Click Count / Infinite Scroll

• بارگذاری بیشتر Load more

• بارگذاری بیشتر Load more

• تعداد کلیک - سرور Click count - server

• تعداد کلیک - سرور Click count - server

• تعداد کلیک - مشتری Click count - client

• پیمایش بی نهایت Infinite scrolling

• پیمایش بی نهایت Infinite scrolling

Load More/روی تعداد/Infinite Scroll کلیک کنید Load More / Click Count / Infinite Scroll

• تعداد کلیک - مشتری Click count - client

به روز رسانی/حذف دسته Category Update / Delete

• مراحل بعدی Next steps

• مراحل بعدی Next steps

• دسته ها خوانده شده - مدیر Categories read - admin

• دسته ها خوانده شده - مدیر Categories read - admin

• دکمه های حذف و هشدارها را به روز کنید Update delete buttons and warnings

• دکمه های حذف و هشدارها را به روز کنید Update delete buttons and warnings

• به روز رسانی دسته - سرور Update category - server

• به روز رسانی دسته - سرور Update category - server

• حذف دسته - سرور Delete category - server

• حذف دسته - مشتری Delete category - client

• بازنشانی پایگاه داده mongo atlas و AWS S3 Reset mongo atlas database and AWS S3

• بازنشانی پایگاه داده mongo atlas و AWS S3 Reset mongo atlas database and AWS S3

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

به روز رسانی/حذف دسته Category Update / Delete

• حذف دسته - سرور Delete category - server

• حذف دسته - مشتری Delete category - client

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

کاربر می تواند به روز رسانی/حذف User can Update / Delete

• همه لینک ها توسط کاربر All links by user

• داشبورد کاربر قسمت 1 User dashboard part 1

• داشبورد کاربر قسمت 1 User dashboard part 1

• داشبورد کاربر قسمت 2 User dashboard part 2

• داشبورد کاربر قسمت 2 User dashboard part 2

• به روز رسانی حذف لینک - سرور Update delete link - server

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

کاربر می تواند به روز رسانی/حذف User can Update / Delete

• همه لینک ها توسط کاربر All links by user

• به روز رسانی حذف لینک - سرور Update delete link - server

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

به روز رسانی مدیریت/حذف دسترسی Admin Update / Delete Access

• همه لینک ها برای مدیر - سرور All links for admin - server

• همه پیوندها برای مدیر - مشتری All links for admin - client

• همه پیوندها برای مدیر - مشتری All links for admin - client

• میان افزار canUpdateDeleteLink canUpdateDeleteLink middleware

• میان افزار canUpdateDeleteLink canUpdateDeleteLink middleware

• حذف هر لینک توسط ادمین Delete any link by admin

• هر پیوندی را توسط ادمین به روز کنید Update any link by admin

به روز رسانی مدیریت/حذف دسترسی Admin Update / Delete Access

• همه لینک ها برای مدیر - سرور All links for admin - server

• حذف هر لینک توسط ادمین Delete any link by admin

• هر پیوندی را توسط ادمین به روز کنید Update any link by admin

به روز رسانی نمایه/ایمیل انبوه/AWS SES Profile Update / Mass Email / AWS SES

• دسته مورد علاقه را در ثبت نام کاربر انتخاب کنید - مشتری Choose favourite category on user registration - client

• دسته مورد علاقه را در ثبت نام کاربر انتخاب کنید - مشتری Choose favourite category on user registration - client

• دسته مورد علاقه را در ثبت نام کاربر انتخاب کنید - سرور Choose favourite category on user registration - server

• دسته مورد علاقه را در ثبت نام کاربر انتخاب کنید - سرور Choose favourite category on user registration - server

• ارسال ایمیل انبوه به کاربران در پیوند جدید Mass email to users on new link publish

• به روز رسانی پروفایل کاربر - سرور Update user profile - server

• به روز رسانی پروفایل کاربر - مشتری Update user profile - client

• کاربر را در حافظه محلی به روز کنید Update user in local storage

• کاربر را در حافظه محلی به روز کنید Update user in local storage

به روز رسانی نمایه/ایمیل انبوه/AWS SES Profile Update / Mass Email / AWS SES

• ارسال ایمیل انبوه به کاربران در پیوند جدید Mass email to users on new link publish

• به روز رسانی پروفایل کاربر - سرور Update user profile - server

• به روز رسانی پروفایل کاربر - مشتری Update user profile - client

پیوندهای پرطرفدار/تعداد بازدید Trending Links / View Count

• محبوب ترین/پیوندهای پرطرفدار - سرور Most popular / Trending links - server

• محبوب ترین/پیوندهای پرطرفدار - مشتری Most popular / Trending links - client

• محبوب ترین/پیوندهای پرطرفدار - مشتری Most popular / Trending links - client

• تعداد کلیک - مشتری Click count - client

• تعداد کلیک - مشتری Click count - client

• محبوب ترین پیوند در دسته بندی داده شده Most popular link in given category

• محبوب ترین پیوند در دسته بندی داده شده Most popular link in given category

• بخش سر برای سئو Head section for SEO

پیوندهای پرطرفدار/تعداد بازدید Trending Links / View Count

• محبوب ترین/پیوندهای پرطرفدار - سرور Most popular / Trending links - server

• بخش سر برای سئو Head section for SEO

AWS IAM/EC2/Route 53 and Deployment AWS IAM / EC2 / Route 53 and Deployment

• کد را به github فشار دهید Push code to github

• دسترسی به AWS IAM AWS IAM acces

• منبعی برای نصب Node در EC2 Resource to Install Node in EC2

• نمونه AWS EC2 AWS EC2 Instance

• اجرای پروژه های ما در EC2 Running our projects in EC2

• اجرای پروژه های ما در EC2 Running our projects in EC2

• بلوک کد برای پیکربندی NGINX Code Block for NGINX configuration

• پیکربندی NGINX NGINX Configuration

• پیکربندی NGINX NGINX Configuration

• کد فشاری به EC2 تغییر می کند Push code changes to EC2

• کد فشاری به EC2 تغییر می کند Push code changes to EC2

• مسیر 53 - افزودن دامنه Route 53 - Add domain

• مسیر 53 - افزودن دامنه Route 53 - Add domain

AWS IAM/EC2/Route 53 and Deployment AWS IAM / EC2 / Route 53 and Deployment

• کد را به github فشار دهید Push code to github

• دسترسی به AWS IAM AWS IAM acces

• منبعی برای نصب Node در EC2 Resource to Install Node in EC2

• نمونه AWS EC2 AWS EC2 Instance

• بلوک کد برای پیکربندی NGINX Code Block for NGINX configuration

جایزه BONUS

• دوره های دیگری که ممکن است دوست داشته باشید Other courses you may like

• به سرور Discord من بپیوندید Join my Discord server

• به سرور Discord من بپیوندید Join my Discord server

جایزه BONUS

• دوره های دیگری که ممکن است دوست داشته باشید Other courses you may like