آموزش راهنمای جامع ساخت اپلیکیشن فول استک با Next.js - آخرین آپدیت

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

مقدمه Introduction

• معرفی دوره Introduction to the course

• راه اندازی محیط توسعه Setting up the developer environment

• منابع و سورس کد دوره Course assets and source code

• دریافت راهنمایی Getting help

• از کجا شروع کنیم - 2 گزینه Where to start - 2 Options

معرفی و مبانی NextJS NextJS Introduction and basics

• معرفی بخش 2 Introduction to Section 2

• ایجاد پروژه NextJS Creating the NextJS project

• محتویات پروژه What is in the project

• نصب HeroUI (قبلا NextUI) و React icons Installing HeroUI (formally NextUI) and React icons

• مسیریابی در NextJS Routing in NextJS

• افزودن نوار ناوبری به برنامه Adding a Nav bar to the app

• ایجاد مسیرهای اضافی Creating additional routes

• فعال کردن لینک ها Making the links active

• ذخیره کد در کنترل منبع Saving our code into source control

• خلاصه بخش 2 Summary of Section 2

احراز هویت قسمت اول Authentication Part One

• معرفی بخش 3 Introduction to Section 3

• ایجاد فرم ورود Creating a login form

• معرفی React hook form React hook form introduction

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

• ایجاد فرم ثبت نام Creating the register form

• NextAuth چیست؟ What is NextAuth?

• Prisma چیست؟ What is Prisma?

• راه اندازی NextAuth و Prisma ORM Setting up NextAuth and Prisma ORM

• ایجاد پایگاه داده Creating the Database

• پیکربندی Prisma در برنامه Configuring Prisma in our app

• ثبت نام کاربر جدید Registering a new user

• مدیریت خطاها در فرم Handling errors in the form

• مدیریت خطاها در فرم قسمت 2 Handling errors in the form Part 2

• ورود کاربران Signing in users

• ورود کاربران قسمت 2 Signing in users Part 2

• افزودن اعلان های Toast به برنامه Adding notification toasts to the app

• دریافت داده های Session Getting the session data

• استفاده از NextAuth callbacks Using NextAuth callbacks

• افزودن منوی کشویی به نوار ناوبری Adding a dropdown menu to the Nav bar

• افزودن منوی کشویی به نوار ناوبری قسمت 2 Adding a dropdown menu to the Nav bar Part 2

• محافظت از مسیرها با استفاده از Middleware Protecting routes using Middleware

• اختیاری: استفاده از Docker برای Postgres Optional: Using Docker for Postgres

• خلاصه بخش 3 Summary of Section 3

ساخت رابط کاربری (UI) Building the UI

• معرفی بخش 4 Introduction to Section 4

• به روز رسانی شمای Prisma Updating the Prisma schema

• Seed کردن داده ها در پایگاه داده Seeding data into the Database

• واکشی داده ها از پایگاه داده با استفاده از Server Actions Fetching data from the Database using server actions

• ایجاد کارت برای اعضا Creating cards for the members

• استایل دهی به کارت های اعضا Styling the member cards

• استفاده از مسیرهای پویا در NextJS Using dynamic routes in NextJS

• افزودن سایدبار برای صفحه جزئیات عضو Adding a Sidebar for the Member detailed page

• استفاده از Layout Pages در NextJS Using NextJS Layout pages

• ایجاد محتوای جزئیات عضو Creating the Member detailed content

• افزودن نشانگرهای Loading Adding loading indicators

• افزودن صفحه خطای سفارشی Adding a custom error page

• خلاصه بخش 4 Summary of Section 4

افزودن ویژگی جدید - لایک ها Adding a new feature - likes

• معرفی بخش 5 Introduction to Section 5

• به روز رسانی شمای Prisma برای رابطه Many-to-Many Updating the Primsa schema for a many to many relationship

• افزودن تابع Toggle لایک Adding the like toggle function

• ایجاد دکمه لایک Creating a like button

• واکشی لایک ها Fetching the likes

• افزودن لیست Actions Addling the list actions

• افزودن لیست Tabs Adding the list tabs

• استفاده از Hook 'useTransition' برای Loading نامحسوس Using the useTransition hook for subtle loading

• خلاصه بخش 5 Summary of Section 5

به روز رسانی منابع و آپلود تصویر Updating resources and image upload

• معرفی بخش 6 Introduction to Section 6

• افزودن مسیر ویرایش عضو Adding the edit member route

• افزودن فرم ویرایش عضو Adding the edit member form

• افزودن فرم ویرایش عضو قسمت 2 Adding the edit member form Part 2

• افزودن Server Action برای به روز رسانی عضو Adding the server action to update the member

• نمایش تصاویر در کامپوننت ویرایش عضو Displaying the images in the member edit component

• افزودن دکمه ها برای Action های تصویر Adding the buttons for the image actions

• تصاویر را کجا ذخیره کنیم؟ Where to store the images?

• راه اندازی Cloudinary Setting up Cloudinary

• افزودن دکمه آپلود تصویر Adding an image upload button

• افزودن Server Actions آپلود تصویر Adding the image upload server actions

• استفاده از کامپوننت تصویر Cloudinary Using the Cloudinary image component

• تنظیم تصویر اصلی Setting the main image

• چالش - تنظیم تصویر اصلی Challenge - setting the main image

• راه حل چالش Challenge solution

• حذف یک تصویر Deleting an image

• مرتب سازی تصاویر Tidying up the images

• خلاصه بخش 6 Summary of Section 6

افزودن ویژگی پیام ها Adding the Messages feature

• معرفی بخش 7 Introduction to Section 7

• تنظیم Prisma برای پیام ها Setting up Prisma for messages

• ایجاد فرم چت Creating a chat form

• ایجاد Action ارسال پیام Creating the send message action

• دریافت Thread پیام Getting the message thread

• ایجاد Message DTO Creating a message DTO

• نمایش پیام ها Displaying the messages

• نمایش پیام ها قسمت 2 Displaying the messages Part 2

• بهبود Message Box Improving the message box

• افزودن سایدبار پیام Adding the message sidebar

• ایجاد Action واکشی پیام ها Creating the fetch messages action

• ایجاد جدول پیام ها Creating the message table

• افزودن قابلیت خوانده شدن پیام Adding the message read functionality

• استفاده از Custom Cells در NextUI Table Using custom cells in the NextUI table

• افزودن Action حذف پیام Adding the delete message action

• تکمیل جدول پیام Finishing up the message table

• خلاصه بخش 7 Summary of Section 7

ارتباطات Realtime Realtime communications

• معرفی بخش 8 Introduction to Section 8

• راه اندازی Pusher Setting up Pusher

• افزودن قابلیت Live Chat Adding the live chat functionality

• دریافت پیام های Live Receiving the live messages

• Next.js Caching Next.js Caching

• افزودن ویژگی Read Message Adding the read message feature

• راه اندازی Presence Setting up presence

• افزودن Presence Store Adding a presence store

• ایجاد Presence Channel Hook Creating a presence channel hook

• استفاده از Presence Channel Hook Using the presence channel hook

• ایجاد Presence Indicator Creating a presence indicator

• نمایش Presence در کامپوننت های دیگر Displaying presence in other components

• راه اندازی Private Channel Setting up a private channel

• ایجاد Message Store Creating a message store

• بازسازی جدول پیام Refactoring the message table

• افزودن قابلیت Realtime به جدول پیام Adding the realtime functionality to the message table

• ساخت Toast سفارشی برای اعلان ها Making a custom toast for notifications

• دریافت تعداد پیام های خوانده نشده Getting the unread message count

• به روز رسانی Count بر اساس Event Updating the count based on the event

• چالش - اطلاع رسانی به کاربران در مورد لایک ها Challenge - notifying users of likes

• راه حل چالش Challenge solution

• خلاصه بخش 8 Summary of section 8

صفحه بندی، مرتب سازی و فیلتر کردن Paging, sorting and filtering

• معرفی بخش 9 Introduction to Section 9

• افزودن کامپوننت Filters Adding the filters component

• افزودن رابط کاربری برای صفحه بندی Adding the UI for pagination

• افزودن قابلیت Age Slider Adding the age slider functionality

• افزودن قابلیت مرتب سازی Adding the sorting functionality

• به روز رسانی ویژگی Last Active Updating the last active property

• افزودن فیلتر جنسیت Adding the gender filter

• افزودن Filter Store Adding a filter store

• افزودن Filter Hook Adding a filter hook

• افزودن Empty State Adding empty state

• افزودن نشانگرهای Loading برای فیلترها Adding loading indicators for the filters

• افزودن Pagination Store Adding a pagination store

• افزودن قابلیت صفحه بندی Adding the pagination functionality

• افزودن قابلیت صفحه بندی قسمت 2 Adding the pagination functionality Part 2

• صفحه بندی مبتنی بر Cursor Cursor based pagination

• صفحه بندی مبتنی بر Cursor قسمت 2 Cursor based pagination part 2

• صفحه بندی مبتنی بر Cursor قسمت 3 Cursor based pagination part 3

• چالش - فیلتر کردن کاربرانی که عکس ندارند Challenge - filtering out users without photos

• راه حل چالش Challenge solution

• خلاصه بخش 9 Summary of Section 9

احراز هویت قسمت دوم Authentication Part Two

• معرفی بخش 10 Introduction to Section 10

• افزودن Register Wizard قسمت 1 Adding a Register wizard part 1

• افزودن Register Wizard قسمت 2 Adding a Register wizard part 2

• افزودن Register Wizard قسمت 3 Adding a Register wizard part 3

• ارسال فرم Submitting the form

• تنظیم Tokens و Reset کردن پایگاه داده Setting up tokens and resetting the Database

• ایجاد توابع Token Creating the token functions

• افزودن Email Provider Adding an email provider

• افزودن تابع Verify Email Adding the verify email function

• افزودن قابلیت Forgot Password قسمت 1 Adding the forgot password functionality part 1

• افزودن قابلیت Forgot Password قسمت 2 Adding the forgot password functionality part 2

• افزودن قابلیت Forgot Password قسمت 3 Adding the forgot password functionality part 3

• OAuth 2.0 Flow OAuth 2.0 flow

• Social Login قسمت 1 Social Login part 1

• Social Login قسمت 2 Social Login part 2

• Social Login قسمت 3 Social Login part 3

• افزودن فرم Complete Profile برای Social Login Adding a complete profile form for social login

• افزودن Google Provider Adding the Google provider

• خلاصه بخش 10 Summary of Section 10

دسترسی مبتنی بر نقش Role based access

• معرفی بخش 11 Introduction to Section 11

• افزودن Roles به Prisma Adding the roles to Prisma

• افزودن Role به Session Data Adding the role to the session data

• ایجاد صفحه Admin Creating an admin page

• دریافت Session Info در Client Getting the session info in the client

• افزودن قابلیت Photo Moderation قسمت 1 Adding the photo moderation functionality part 1

• افزودن قابلیت Photo Moderation قسمت 2 Adding the photo moderation functionality part 2

• افزودن قابلیت Photo Moderation قسمت 3 Adding the photo moderation functionality part 3

• افزودن قابلیت Photo Moderation قسمت 4 Adding the photo moderation functionality part 4

• خلاصه بخش 11 Summary of Section 11

صیقل دادن و انتشار Polishing and Publishing

• معرفی بخش 12 Introduction to Section 12

• افزودن Modal Adding a modal

• افزودن Confirmation Modal Adding a confirmation modal

• افزودن Image Modal Adding an image modal

• به روز رسانی Home Page Updating the home page

• آماده سازی برنامه برای انتشار Preparing the app for publishing

• استقرار برنامه Deploying the app

• افزودن Seed Data برای Production App Adding seed data for the production app

• افزودن Spinner به لایک ها و استقرار مجدد Adding a spinner to the likes and deploying again

• Loose Ends Loose ends

• تست نهایی برنامه Final testing of the app

• خلاصه پایان دوره End of course summary

پیوست الف - معرفی React (اختیاری) Appendix A - Introduction to React (Optional)

• معرفی پیوست الف Introduction to Appendix A

• ایجاد پروژه React با استفاده از Vite Creating the React project using Vite

• افزودن Hero Editor Adding the hero editor

• نمایش لیستی از Heroes Displaying a list of heroes

• افزودن کامپوننت Feature Adding a feature component

• افزودن API Server Adding an API server

• Async Code و useEffect Async code and the useEffect

• افزودن مسیریابی به برنامه با استفاده از React Router Adding routing to the app using React Router

• افزودن Nav Bar Adding a nav bar

• افزودن مسیر Details Page Adding a details page route

• افزودن React Context Adding React context

• استفاده از React Context Using react context

• به روز رسانی یک Hero Updating a hero

• ایجاد یک Hero Creating a hero

• حذف یک Hero Deleting a hero

پیوست ب - ارتقاء پروژه به Next15 Appendix B - Upgrading project to Next15

• معرفی این بخش و آنچه که ارتقا می دهیم Introduction to this section and what we are upgrading

• ارتقا به Zustand v5 Upgrading to Zustand v5

• انتقال NextUI به HeroUI Migrate NextUI to HeroUI

• به روز رسانی سایر بسته هایی که NextJS یا React نیستند Update other packages that are not NextJS or React

• به روز رسانی به Next15 از Next14 Update to Next15 from Next14

• تست برنامه و رفع مشکلات برجسته ناشی از به روز رسانی ها Test the app and fix outstanding issues from the updates