ساخت اپلیکیشن پیشرفته StackOverflow با دوره کامل Next.js 15
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت اپلیکیشن فولاستک Stack Overflow
- طراحی کامل اپلیکیشن با Tailwind CSS و Shadcn از صفر
- اصول React.js
- اصول MongoDB
- اصول Next.js
- احرازهویت با پسورد ایمیل
- احرازهویت با گیتهاب
- ایجاد قابلیت ارسال سوال
- ایجاد اکشن تگها
- راهاندازی ارسال پاسخ
- راهاندازی سیستم رأیدهی
- مسیرهای محافظت شده در Next.js
- لاگین و خروج از سیستم با Next Auth
- کد منبع کامل بخش به بخش
- کد منبع درس به درس
- ساخت مدل و تست کوئریها
پیشنیازهای دوره
- درک اولیه از جاوا اسکریپت
- آشنایی خوب با Tailwind CSS
- دانش HTML و CSS
- آشنایی اولیه با خط فرمان
توضیحات دوره
به دوره «ساخت کامل نسخه پیشرفته اپلیکیشن StackOverflow با Next.js 15» خوشآمدید. این دوره کامل توسعه فولاستک، شما را از سطح مبتدی تا حرفهای با استفاده از آخرین نسخه فریمورک Next.js 15 راهنمایی میکند. اگر مشتاق یادگیری توسعه وب مدرن هستید، میخواهید یک اپلیکیشن واقعی مثل StackOverflow بسازید و پروژه پورتفولیو آماده برای استقرار ایجاد کنید، این دوره انتخاب ایدهآل برای شما است. این آموزش جامع که در یودمی برگزار میشود، کدنویسی عملی، ابزارهای استاندارد صنعت و راهنمایی گام به گام را برای ساخت اپلیکیشن پیشرفته فولاستک از ابتدا ترکیب کرده است.
چرا این دوره Next.js را انتخاب کنید؟
Next.js به فریمورک محبوب برای ساخت وب اپلیکیشنهای سریع، مقیاسپذیر و بهینه شده برای سئو تبدیل شده است. در این دوره به Next.js 15 میپردازید و قابلیتهای پیشرفته آن را هنگام ساخت کلون StackOverflow یاد میگیرید. چه مبتدی باشید که میخواهید با اصول React.js آشنا شوید، چه توسعهدهندهای که به MongoDB علاقه دارد یا مهندس مشتاق فولاستک باشید، این دوره مهارتهای پرتقاضا را به شما میآموزد. در پایان، پروژهای پالیش شده آماده دارید که میتوانید در گیتهاب نمایش دهید، کارفرمایان را تحت تأثیر قرار دهید یا حتی به عنوان ایده استارتاپی راهاندازی کنید.
آنچه خواهید ساخت:
این دوره صرفا آموزش کدنویسی نیست، بلکه سفری کامل برای ساخت اپلیکیشن فول استک StackOverflow است. شما یک پلتفرم پویا ایجاد میکنید که کاربران میتوانند کارهای زیر را انجام دهند:
- سوالات را ارسال کرده و با دستهبندیهای مرتبط تگگذاری کنند.
- پاسخها را پست کرده و با سیستم رأیدهی تعامل داشته باشند.
- با امنیت بالا از طریق ایمیل و پسورد و یا لاگین به گیتهاب احرازهویت کنند.
- با اطمینان مسیرهای محافظت شده را ناوبری کنند.
از طراحی رابط کاربری با Tailwind CSS و Shadcn تا راهاندازی بکاند قوی با MongoDB، این دوره همه لایههای توسعه را پوشش میدهد. همچنین کد منبع بخش به بخش و درس به درس در اختیار شما قرار میگیرد تا به راحتی دنبال کنید.
ویژگیهای کلیدی دوره
در اینجا دلایلی که این دوره Next.js 15 را در یودمی متمایز میکند آمده است:
- ساخت اپلیکیشن فولاستک StackOverflow - ساخت اپلیکیشن واقعی با یکپارچهسازی رابط کاربری و بکاند
- طراحی با Tailwind CSS و Shadcn - ایجاد رابط کاربری زیبا و واکنشگرا با ابزارهای طراحی مدرن
- اصول React.js - تسلط به مبانی React.js مانند کامپوننتها، هوکها و مدیریت state
- اصول MongoDB - یادگیری طراحی اسکیماها و ایجاد مدلها و کوئری موثر پایگاه داده
- اصول Next.js - بررسی مسیریابی، مسیرهای API و رندرینگ سمت سرور در Next.js 15
- تسلط به احرازهویت - پیادهسازی لاگین و خروج ایمن از سیستم با NextAuth.js، شامل پسورد ایمیل و OAuth با گیتهاب
- ویژگیهای تعاملی - ساخت قابلیت ارسال سوال، تگها، پست کردن پاسخ و سیستم رأیدهی
- مسیرهای محافظت شده - ایمنسازی اپلیکیشن خود با میانافزار و منطق احرازهویت Next.js
- کد منبع کامل - دسترسی به کد سازماندهی شده و قابل دانلود برای هر بخش و درس
- یادگیری عملی - تست مدلها و کوئریها با مثالهای واقعی
آنچه در پایان دوره یاد خواهید گرفت:
- ایجاد یک کلون کاملا تابعی از StackOverflow با Next.js 15
- تسلط به توسعه فولاستک با React.js و MongoDB و Next.js
- درک احرازهویت مدرن با NextAuth.js
- طراحی رابطهای کاربری واکنشگرا با Tailwind CSS و Shadcn
- کسب اعتماد به نفس در ساخت و استقرار اپلیکیشنهای واقعی
همچنین اینکه کدهای منبع بخش به بخش و درس به درس به همراه فایلهای کد ارائه میشود تا به سادگی کار را دنبال کنید و پروژه خود را عیبیابی و سفارشی کنید.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان فرانتاند که میخواهند مهارتهای خود را در توسعه بکاند با Next.js و MongoDB ارتقا دهند.
- کسانی که میخواهند پروژه واقعی برای تقویت رزومه خود بسازند.
- کسی که آماده ارتقای مهارتهای فولاستک خود و ویژگیهای پیشرفته Next.js است.
- کسی که به توسعه وب علاقهمند است.
- علاقهمندان به فناوری که میخواهند روندهای توسعه وب مدرن را بررسی کنند.
ساخت اپلیکیشن پیشرفته StackOverflow با دوره کامل Next.js 15
-
مقدمه دوره - آنچه خواهید ساخت 03:35
-
به دوره خوش آمدید 01:15
-
به حمایت شما نیازمندیم 01:20
-
ماموریت من 01:23
-
مقدمه ریاکت 06:46
-
ساخت اپلیکیشن جدید ریاکت با Vite 07:21
-
فرمان بیلد و اجرای پروژه 06:33
-
بررسی ساختار پروژه ریاکت از نزدیک 14:43
-
سازماندهی فایلها و پوشهها 05:09
-
بهترین افزونهها و تنظیمات ویژوال استودیو کد برای توسعه ریاکت 06:19
-
درک اولیه کامپوننت - بخش 1 08:59
-
درک اولیه کامپوننت - بخش 2 07:22
-
JSX و قراردادها 09:41
-
دستور کوتاه شرطی If else در JSX 04:01
-
تابع فوراً فراخوانی شده در JSX 06:42
-
حلقهها در JSX 05:52
-
رندرینگ شرطی JSX با استفاده از If Else 08:55
-
رندرینگ شرطی JSX با استفاده از دستور Switch 04:07
-
رندرینگ شرطی JSX با استفاده از عملگر سهتایی 02:42
-
رندرینگ شرطی JSX با استفاده از عملگر منطقی And 03:32
-
رندرینگ شرطی JSX با استفاده از تابع فوراً فراخوانی شده 03:40
-
ارسال ویژگیها به کامپوننت فرزند 05:13
-
ارسال رشته ساده به کامپوننت فرزند 05:06
-
ارسال آبجکت به کامپوننت فرزند 05:35
-
ارسال تابع به کامپوننت فرزند 02:52
-
مدیریت رویداد کلیک 05:40
-
مدیریت ارسال فرم 05:07
-
استفاده از React Router Dom 15:15
-
کامپوننتهای لینک و لینک ناوبری برای مسیریاب 13:37
-
مسیریابی مرورگر در مقابل HashRouter 05:09
-
ارسال پارامتر از طریق ناوبری 05:45
-
[هوک] آشنایی با هوک 01:45
-
[هوک] کار با useRef برای innerText و innerHTML 09:58
-
[هوک] استفاده از useRef برای کار با Attribute 05:44
-
[هوک] استفاده از useRef برای کار با عناصر ورودی 07:38
-
[هوک] استفاده از useRef برای کار با کلاسهای CSS 06:13
-
[هوک] useRef برای کش کردن محاسبات سنگین 15:27
-
[هوک] درک عمیق useState 08:35
-
[هوک] کار با useState و آبجکت تغییرناپذیر 08:21
-
[هوک] کار با useState و آرایه تغییرناپذیر - بخش 1 14:15
-
[هوک] کار با useState و آرایه تغییرناپذیر - بخش 2 06:48
-
[هوک] مدیریت فرم با useState مانند حرفهای - بخش 1 12:32
-
[هوک] مدیریت فرم با useState مانند حرفهای - بخش 2 11:34
-
[هوک] درک آرگومانها و کاربردهای useEffect 06:40
-
[هوک] استفاده از useEffect برای فراخوانی API با Promise 07:00
-
[هوک] استفاده از useEffect برای فراخوانی API با async/await 07:09
-
راهاندازی ابزارهای محیط 05:25
-
Next.js چیست و چرا Next JS؟ 03:10
-
تفاوت بین ریاکت و Next.js چیست؟ 04:38
-
ساخت اپلیکیشن جدید و بررسی فرآیند بهینهسازی بیلد 08:49
-
کار با ساختار پروژه 14:15
-
مفهوم صفحه اصلی و کامپوننت تابعی 06:40
-
کار با دارایی استاتیک در پوشه Public 05:57
-
کار با CSS گلوبال و ماژول 07:18
-
بررسی رندرینگ سمت کلاینت 14:06
-
بررسی رندرینگ سمت سرور 05:52
-
کجا از SSR و کجا از CSR استفاده کنیم؟ 05:21
-
چرا از use Client را مینویسیم؟ 05:27
-
بررسی مفهوم مسیریابی دایرکتوری 05:56
-
مفهوم مسیریابی دایرکتوری تودرتو 04:20
-
کامپوننت اولیه لینک 08:50
-
نوار پیشرفت در مسیریابی 08:31
-
مدیریت لینک فعال 07:14
-
کوئری کامپوننت لینک 06:09
-
کوئری کامپوننت لینک با useSearchParams 04:14
-
پیش واکشی کامپوننت لینک و جایگزینی ویژگیها 07:21
-
جزئیات مسیریابی برنامهای 12:13
-
تفکر در Next.js - کامپوننت سرور چیست؟ 05:57
-
تفکر در Next.js - کامپوننت کلاینت چیست؟ 02:54
-
درک مسیر اولیه و متغیرهای محیطی 11:03
-
درک پیکربندی هدر 05:46
-
پیکربندی امنیت هدر - بخش 1 07:17
-
پیکربندی امنیت هدر - بخش 2 07:47
-
پیکربندی امنیت هدر - بخش 3 08:22
-
اتصال و فشردهسازی 05:40
-
بهینهسازی تصاویر 08:36
-
بهینهسازی فونت - بخش 1 07:11
-
بهینهسازی فونت - بخش 2 05:46
-
اسکریپت و داراییهای استاتیک 03:56
-
راهاندازی میانافزار - بخش 1 10:13
-
راهاندازی میانافزار - بخش 2 11:13
-
صفحه Not Found 08:59
-
آشنایی با MongoDB 01:41
-
نصب MongoDB و Compass 06:23
-
اتصال به MongoDB 08:07
-
اسکیما و مدلها 07:24
-
ساخت و ذخیره یک سند 08:05
-
یافتن مستندات به روشهای مختلف 10:21
-
کوئری API برای انتخاب، مرتبسازی، محدودیت و شمارش مستندات 08:51
-
کوئری پیچیده و عملگرهای مقایسه 07:58
-
کوئری پیچیده با عملگرهای And و Or 05:34
-
تمرین کوئری پیشرفته 06:13
-
بروزرسانی یک سند (روش 1) 03:43
-
بروزرسانی یک سند (روش 2) 05:38
-
حذف مستندات به 2 روش 03:53
-
مقدمه - آنچه خواهید ساخت 03:35
-
به دوره خوش آمدید 01:15
-
راهاندازی محیط 05:29
-
ساخت اپلیکیشن Next.js 15 15:42
-
راهاندازی گیت و گیتهاب 08:25
-
راهاندازی Tailwind CSS 09:49
-
تمها در Tailwind CSS 13:24
-
راهاندازی فونتها 11:06
-
داراییها و متادیتا 05:14
-
مسیریابی بر اساس فایل 04:53
-
مسیرهای تودرتو 03:54
-
مسیرهای پویا 07:39
-
گروهبندی مسیر 08:33
-
راهاندازی تمها 13:21
-
نصب ShadCN UI 07:28
-
ساخت نوار ناوبری 13:39
-
ایجاد تاگلر تم 13:24
-
احرازهویت چیست؟ 02:21
-
ایجاد مسیرهای احرازهویت 10:53
-
ایجاد طرحبندی احرازهویت و فرم احرازهویت اجتماعی - بخش 1 13:19
-
ایجاد طرحبندی احرازهویت و فرم احرازهویت اجتماعی - بخش 2 07:00
-
فیکس کردن باگها برای استایل نوار ناوبری 01:59
-
راهاندازی NextAuth با ارائهدهنده گیتهاب - بخش 1 07:04
-
راهاندازی NextAuth با ارائهدهنده گیتهاب - بخش 2 05:50
-
پیادهسازی ورود به گیتهاب - بخش 1 09:34
-
پیادهسازی ورود به گیتهاب - بخش 2 17:16
-
پیادهسازی ورود به گیتهاب - بخش 3 04:36
-
ساخت فرم احرازهویت با ایمیل - بخش 1 17:02
-
ساخت فرم احرازهویت با ایمیل - بخش 2 09:57
-
ناوبری موبایل - بخش 1 11:09
-
ناوبری موبایل - بخش 2 10:34
-
ناوبری موبایل - بخش 3 15:58
-
ناوبری موبایل - بخش 4 15:05
-
پیادهسازی سایدبار سمت چپ - بخش 1 13:52
-
پیادهسازی سایدبار سمت چپ - بخش 2 05:19
-
پیادهسازی سایدبار سمت راست - بخش 1 14:45
-
پیادهسازی سایدبار سمت راست - بخش 2 12:33
-
پیادهسازی سایدبار سمت راست - بخش 3 11:15
-
پیادهسازی سایدبار سمت راست - بخش 4 09:41
-
طرحبندی صفحه اصلی 09:42
-
نوار جستجوی محلی - بخش 1 09:25
-
نوار جستجوی محلی - بخش 2 10:24
-
نوار جستجوی محلی - بخش 3 12:27
-
نوار جستجوی محلی - بخش 4 16:52
-
نوار جستجوی محلی - بخش 5 12:19
-
راهاندازی فیلتر - بخش 1 16:04
-
راهاندازی فیلتر - بخش 2 12:56
-
راهاندازی فیلتر - بخش 3 10:16
-
کارت سوال - بخش 1 17:10
-
کارت سوال - بخش 2 11:28
-
کارت سوال - بخش 3 19:31
-
کارت سوال - بخش 4 13:27
-
فیکس کردن باگهای کارت سوال 02:56
-
طراحی فرم سوال 15:54
-
ویرایشگر سوال - بخش 1 10:22
-
ویرایشگر سوال - بخش 2 10:36
-
ورودی چندین تگ - بخش 1 16:27
-
ورودی چندین تگ - بخش 2 14:10
-
ورودی چندین تگ - بخش 3 11:58
-
تفکر در بکاند 03:26
-
راهاندازی MongoDB و Mongoose - بخش 1 11:36
-
راهاندازی MongoDB و Mongoose - بخش 2 15:28
-
فیکس کردن مشکلات در MONGODB_URI محیطی 01:14
-
معماری ساختار پایگاه داده 05:07
-
ساخت مدل کاربر 12:25
-
ساخت مدل حساب 08:46
-
ساخت مدل سوال 08:36
-
ساخت مدل پاسخ 05:16
-
ساخت مدلهای تگ 07:52
-
ساخت مدل رأی 05:20
-
ساخت مدل کالکشن 03:21
-
ساخت مدل تعامل 05:56
-
پیادهسازی مدیریت خطا - بخش 1 09:50
-
پیادهسازی مدیریت خطا - بخش 2 11:53
-
پیادهسازی مدیریت خطا - بخش 3 12:55
-
پیادهسازی مدیریت خطا - بخش 4 09:06
-
پیادهسازی لاگ کردن - بخش 1 11:26
-
پیادهسازی لاگ کردن - بخش 2 12:08
-
ایجاد و خواندن مسیرهای کاربر - بخش 1 10:05
-
ایجاد و خواندن مسیرهای کاربر - بخش 2 08:11
-
ایجاد و خواندن مسیرهای کاربر - بخش 3 12:47
-
ایجاد و خواندن مسیرهای کاربر - بخش 4 09:18
-
مسیرهای پویای کاربر - بخش 1 11:31
-
مسیرهای پویای کاربر - بخش 2 08:20
-
کاربران بر اساس ایمیل 09:55
-
ایجاد و خواندن مسیرهای حساب 11:26
-
مسیرهای پویای حساب 08:43
-
حساب بر اساس ارائهدهنده 05:23
-
هندلر واکشی API - بخش 1 20:15
-
هندلر واکشی API - بخش 2 17:57
-
هندلر واکشی API - بخش 3 13:06
-
حسابها برای oAuth - بخش 1 19:43
-
حسابها برای oAuth - بخش 2 16:49
-
حسابها برای oAuth - بخش 3 11:10
-
حسابها برای oAuth - بخش 4 15:44
-
حسابها برای oAuth - بخش 5 10:06
-
جریان اپلیکیشن 04:19
-
هندلر اکشن سرور 14:37
-
ثبتنام - بخش 1 04:20
-
ثبتنام - بخش 2 15:56
-
ثبتنام - بخش 3 10:57
-
ثبتنام - بخش 4 18:34
-
ورود به سیستم 15:41
-
بررسی احرازهویت و خروج از سیستم - بخش 1 11:20
-
بررسی احرازهویت و خروج از سیستم - بخش 2 11:15
-
بررسی احرازهویت و خروج از سیستم - بخش 3 22:52
-
ایجاد اکشن سوال - بخش 1 19:02
-
ایجاد اکشن سوال - بخش 2 17:24
-
ساخت و تست سوال - بخش 1 09:58
-
ساخت و تست سوال - بخش 2 20:48
-
اکشن ویرایش سوال - بخش 1 11:53
-
اکشن ویرایش سوال - بخش 2 19:48
-
اکشن ویرایش سوال - بخش 3 13:29
-
اکشن ویرایش سوال - بخش 4 08:00
-
ویرایش و تست سوال - بخش 1 09:19
-
ویرایش و تست سوال - بخش 2 17:29
-
فیکس کردن باگ ویرایش و تست سوال 26:14
-
واکشی و نمایش سوالات - بخش 1 18:37
-
واکشی و نمایش سوالات - بخش 2 14:24
-
واکشی و نمایش سوالات - بخش 3 12:29
-
واکشی و نمایش سوالات - بخش 4 17:10
-
واکشی و نمایش سوالات - بخش 5 11:39
-
واکشی و نمایش سوالات - بخش 6 10:15
-
واکشی و نمایش سوالات - بخش 7 18:37
-
واکشی و نمایش سوالات - بخش 8 03:21
-
ایجاد اکشن تگها - بخش 1 20:11
-
ایجاد اکشن تگها - بخش 2 05:57
-
نمایش تگها - بخش 1 08:54
-
نمایش تگها - بخش 2 07:20
-
نمایش تگها - بخش 3 11:18
-
نمایش تگها - بخش 4 17:11
-
فیکس کردن باگهای افزودن تگها به سوال 10:43
-
اکشن ایجاد تگهای سوالات - بخش 1 14:47
-
اکشن ایجاد تگهای سوالات - بخش 2 10:40
-
نمایش سوالات دارای تگ - بخش 1 10:15
-
نمایش سوالات دارای تگ - بخش 2 07:53
-
ساخت رابط کاربری جزئیات سوال - بخش 1 18:02
-
ساخت رابط کاربری جزئیات سوال - بخش 2 15:10
-
رندرینگ محتوای سوال 13:10
-
واکشی جزئیات سوال 08:52
-
Views سوالات 13:40
-
ایجاد فرم پاسخ - بخش 1 12:09
-
ایجاد فرم پاسخ - بخش 2 10:37
-
اکشن ایجاد پاسخ - بخش 1 12:59
-
اکشن ایجاد پاسخ - بخش 2 10:25
-
اکشن ایجاد پاسخ - بخش 3 13:45
-
پیادهسازی دریافت تمام پاسخها - بخش 1 13:36
-
پیادهسازی دریافت تمام پاسخها - بخش 2 12:37
-
نمایش تمام پاسخها - بخش 1 16:12
-
نمایش تمام پاسخها - بخش 2 17:32
-
فیکس کردن باگها در صفحه AnswerCard 02:53
-
توسعه رابط کاربری رأیدهی - بخش 1 20:21
-
توسعه رابط کاربری رأیدهی - بخش 2 09:58
-
اکشن ایجاد رأی - بخش 1 16:27
-
اکشن ایجاد رأی - بخش 2 13:00
-
اکشن ایجاد رأی - بخش 3 14:23
-
اکشن Has Voted 12:22
-
یکپارچهسازی اکشنها در رابط کاربری - بخش 1 18:40
-
یکپارچهسازی اکشنها در رابط کاربری - بخش 2 08:56
-
یکپارچهسازی اکشنها در رابط کاربری - بخش 3 - فیکس کردن باگها 06:08
-
رأیدهی به پاسخها 08:11
-
صفحه افزودن به کالکشن - بخش 1 09:16
-
صفحه افزودن به کالکشن - بخش 2 08:46
-
پیادهسازی ذخیره سوال 12:53
-
نمایش سوالات ذخیره شده توسط کاربر 18:51
-
اکشن دریافت تمام سوالات ذخیره شده - بخش 1 15:15
-
اکشن دریافت تمام سوالات ذخیره شده - بخش 2 16:44
-
توسعه صفحه کالکشنها 09:19
-
اکشن دریافت تمام کاربران 17:49
-
نمایش تمام کاربران - بخش 1 10:54
-
نمایش تمام کاربران - بخش 2 15:57
-
ایجاد کامپوننت فیلتر - بخش 1 13:51
-
ایجاد کامپوننت فیلتر - بخش 2 14:28
-
یکپارچهسازی فیلترها در همه جا 09:59
-
راهاندازی صفحهبندی - بخش 1 19:00
-
راهاندازی صفحهبندی - بخش 2 05:42
-
نمایش سوالات برتر 12:59
-
نمایش تگهای محبوب 11:14
-
دریافت اطلاعات کاربر 13:00
-
توسعه هدر پروفایل - بخش 1 15:18
-
توسعه هدر پروفایل - بخش 2 20:09
-
توسعه رابط کاربری آمار - بخش 1 15:50
-
توسعه رابط کاربری آمار - بخش 2 05:25
-
طرحبندی تبها 07:54
-
پیادهسازی تب سوالات کاربر - بخش 1 09:08
-
پیادهسازی تب سوالات کاربر - بخش 2 11:00
-
پیادهسازی تب پاسخهای کاربر - بخش 1 07:13
-
پیادهسازی تب پاسخهای کاربر - بخش 2 19:31
مشخصات آموزش
ساخت اپلیکیشن پیشرفته StackOverflow با دوره کامل Next.js 15
- تاریخ به روز رسانی: 1404/06/14
- سطح دوره:همه سطوح
- تعداد درس:283
- مدت زمان :48:06:07
- حجم :25.01GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy