معماری پروژه های Large-Scale در ری‌اکت با استفاده از Next.js

دوره پیشرفته معماری پروژه های Large-Scale در ری‌اکت با استفاده از Next.js - React Query - Zustand - Typescript - Tailwind Css - Mock Service Worker - Storybook - Jest - React Testing Library - Cypress - CI/CD

  • امتیاز 5 از 5
  • 6 دیدگاه
  • 296 شرکت کننده
  • تاریخ بروزرسانی: 1403/06/23
سرفصل دوره
مقدمه

9 دقیقه


معرفی سیستم های Large-Scale

18 دقیقه


آماده سازی اولیه پروژه کلاسبن

9 دقیقه


فیچرهای Next.js App Router

12 دقیقه


معرفی Error, NotFound, Layout, Route segment

18 دقیقه


مفهوم dynamic routes

8 دقیقه


تعریف route های پروژه

10 دقیقه


چرا از Tailwind برای پیاده سازی پروژه کلاسبن استفاده می کنیم؟

13 دقیقه


سفارشی سازی Tailwind‌برای پروژه کلاسبن

24 دقیقه


پیاده سازی Main Layout - افزودن فونت های فارسی و انگلیسی

16 دقیقه


پیاده سازی Main Layout - طراحی ساختار

12 دقیقه


پیاده سازی کامپوننت Header

22 دقیقه


پیاده سازی Hero Section

12 دقیقه


تعریف type های base برای کامپوننت ها

17 دقیقه


پیاده سازی کامپوننت Button

29 دقیقه


پیاده سازی استایل های Button

30 دقیقه


تعریف و پیکربندی Storybook

13 دقیقه


افزودن TailwindCss به Storybook - تغییر تم Storybook

5 دقیقه


تعریف Story های کامپوننت Button

10 دقیقه


پیاده سازی کامپوننت Loading

17 دقیقه


معرفی ابزارهای تست نویسی در پروژه کلاسبن

8 دقیقه


کانفیگ محیط تست نویسی در Next.js

11 دقیقه


پیاده سازی تست های کامپوننت Button

20 دقیقه


نمایش نتیجه تست ها در Storybook

11 دقیقه


استفاده از debug و snapshop در jest

11 دقیقه


تفاوت SSR و React Server Component (RSC)

14 دقیقه


استراتژی های Rendering در Next.js App Router

8 دقیقه


ارتباط با سرور کلاسبن و فچ جدیدترین دوره ها

20 دقیقه


پیاده سازی کامپوننت Card (تعریف تایپ ها، استایل ها و کامپوننت)

19 دقیقه


پیاده سازی کامپوننت Badge

10 دقیقه


تئوری طراحی آیکون پک ها در سیستم های Large-Scale

8 دقیقه


پیاده سازی آیکون پک ها در پروژه های Large-Scale

31 دقیقه


پیاده سازی کامپوننت Price

12 دقیقه


آپدیت به Next.js ورژن 14

4 دقیقه


پیاده سازی کامپوننت Feature

12 دقیقه


فچ جدیدترین بلاگ پست ها

10 دقیقه


پیاده سازی کامپوننت blog post card component

11 دقیقه


تعریف environment variable ها

24 دقیقه


پیاده سازی روش Streaming

17 دقیقه


پیاده سازی کامپوننت Card-Placeholder

8 دقیقه


پیاده سازی بخش Testimonial

9 دقیقه


پیاده سازی Footer

1 دقیقه


پیاده سازی کامپوننت Avatar

14 دقیقه


فچ اطلاعات جزئیات دوره

24 دقیقه


طراحی ساختار پیج جزئیات دوره

6 دقیقه


پیاده سازی کامپوننت Rating

14 دقیقه


پیاده سازی کامپوننت Progress-bar

7 دقیقه


پیاده سازی کامپوننت CourseAside

10 دقیقه


پیاده سازی کامپوننت Tab

15 دقیقه


پیاده سازی کامپوننت Accordion

13 دقیقه


مفهوم Problem Details (پیاده سازی Error Handling)

16 دقیقه


پیاده سازی http-service بخش اول - interceptor

16 دقیقه


پیاده سازی http-service بخش دوم - عملیات CRUD

12 دقیقه


بررسی عملکرد صحیح http-service

9 دقیقه


تعریف و پیاده سازی strategy-pattern

16 دقیقه


نصب و کانفیگ react-query

20 دقیقه


فچ اطلاعات comment های دوره با استفاده از http-service و react-query

28 دقیقه


تفاوت staleTime و gcTime (یا cacheTime)

13 دقیقه


آپدیت React-Query به آخرین ورژن

4 دقیقه


پیاده سازی کامپوننت comment

18 دقیقه


پیاده سازی کامپوننت text-placeholder

4 دقیقه


پیاده سازی infinite scroll با استفاده از React query و intersection observer

29 دقیقه


refetch کردن کامنت ها در صورت بروز خطای موقت

6 دقیقه


پیاده سازی کامپوننت Alert

6 دقیقه


پیاده سازی بخش سرفصل های دوره

17 دقیقه


پیاده سازی هوک سفارشی useVideo

32 دقیقه


پیاده سازی کامپوننت video player

20 دقیقه


پیاده سازی top loading

7 دقیقه


مروری بر فرآیند Authentication در کلاسبن

7 دقیقه


تفاوت Layout و Template (پیاده سازی Auth Template)

10 دقیقه


پیاده سازی کامپوننت textbox

14 دقیقه


نصب و پیکربندی React-hook-form

16 دقیقه


مفهوم generic function ها

10 دقیقه


پیاده سازی جنریک کامپوننت text input

33 دقیقه


پیاده سازی عملیات sign-in

19 دقیقه


تفاوت client state با server state

10 دقیقه


افزودن zustand و پیاده سازی notification store

23 دقیقه


افزودن zustand devtools برای تست notification store

9 دقیقه


پیاده سازی کامپوننت notification

15 دقیقه


گام آخر پیاده سازی error handling در پروژه های large-scale

23 دقیقه


ساختارهای اولیه پیج verification

8 دقیقه


کامپوننت Authentication Code بخش اول: ساختار اولیه

20 دقیقه


کامپوننت Authentication Code بخش دوم: تعریف رویدادها

14 دقیقه


کامپوننت Authentication Code بخش سوم: useImperativeHandle

12 دقیقه


معرفی کامپوننت Timer و تعریف تایپ ها

7 دقیقه


پیاده سازی کامپوننت Timer Parent

24 دقیقه


نحوه پیاده سازی Circle Progress

13 دقیقه


پیاده سازی کامپوننت Timer Progress

13 دقیقه


اتمام کامپوننت Verification Form

21 دقیقه


تئوری و ملاحظات Cookie-Based Authentication

24 دقیقه


مفهوم Same-Site Policy

10 دقیقه


CORS Standard چیست و چه مواردی را با رعایت کنیم؟

13 دقیقه


نحوه پیاده سازی Authentication بدون استفاده از Cookie

13 دقیقه


رویکرد نهایی: Stateless-Tokens

14 دقیقه


معماری Authentication در پروژه کلاسبن

26 دقیقه


validation سمت کلاینت و سرور با استفاده از zod

15 دقیقه


بازطراحی فرم Signin با استفاده از Server Action

17 دقیقه


استفاده از zod برای validate کردن دیتاها در Server Action ها

4 دقیقه


مدیریت خطاها در Server Action ها

18 دقیقه


پیاده سازی زیر ساخت Server Action Wrapper

22 دقیقه


افزودن Pending State با استفاده از useTransition

10 دقیقه


بازطراحی فرم Verify با استفاده از Server Action

20 دقیقه


نصب و پیکربندی Authjs (Next Auth)

13 دقیقه


پیاده سازی Authentication با استفاده از Credentials Provider

17 دقیقه


معرفی و پیاده سازی متد Authroize

15 دقیقه


پیاده سازی JWT Callback Function

17 دقیقه


پیاده سازی Session Callback Function

11 دقیقه


استفاده از auth session در هدر و بررسی یک مشکل مهم

12 دقیقه


پیاده سازی سشن سمت کلاینت (useSession)

8 دقیقه


پیاده سازی Route Handler برای دسترسی به سشن

9 دقیقه


دموی فیچر پروفایل کاربری در پلتفرم کلاسبن

7 دقیقه


نحوه پیاده سازی client redirection

13 دقیقه


مدیریت خطاها در Next Auth

11 دقیقه


پیاده سازی Auth Middleware

25 دقیقه


پیاده سازی Auth Logout

19 دقیقه


معرفی اولیه

5 دقیقه


معماری قبلی کلاسبن

10 دقیقه


معماری جدید کلاسبن

10 دقیقه


معرفی سرویس های لازم (DevOps با ابرآروان)

12 دقیقه


خرید سرور لینوکس و اتصال به سرور

8 دقیقه


کانفیگ سرور و تنظیمات شکن برای نصب داکر

12 دقیقه


نصب داکر روی سیستم عامل Ubuntu

8 دقیقه


نصب docker-compose و اجرای Gitlab

25 دقیقه


کانفیگ dns و اجرای Gitlab تحت دامنه gitlab.classbon.com

6 دقیقه


تعریف و مدیریت پروژه ها در گیت لب

8 دقیقه


تعریف Branch های Develop و Master و کاربرد آن ها

17 دقیقه


فرآیند درست کامیت و پوش در برنچ های Gitlab

10 دقیقه


پس از پایان CI/CD به چه خروجی می رسیم؟

23 دقیقه


تعریف و پیاده سازی Dockerfile

19 دقیقه


تعریف و پیاده سازی docker-compose برای پروژه

11 دقیقه


چرا به reverse-proxy نیاز داریم (معرفی nginx و iis)

6 دقیقه


پیکربندی nginx و deploy کردن اپلیکیشن

13 دقیقه


معرفی Gitlab runner

3 دقیقه


نصب و ریجیستر کردن Gitlab runner

10 دقیقه


مکانیزم احراز هویت بین سرور Gitlab و Production Server با SSH

10 دقیقه


پیاده سازی CI/CD و تعریف gitlab-ci.yml.

14 دقیقه


پیش نیازهای دوره
  • دوره آموزش جامع ری اکت
  • دوره پروژه پنل ادمین
شرح دوره

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

در این دوره پیاده سازی ورژن جدید پلتفرم آموزشی کلاسبن به شکل گام به گام آموزش داده می شود. از طراحی رابط کابری تا طراحی  معماری اپلیکیشن تا پیاده سازی جز به جز کامپوننت ها. 

تکنولوژی ها و فریم ورک های جذابی در این دوره استفاده شده است. این پروژه با استفاده از Next.js App Router پیاده سازی شده است. در کنار مفاهیم پیشرفته ری اکت و البته مفاهیم پروژه های Large-Scale. از TailwindCSS برای طراحی رابط کاربری استفاده می کنیم و البته از مفاهیم پیشرفته تر Tailwind برای ساخت بیش از 40 کامپوننت پیشرفته استفاده می شود. تست نویسی یکی دیگر از اجزای مهم اپلیکیشن های Large-Scale است. از React Testing Library - Jest و Cypress برای تست کامپوننت ها، unit test ها، integration test ها و end-to-end test ها استفاده می کنیم. بخش تست نویسی در این دوره یکی از جذاب ترین بخش های این دوره می باشد. در ادامه از Storybook برای مستند سازی کامپوننت ها هم استفاده می کنیم و نتیجه تست ها را در این ابزار ویژه به عنوان گزارش پیاده سازی می کنیم. State Mangement یکی دیگر از مهمترین بخش های هر سیستم سمت فرانت است. از Zustand برای مدیریت state ها استفاده می کنیم و علت استفاده از این ابزار را به طور کامل بررسی می کنیم. برای ارتباط با سرور و کال کردن API های ست سرور هم از React Query و Axios به همراه هم استفاده می کنیم که یکی از بهترین کتابخانه های ارتباط با سرور و کش کردن اطلاعات بازیابی شده از سرور می باشند. 

همین طور از Mock Server Worker استفاده می کنیم تا در صورتی که API های سمت سرور در دسترس نباشن بتوانیم فرآِیند توسعه را ادامه دهیم با دیتاهای غیر واقعی. این ابزار هم یکی از بهترین و پر استفاده ترین ابزارهاست. 

این پروژه با استفاده از Typescript پیاده سازی می شود و از تایپ های مختلفی برای ساخت این اپلیکیشن استفاده می کنیم. در انتهای دوره نحوه دیپلوی کردن پروژه در محیط عملیاتی بررسی می شود و از CI/CD به همراه GitLab استفاده می کنیم تا فرآیند Build  و Deploy در محیط عملیاتی به شکل اتوماتیک انجام شود. 
غیر از موارد گفته شده مطالب دیگری هم بررسی می شود از جمله طراحی آیکون پک برای پروژه و طراحی دیزاین به خصوص برای پروژه و ...
این دوره در واقع یکی از کاملترین و پروژه محورترین دوره های آموزش React در بازار است. امیدوارم که این دوره برای دوستان عزیز تجربه ای منحصر به فرد باشه. 
درود

آدرس کانال تلگرام دوه:
https://t.me/+KzlwRLSn9GdmOTE0

دیدگاه

برای ارسال دیدگاه های خود ابتدا وارد شوید یا ثبت نام کنید

ورود یا ثبت نام
رسول مدنی
1402/07/02 - 10:12

عالی هست دورتون استاد خیلی ممنونم

پیمان نادری
1402/07/02 - 15:10

عالی و درجه یک

مهدی محمدی
1402/07/14 - 13:14

دوستان پشت این آموزش ها ساعتها کار و سال ها تجربه قرار دارد . که برای مشاوره یکصدم این اطلاعات چندین برابر این هزینه را باید پرداخت کنیم. نکته مهم دیگر در این آموزش عملیاتی بودن برنامه در یک محیط واقعی و استفاده از آخرین تکنولوژی موجود میباشد . و بسیار موارد دیگر که موجب شده که این آموزش جزوء Top 10 آموزش در ایران باشد. در انتها از مهندس سپهوند بسیار تشکر میکنم که تجربه و علم با ارزش خود را بدون هیچ چشم داشتی با ما در میان میگذارند.

عباس سپهوند
1402/07/14 - 13:57

ممنون جناب محمدی عزیز امیدوارم دوستان نهایت استفاده رو از دوره ببرن

لیلااحمدی
1402/07/16 - 08:12

از مزایای مهم دوره فن بیان قوی ، ویدیوها باتایم های کوتاه برای هر topic و انتقال تجربیات در دوره های آموزشی است

مهدی خسروجردی
1402/07/17 - 15:27

تسلط و فن بیان عالی . مطالب بسیار کاربردی ، موفق باشید .

Mohammad Afshar
1402/07/23 - 20:37

دوره بسیار کاربردی و با کیفیتی هست. متشکرم.

حسین لادمخی نژاد
1402/07/25 - 18:30

سلام خسته نباشید ای کاش میشد یکسری قسمت هارو رایگان کنید به طور مثال یک یا دو قسمت ، که بشه نحوه تدریس رو مشاهده کرد مچکرم

عباس سپهوند
1402/07/26 - 00:27

سلام و درود شما می تونید نحوه تدریس رو در دوره هایی پنل ادمین و جامع ری اکت مشاهده کنید. هر دوی این دوره ها رایگان هستن

عباس
1402/08/06 - 14:00

سلام به نظر میاد تا اینجا دوره 7 ساعته، نه 40 ساعت دوره تکمیل شده؟ یا عدد اشتباهه؟

عباس سپهوند
1402/08/06 - 14:07

سلام و درود دوره حدود 40 ساعت و حتی بیشتره. فعلا حدود 8 ساعتش آماده شده و هر هفته آپدیت می شه

عباس
1402/08/06 - 16:30

درسته بالای دوره نوشته "وضعیت ضبط :تکمیل ضبط" برای همین به اشتباه افتادم

عباس سپهوند
1402/08/06 - 18:12

بله درست می فرمایید. من وضعیت دوره رو آپدیت کردم

حصین حیدری
1402/08/18 - 16:49

سلام وقت بخیر در این دوره از api خود نکست استفاده میشه یا از بکند جدا استفاده میشه؟

عباس سپهوند
1402/08/19 - 08:27

سرویس های بک اند قبلا پیاده سازی شدن و از api های نکست استفاده نمی سه. ولی نحوه پیاده سازی و تعریف api ها آموزش داده می شه

Amir
1402/09/09 - 08:00

بی نظیر

Amir
1402/10/07 - 13:57

بی نظیر عالی و بی نقص سه کلمه در مورد دوره لارج اسکیل

حصین حیدری
1402/10/12 - 22:53

سلام وقت بخیر امنیت هم توضیح و پیاده سازی شده

عباس سپهوند
1402/10/14 - 09:25

بله توضیح داده می شه

میثم
1402/10/23 - 09:47

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

مهدی حسینی
1402/10/23 - 19:13

این دوره فوق العادس و شمارو چندین لول از لحاظ فنی ارتقا میده! شک نکنید و حتما بدون تردید دوره رو شرکت کنید واسه افرادی که تجربه کار تو پروژه های بزرگ رو ندارن این دوره میتونه فوق العاده باشه تا لول کاریشون رو ارتقا بدن

ازاد
1402/11/09 - 17:14

این دوره در spotplayer قابل مشاهده ست؟

عباس سپهوند
1402/11/10 - 17:39

بله از طریق اسپات قابل مشاهده است ولی محدودیتی در دستگاه ها یا تعداد دستگاه ها وجود نداره

فائزه لشکری
1402/12/19 - 14:11

سلام این دوره تخفیف نمیخوره؟

علی محمودی
1402/12/26 - 22:20

درود دوره برای عید افر نداره ؟

عباس سپهوند
1402/12/27 - 01:49

بله داره به زودی اطلاع رسانی می شه

علی محمودی
1402/12/27 - 09:16

ممنون استاد ، استاد لینک کانال تلگرام که قرار دادین منقضی شده ! برای اطلاع رسانی از اخرین وضعیت دوره ها ، اپدیت ها ... کلاسبن کانال تلگرام نداره ؟

عباس سپهوند
1402/12/27 - 11:52

درود لینک رو آپدیت می کنم. https://t.me/+heLZBzt4t5MwODdk

iman
1402/12/27 - 18:01

سلام قسمت بک اند سایت رو هم در پروژه زدید؟ از نود جی اس استفاده میکنید؟ آموزش داکیومنت سازی کل پروژه هم ذکر کردید؟

امیررضا فا
1402/12/27 - 19:52

سلام و احترام ابتدا ممنون استاد بابت اموزش react سایت که واقعا درک خوبی نسب به react بهم داد هم اموزشش عالی بود هم پروژه استاد ای کاش توی دوره next هم اول یک اموزشی در مورد فیچر های next میدادین چون به نظر سطح دوره برای افرادی که مبتدی هستند توی next مناسب نیست درسته؟

عباس سپهوند
1402/12/27 - 22:02

اگه اون دو تا دوره رایگان رو دیده باشید مشکلی نخواهید داشت. به هر حال برای ارتقا باید چالش هم باشه. به نظرم می تونید این دوره رو استارت بزنید

جعفر رنجبری
1403/01/11 - 15:38

ممنون مهندس بهترین دوره هست ارزش داشت خریدم اما فرمودین هر هفته آپدیت میشه چرا دو هفته هست آپدیتی ندیدم همون رویکردی نهای مونده ؟؟؟ ممنون میشه رود مپ سر فصل دوره 40 ساعتع بفرمایید چیا میخاد بیاد بازم ممنون زحمت کشیدی

امیر دانش
1403/03/05 - 09:18

سلام وقت بخیر میخواستم ببینم توی نحوه استفاده access token و refresh token رو توضیح میدید؟

arman amiri
1403/03/16 - 20:12

عالیییی

مسعود مهره کش
1403/03/22 - 00:15

درود مهندس عزیز خسته نباشید خداقوت توی توضیحات نوشتید که از appRouter استفاده شده . یعنی این که از backend داخلی خود نکست جی اس نظیز prisma,supabase , ... استفاده شده یا از api خارجی با بکند جدا از هم؟ من یک پروژه large scale با تعداد فیچر های زیاد دارم که با نکست در حال پیاده سازیش هستم و از دوره ی شما با مباحث گفته شده قطعا باید یاد بگیرم و استفاده کنم اما تنها چیزی که برام روشن نیست همین موضوع appRouter هست که در بالا گفتم ممنون میشم راهنمایی کنید وقت خوش

somaye
1403/04/04 - 11:38

خیلی عالیه ولی خیلی دیر به دیر مباحث اپلود میشه

عباس سپهوند
1403/06/20 - 13:02

درود بر شما. با عرض پوزش وب سایت جدید و محتوای جدید در حال آماده سازیه. ایشالله زمان آپلود خیلی سریع تر انجام می شه با اولویت اول

جعفر رنجبری
1403/05/15 - 14:30

من دارم یک سیستم لارج برای یک شرکت برای پتروشیمی هست این دوره خیلی کمکم میکنه بحث داکر و تست و... من دوره خیلی خریدم اما این واقعا باسواد میشه جالبه

عباس سپهوند
1403/06/20 - 13:01

درود بر شما خوشحالم که دوره براتون مفید بوده

عباس
1403/06/18 - 20:11

سلام لایسنس دوره رو باید از کجا تهیه کنیم تو پنل کاربری موجود نیست (ثبت نام کردم)

عباس سپهوند
1403/06/20 - 13:01

سلام لطفا به تلگرام این شماره پیام بدید 09939994383

عرفان فروزی
1403/07/23 - 17:39

سلام خسته نباشید - ایا این دوره تخفیف داره ؟

عرفان فروزی
1403/07/23 - 22:21

سلام خسته نباشید ایا تخفیف میگذارید؟

عباس سپهوند
1403/07/25 - 11:57

سلام وقت به خیر. اعلام می شه

سوگند صالح
1403/07/28 - 14:59

درود وقت بخیر ذکر شده که از معماری برای پروژه های لارج اسکیل استفاده شده، معماری مورد استفاده چی هستش؟

امیرحسین باغمیرانی
1403/09/10 - 10:26

سلام دوستان دوره به جایی رسیده که خریداری کنیم و بشینم آموزش ببینم

عباس سپهوند
1403/09/10 - 16:37

سلام وقت به خیر بله دوره تقریبا کامله و فقط بخش تست مونده


این دوره شامل
  • وضعیت ضبط تکمیل ضبط
  • تعداد مباحث 136 مبحث
  • مدت آموزش 40 ساعت
  • سطح دوره پیشرفته
  • قابلیت دانلود دارد
عباس سپهوند

برنامه نویس و توسعه دهنده نرم افزار