دوره آموزشی
دوبله زبان فارسی
نمونه اولیه فولاستک لینکدین با Next.js
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت یک وب اپلیکیشن کسبوکار کامل، مدرن و حرفهای
- پیادهسازی ویژگیهای متداول در اپلیکیشنهای مدرن مانند صفحهبندی، مرتبسازی، احراز هویت و موارد دیگر
- استفاده از قابلیتهای NextJS مانند App Router و گروههای مسیر، کامپوننتهای سرور، کامپوننتهای کلاینت، اکشنهای سرور و کش کردن
- ساخت یک سیستم توصیهگر از ابتدا
- انتشار اپلیکیشن روی Vercel و عیبیابی مشکلات احتمالی استقرار
پیشنیازهای دوره
- آشنایی اولیه با توسعه وب و خط فرمان توصیه میشود.
- آشنایی اولیه با جاوااسکریپت و ریاکت توصیه میشود.
- آشنایی اولیه با گیت و گیتهاب توصیه میشود.
توضیحات دوره
در دوره جامع ما با عنوان «Next.js فولاستک - نمونه اولیه لینکدین» وارد یک مسیر تحولآفرین شوید که مهارتها و دانش لازم برای توسعه یک وب اپلیکیشن فولاستک پیشرفته را به شما میدهد. این دوره به گونهای طراحی شده که توانایی کار با Next.js، فریمورک قدرتمند برای ساخت وب اپلیکیشنهای مدرن، را در شما تقویت کند.
در این دوره خواهید آموخت:
- ساخت اپلیکیشن با Next.js - شما یاد میگیرید چگونه یک وب اپلیکیشن فولاستک با Next.js بسازید و از قابلیتهای آن برای رندرینگ سمت سرور بهره ببرید.
- تعامل با پایگاه داده - شما با استفاده از TablePlus به صورت بدوننقص با پایگاه داده PostgreSQL کار میکنید. شما تجربه عملی مدیریت و بازیابی داده را کسب خواهید کرد.
- طراحی با TailwindCSS - ظاهر اپلیکیشن های خود را با استایلدهی با TailwindCSS، فریمورک utility-first CSS منعطف و واکنشگرا، بهبود داده و زیباتر میکنید.
- استراتژیهای کش کردن - انواع مکانیسمهای کش کردن در Next.js را بررسی میکنید تا عملکرد اپلیکیشن را بهینه کرده و تجربه کاربری را بهتر کنید.
- احراز هویت با NextAuth - احراز هویت OAuth را به کمک NextAuth به صورت بی نقص راهاندازی میکنید تا فرآیند لاگین ایمن و کاربرپسندی داشته باشید.
- اسکیماهای ORM با Drizzle - شما وارد دنیای اسکیماهای Drizzle ORM میشوید تا بروزرسانیهای پایگاه داده را به صورت کارآمد مدیریت کرده و با Drizzle Kit تغییرات اسکیما را به راحتی پوش کنید.
- ساخت داشبورد - یک داشبورد پویا و غنی از امکانات با Mantine AppShell میسازید تا کاربردپذیری اپلیکیشن خود را افزایش دهید.
- طراحی واکنشگرا - با بهرهگیری از Mantine AppShell و نقاط شکست TailwindCSS اصول طراحی واکنشگرا را پیاده می کنید تا تجربهای بینقص در دستگاههای مختلف فراهم شود.
- الگوهای توسعه وب - الگوهای رایج توسعه وب مانند صفحهبندی، مرتبسازی و فیلترینگ را اعمال میکنید تا تجربه کاربری ساده و قابل فهم باشد.
- ویژگیهای پیشرفته پایگاه داده - جستجوی فازی را با pg_trgm پیاده میکنید.
- اسکریپتنویسی - اسکریپتهای تایپاسکریپت برای تولید داده جعلی واقعگرایانه مینویسید تا پایگاه داده را seed کنید.
- ساخت فرم - فرمهای قوی با استفاده از هوک useFormState ریاکت و اکشنهای سرور میسازید و اعتبارسنجی داده را با zod در سمت سرور انجام میدهید.
- ویرایشگر متن غنی - از ویرایشگر متن غنی TipTap در Mantine استفاده میکنید تا تولید محتوا در اپلیکیشن بهبود یابد.
- مصورسازی داده - نمودارهای جذاب ویژوال با Mantine charts میسازید تا بینشهای اپلیکیشن را به خوبی نمایش دهید.
- سوئیچر Dark Mode - یک سوئیچر Dark Mode مبتنی بر ذخیرهسازی محلی می سازید تا به کاربران امکان تجربهای شخصیسازی شده و راحت ویژوال ارائه دهید.
- سیستم توصیهگر - با استفاده از شباهت کسینوسی و الگوریتم نزدیکترین همسایه K، یک سیستم توصیهگر میسازید و قابلیت آن را با تست واحد توسط Vitest ارزیابی میکنید.
- استقرار - اپلیکیشن خود را به صورت بینقص روی Vercel مستقر کرده و چالشهای غیرمنتظره را مانند یک حرفهای اشکالزدایی میکنید.
با شروع این تجربه یادگیری تحولآفرین، مهارتهای لازم برای توسعه اپلیکیشنهای فولاستک حرفهای و قوی را کسب میکنید. همین امروز حرفه خود را با «Next.js فولاستک» برای ساخت اپلیکیشن شبکه حرفهای» ارتقا دهید.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان وب مبتدی تا متوسط که میخواهند توسعه فولاستک با NextJS را تجربه کنند
- توسعهدهندگان وب مبتدی تا متوسط که قصد ساخت اپلیکیشن داشبورد کسبوکار با فناوریهای مدرن را دارند.
نمونه اولیه فولاستک لینکدین با Next.js
-
مقدمه 00:25
-
توضیحات پروژه 00:33
-
الزامات پروژه 00:45
-
طراحی رابط کاربری 01:40
-
طراحی پایگاه داده 01:10
-
فناوریها 00:48
-
نصب 01:42
-
مقداردهی اولیه پروژه Next.js 00:47
-
باز کردن دایرکتوری پروژه 00:38
-
پاکسازی صفحه اصلی و CSS گلوبال 01:43
-
بررسی طراحی صفحه اصلی 00:44
-
نصب وابستگیهای Mantine 00:57
-
راهاندازی Mantine 01:59
-
کدنویسی سخت Dark Mode 01:19
-
استایلدهی صفحه اصلی 02:59
-
مقایسه Mantine و TailwindCSS 01:39
-
مقدمه کش کردن 00:52
-
مثال صفحه کش شده 02:35
-
مثال صفحه بدون کش 01:35
-
مثال اعتبارسنجی مجدد مبتنی بر زمان 01:23
-
مثال پیش واکشی لینک 02:53
-
آنچه صفحه را پویا میکند 00:57
-
مقدمه احراز هویت 01:20
-
ایجاد پایگاه داده 02:15
-
نصب وابستگیها 00:32
-
ایجاد اسکیما 01:05
-
ایجاد فایل پیکربندی 02:38
-
ایجاد نمونه پایگاه داده Drizzle 03:05
-
ایجاد گزینههای احراز هویت 01:53
-
ایجاد مسیرهای API برای NextAuth 01:16
-
ایجاد اپلیکیشن OAuth برای گیتهاب 02:15
-
کپی متغیرهای محیطی به فایل محلی Env 01:58
-
ایجاد پیکربندی Drizzle 01:34
-
اجرای فرمان push 01:47
-
ارائهدهنده سشن 02:50
-
کامپوننت دکمه لاگین 02:21
-
تست دکمه لاگین 00:41
-
ایجاد مسیر API محدود شده 02:26
-
ایجاد صفحه محدود شده 02:10
-
ایجاد صفحه ورود سفارشی 05:01
-
تست صفحه ورود سفارشی 00:37
-
مشکل ارائهدهنده سشن در طرحبندی ریشه 01:08
-
گروه مسیر برای مسیرهای پویا 04:29
-
استایلدهی صفحه ورود 01:07
-
Drizzle ORM 03:09
-
مقدمه داشبورد 00:38
-
Stub صفحه داشبورد 01:10
-
طرحبندی داشبورد 02:16
-
کانتینر App Shell 02:10
-
منوی همبرگری موبایل 03:31
-
منوی هدر و خروج از سیستم 03:52
-
لینکهای ناوبری 02:16
-
نمایش تصویر آواتار 00:53
-
مقدمه صفحه افراد 00:41
-
Seed کردن اسکریپت کاربران 08:13
-
Seed کردن عناوین شغلی 03:41
-
رندرینگ لیست کاربران 02:39
-
پارامترهای جستجوی صفحه 02:57
-
محدودیت و آفست 01:25
-
شمارش و تعداد صفحات 02:15
-
کانتینر صفحهبندی 02:04
-
صفحهبندی در هنگام تغییر 03:31
-
هایلایت کردن صفحه فعال 03:29
-
کارت کاربر و طرحبندی گرید 06:42
-
اسکلتونهای بارگذاری 06:02
-
پارامتر مسیر و لینکدهی به جزئیات شخص 02:10
-
صفحه بارگذاری برای جزئیات شخص 01:07
-
مقدمه جستجو 00:31
-
ورودی جستجو 04:24
-
صفحه جستجو 04:54
-
جدول نتایج جستجو 04:00
-
لاگر Drizzle 00:56
-
جستجوی فازی و SQL خام 05:14
-
مقدمه صفحه مهارتها 00:55
-
اسکیمای مهارتها 07:07
-
Seed کردن اسکریپت مهارتها 02:57
-
Seed کردن کاربران به مهارتها 04:01
-
صفحه لیست مهارتها 05:31
-
مقدمه صفحه جزئیات مهارت 00:47
-
لیست کاربران دارای مهارت 05:54
-
مرتبسازی کامپوننت انتخاب مهارت 06:36
-
مرتبسازی با پارامتر Sort 02:24
-
استایلدهی صفحه جزئیات مهارت 02:41
-
مقدمه صفحه پروفایل 00:46
-
اکشنهای سرور در مقابل مسیرهای API 04:46
-
کامپوننت سرور در برابر کامپوننت کلاینت 01:40
-
نصب Zod 00:24
-
بروزرسانی اکشن کاربر 02:32
-
فیلد بیو 00:45
-
ادامه بروزرسانی اکشن کاربر 02:32
-
فرم کاربر 04:58
-
فیکس کردن باگ سشن 00:45
-
ارسال فرم کاربر 03:09
-
سیستم نوتیفیکیشن Mantine 05:37
-
Stub ویرایشگر متن غنی 05:30
-
اتصال ویرایشگر 03:49
-
استایل ویرایشگر 01:48
-
کار با فرمها و اکشنهای سرور 02:11
-
فیکس کردن باگ UseEffect 00:47
-
مقدمه مدیریت مهارتها 01:15
-
تبهای پروفایل 04:53
-
نمایش لیست امتیازها 04:53
-
استایلدهی به جدول 02:18
-
Stub فرم امتیازدهی مهارت 03:47
-
بروزرسانی امتیازدهی مهارت و اعتبارسنجی مجدد مسیر 09:35
-
مقدمه مودال افزودن مهارت 00:46
-
افزودن کاربران به اکشن مهارتها 05:48
-
دکمه افزودن کاربر به مهارت 03:23
-
انتخاب از میان همه مهارتها 03:51
-
اتصال فرم به اکشن 05:11
-
دکمه حذف اختصاص کاربر به مهارت 04:45
-
اسکیمای رنگ Mantine 01:43
-
آبجکت تم Mantine 02:16
-
TailwindCSS همراه با Mantine Dark Mode 03:18
-
نمودارهای صفحه داشبورد 06:38
-
فیکس کردن مشکل نمودار مهارتها 00:21
-
مقدمه جزئیات شخص 00:48
-
کارت کاربر 02:27
-
نمایش بیو با TailwindCSS Prose 03:44
-
مقدمه سیستم توصیهگر 00:36
-
شباهت کسینوسی 03:59
-
هرم تست 01:33
-
نصب و راهاندازی Vitest 03:03
-
اولین تست واحد برای شباهت کسینوسی 02:49
-
نصب مسیرهای Vite TSConfig 01:40
-
تستهای شباهت کسینوسی 01:41
-
مقدمه شباهت ترکیبی 01:28
-
پیادهسازی و تست شباهت ترکیبی 05:42
-
الگوریتم نزدیکترین همسایه K 03:04
-
پیادهسازی الگوریتم نزدیکترین همسایه K 09:34
-
تست الگوریتم نزدیکترین همسایه K 04:02
-
افزودن فایل env به gitignore 00:26
-
استفاده از الگوریتم نزدیکترین همسایه K 01:18
-
نمایش افراد مشابه 02:54
-
استایلدهی به افراد مشابه 03:23
-
مقدمه استقرار 00:37
-
استقرار اپلیکیشن روی Vercel 01:18
-
بررسی استقرار روی Vercel 01:00
-
ایجاد پایگاه داده PostgreSQL در تولید 02:20
-
ایجاد اپلیکیشن OAuth برای تولید 01:28
-
افزودن متغیرهای محیطی 03:09
-
تولید فایل مهاجرت SQL 00:52
-
اسکریپت مهاجرت 01:19
-
تبدیل اسکریپت به مسیر API 04:43
-
ایمنسازی API اسکریپتها با میانافزار 06:05
-
افزودن متغیر محیطی کلید API اسکریپتها به تولید 00:25
-
مهاجرت مسیر API 02:38
-
تلاش برای استقرار در تولید 01:06
-
افزودن sslmode=require به URL پایگاه داده PostgreSQL 04:15
-
تلاش مجدد برای استقرار در تولید 00:20
-
تلاش برای پیکربندی مسیر نسبی 00:57
-
اجرای SQL با TablePlus به عنوان راهحل موقتی 01:42
-
تبدیل اسکریپتهای Seed به مسیرهای API 04:38
-
بستن اتصال پایگاه داده فقط برای اسکریپتها 02:05
-
مشکل در مسیرهای API استاتیک 02:18
-
خارج شدن از کش با Force Dynamic 00:52
-
اعتبارسنجی حذف کش مسیرهای API اسکریپتها 01:32
-
استفاده از لایه CSS برای فیکس کردن مشکل تداخل Tailwind و Mantine 02:03
-
تست اپلیکیشن در تولید 01:33
-
نصب pg_trgm در تولید 02:19
مشخصات آموزش
نمونه اولیه فولاستک لینکدین با Next.js
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:متوسط
- تعداد درس:160
- مدت زمان :06:54:05
- حجم :3.16GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy