آموزش بوت کمپ پروژه محور Next.js: ساخت اپلیکیشن نتفلیکس و ۲ پروژه دیگر - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

ماژول 1 - معرفی Next.js Module 1 - Introduction to Next JS

• Next.js چیست - قسمت 1 What is Next JS Part - 1

• چرا Next.js را به React ترجیح دهیم؟ - قسمت 2 Why to choose Next JS over React Part - 2

• راه اندازی پروژه Next.js و بررسی ساختار پوشه ها - قسمت 4 Setting up Next JS project & Folder structure tour Part - 4

ماژول 2 - مسیریابی برنامه برای مدیریت مسیرهای مختلف Module 2 - App Routing to Handle Different Routes

• مسیریابی برنامه و مسیریابی تودرتو - قسمت 1 App Routing and Nested Routing Part - 1

• پوشش Layout در Next.js - قسمت 2 Layout Wrapper in Next JS Part - 2

• مسیریابی API در Next.js - قسمت 3 Next JS API Routing Part - 3

• مسیرهای پویا در Next.js - قسمت 4 Dynamic Routes in Next JS Part - 4

• میان افزارها در Next.js و مسیرهای محافظت شده - قسمت 5 Middlewares in Next JS and Protected Routes Part - 5

• مسیرهای Catch All در Next.js - قسمت 6 Catch All Routes in Next JS Part - 6

• مسیر Not-found سفارشی - قسمت 7 Custom Not-found Route Part - 7

ماژول 3 - استراتژی های رندرینگ Module 3 - Rendering Strategies

• رندرینگ سمت کلاینت (CSR) - قسمت 1 Client Side Rendering (CSR) Part - 1

• تولید سایت استاتیک (SSG) - قسمت 2 Static Site Generation (SSG) Part - 2

• رندرینگ سمت سرور (SSR) - قسمت 3 Server Side Render (SSR) Part - 3

• استراتژی های رندرینگ ترکیبی - قسمت 4 Hybrid Rendering Strategies Part - 4

• تولید مجدد استاتیک افزایشی - قسمت 5 Incremental Static Regeneration Part - 5

ماژول 4 - استایل دهی در Next.js Module 4 - Styling in Next JS

• ادغام Tailwind CSS با Next.js در حین راه اندازی پروژه - قسمت 1 Integration of Tailwind Css with Next JS During Project Setup Part - 1

• CSS سراسری در Next.js - قسمت 2 Global CSS in Next JS Part - 2

• CSS ماژولار در Next.js - قسمت 3 Modular CSS in Next JS Part - 3

• راه اندازی Material UI در Next.js - قسمت 4 Setting-Up Material UI in Next JS Part - 4

ماژول 5 - مدیریت وضعیت Module 5 - State Management

• useState برای ذخیره سازی وضعیت ها - قسمت 1 useState to Store states Part - 1

• بهینه سازی وضعیت ها برای مدیریت پیچیده وضعیت - قسمت 2 Optimize States to Handle Complex State-Management Part - 2

• Lifting State Up - قسمت 3 Lifting State Up Part - 3

• راه اندازی Context API - قسمت 4 Setting Context API Part - 4

• پوشش کل پروژه با Context - قسمت 5 Wrapping The Entire Project With The Context Part - 5

• معرفی Redux-Toolkit و راه اندازی Redux Store - قسمت 6 Introduction to Redux-Toolkit & Setting The Redux Store Part - 6

• ویژگی های Redux (Slice) - قسمت 7 Redux Features(Slice) Part - 7

• فراخوانی Redux Dispatcher برای Dispatch کردن Action - قسمت 8 Calling The Redux Dispatcher to Dispatch The Action Part - 8

ماژول 6 - ادغام پایگاه داده Module 6 - Database Integration

• پیکربندی Prisma ORM برای اتصال به Neon Db (PostgreSQL) - قسمت 1 Configuring the Prisma ORM to Connection to Neon Db (PostgreSQL) Part - 1

• عملیات POST برای درج داده در PostgreSQL - قسمت 3 POST Operation to Insert Data in PostgreSQL Part - 3

• ادغام MongoDB توسط Mongoose - قسمت 4 Integrating MongoDB by Mongoose Part - 4

• Mongoose Schema برای عملیات DB - قسمت 5 Mongoose Schema for DB Operations Part - 5

• تعریف مسیر GET برای MongoDB - قسمت 6 Defining GET Route for MongoDB Part - 6

پروژه شبیه ساز نتفلیکس - 1 Netflix Clone Project - 1

• پروژه شبیه ساز نتفلیکس - کد منبع Netflix Clone Project - Source Code

• پروژه شبیه ساز نتفلیکس - دمو زنده Netflix Clone Project - Live Demo

• راه اندازی محیط پروژه - قسمت 1 Setting-Up The Project Environment Part - 1

• پاکسازی دایرکتوری پروژه - قسمت 2 Cleaning The Project Directory Part - 2

• راه اندازی فایل محیطی TMDB API Key - قسمت 3 TMDB API Key Environment File Setup Part - 3

• تنظیم ساختار پوشه فایل - قسمت 4 Setting File Folder Structuring Part - 4

• نمونه مشترک Axios برای Fetch کردن داده - قسمت 5 Axios Common Instance For Data Fetching Part - 5

• Interfaces برای سرویس API - قسمت 6 Interfaces For API Service Part - 6

• برنامه ریزی سرویس API - قسمت 7 API Service Planning Part - 7

• نهایی کردن سرویس API - قسمت 8 Finalizing The API Service Part - 8

• Media Genre Interface - قسمت 9 Media Genre Interface Part - 9

• Interfaces دیگر - قسمت 10 Other Interfaces Part - 10

• کامپوننت APP Layout برای Navbar و Footer مشترک - قسمت 11 APP Layout Component for The Common Navbar and Footer Part - 11

• کتابخانه آیکون - قسمت 12 Icon Library Part - 12

• شروع Footer - قسمت 13 Beginning Of The Footer Part - 13

• استایل دهی کامپوننت Footer - قسمت 14 Styling The Footer Component Part - 14

• معرفی Navbar - قسمت 15 Introduction To Navbar Part - 15

• Handlers برای Navbar - قسمت 16 Handlers For The Navbar Part - 16

• استایل دهی Navbar - قسمت 17 Navbar Styling Part - 17

• خطای Navbar و سایر استایل ها - قسمت 18 Navbar Error And Other Styling Part - 18

• تکمیل استایل دهی Navbar - قسمت 19 Finishing The Navbar Styling Part - 19

• فیلد جستجو برای Navbar - قسمت 20 Search Input For The Navbar Part - 20

• Endpoints برای کل برنامه - قسمت 21 Endpoints For The Whole Application Part - 21

• کامپوننت Home - قسمت 22 Home Component Part - 22

• Handlers کامپوننت Movie Section - قسمت 23 Movie Section Component Handlers Part - 23

• Fetch کردن داده فیلم برای کامپوننت Movie Section - قسمت 24 Fetching Movie Data For Movie Section Component Part - 24

• UI کامپوننت Movie Section - قسمت 25 UI Part For Movie Section Component Part - 25

• دکمه Slider برای Movie Section - قسمت 26 Slider Button For The Movie Section Part - 26

• تکمیل کامپوننت Movie Section - قسمت 27 Finishing The Movie Section Component Part - 27

• راه اندازی کامپوننت Cards - قسمت 28 Setting Up The Cards Component Part - 28

• کامپوننت دکمه مشترک - قسمت 29 Common Button Component Part - 29

• تکمیل دکمه مشترک - قسمت 30 Finishing The Common Button Part - 30

• Handlers و برخی عناصر UI برای کامپوننت Cards - قسمت 31 Handlers And Some UI Element For Cards Component Part - 31

• Handler برای اضافه کردن آیتم ها در Local Storage - قسمت 32 Handler To Add Items In Local Storage Part - 32

• Handlers دیگر برای Local Storage - قسمت 33 Other Handlers For Local Storage Part - 33

• پیاده سازی Handlers در کامپوننت Cards - قسمت 34 Implementing Handlers In Cards Component Part - 34

• تکمیل Handlers برای کامپوننت Cards - قسمت 35 Finishing The Handlers For Cards Component Part - 35

• ساختاردهی کامپوننت Cards - قسمت 36 Structuring The Cards Component Part - 36

• استایل دهی کامپوننت Cards - قسمت 37 Styling The Cards Component Part - 37

• React-Player برای کامپوننت Cards - قسمت 38 React-Player For Cards Component Part - 38

• استایل دهی جزئیات کامپوننت Cards - قسمت 39 Styling Cards Component Details Part - 39

• تکمیل کامپوننت Cards - قسمت 40 Finishing The Cards Component Part - 40

• Genre Library - قسمت 41 Genre Library Part - 41

• Render کردن کامپوننت Genre - قسمت 42 Render Genre Component Part - 42

• صفحه My List - قسمت 43 My List Page Part - 43

• My List Handlers - قسمت 44 My List Handlers Part - 44

• تکمیل صفحه My List - قسمت 45 Finishing The My List Page Part - 45

• کامپوننت صفحه Details Movie - قسمت 46 Details Movie Page Component Part - 46

• Handlers برای صفحه Details Movie - قسمت 47 Handlers For Details Movie Page Part - 47

• کامپوننت Banner - قسمت 48 Banner Component Part - 48

• Handler برای کامپوننت Banner - قسمت 49 Handler For Banner Component Part - 49

• ساختاردهی قالب Banner - قسمت 50 Structuring The Banner Template Part - 50

• استایل دهی Banner - قسمت 51 Banner Styling Part - 51

• React-Player برای Banner - قسمت 52 React-Player For Banner Part - 52

• تکمیل کامپوننت Banner - قسمت 53 Finishing The Banner Component Part - 53

• راه اندازی کامپوننت Modal - قسمت 54 Setting Up The Modal Component Part - 54

• Handlers برای کامپوننت Modal - قسمت 55 Handlers For The Modal Component Part - 55

• عناصر UI Modal - قسمت 56 Modal UI Elements Part - 56

• استایل دهی Modal - قسمت 57 Modal Styling Part - 57

• استایل دهی نیمه دیگر Modal - قسمت 58 Styling The Other Half Of Modal Part - 58

• بهبود طراحی Modal - قسمت 59 Refining The Design Of Modal Part - 59

• تکمیل کامپوننت Modal - قسمت 60 Finishing The Modal Component Part - 60

• کامپوننت Similar Movie و Handlers - قسمت 61 Similar Movie Component And Handlers Part - 61

• کامپوننت Similar Movie Card - قسمت 62 Similar Movie Card Component Part - 62

• استایل دهی کامپوننت Similar Movie Card - قسمت 63 Styling The Similar Movie Card Component Part - 63

• صفحه Search Movie - قسمت 64 Search Movie Page Part - 64

• استایل دهی صفحه Search - قسمت 65 Styling The Search Page Part - 65

• آپلود در Github و استقرار در Vercel - قسمت 66 Github Upload and Deployed In Vercel Part - 66

برنامه وب شرکتی: پروژه - 2 Corporate Web App: Project-2

• برنامه وب شرکتی - کد منبع پروژه Corporate Web App Project - Source Code

• برنامه وب شرکتی - دمو زنده پروژه Corporate Web App Project - Live Demo

• ایجاد پروژه Next.js - قسمت 1 Creating Next JS Project Part-1

• فایل ها و پوشه های Next.js - قسمت 2 Files and Folders of Next JS Part-2

• تبدیل Javascript به Typescript - قسمت 3 Javascript to Typescript Conversion Part-3

• شروع با Top Header - قسمت 4 Starting With Top Header Part-4

• اضافه کردن محتوا به Top Header - قسمت 5 Adding Contents to Top Header Part-5

• اضافه کردن آیکون به Header - قسمت 6 Adding Icons to Header Part-6

• ایجاد Drop-down برای آیتم های Header - قسمت 7 Creating the Drop-down for Header Items Part-7

• ایجاد Sidebar - قسمت 8 Creating the Sidebar Part-8

• اضافه کردن محتوا به Sidebar - قسمت 9 Adding Contents to Sidebar Part-9

• ایجاد کامپوننت Info - قسمت 10 Creating the Info Component Part-10

• قرار دادن ویدیو در Modal Dialog - قسمت 11 Embedding Video in Modal Dialog Part-11

• ایجاد کامپوننت Business and Service - قسمت 12 Creating Business and Service Component Part-12

• اضافه کردن محتوا برای سرویس ها - قسمت 13 Adding Contents for the Services Part-13

• استایل دهی کامپوننت Service - قسمت 14 Styling the Service Component Part-14

• ایجاد کامپوننت Services - قسمت 15 Creating the Services Component Part-15

• ایجاد کامپوننت Case Studies - قسمت 16 Creating the Case Studies Component Part-16

• اضافه کردن محتوای Case Studies - قسمت 17 Adding Case Studies Content Part-17

• استایل دهی Case Studies - قسمت 18 Styling the Case Studies Part-18

• ایجاد کامپوننت Team Members - قسمت 19 Creating Team Members Component Part-19

• اضافه کردن محتوای Team Members - قسمت 20 Adding Team Members Content Part-20

• ایجاد بخش Blogs - قسمت 21 Creating Blogs Section Part-21

• استایل دهی بخش Blogs - قسمت 22 Styling the Blogs Section Part-22

• ایجاد بخش Customers Rating - قسمت 23 Creating the Customers Rating Section Part-23

• اضافه کردن محتوا برای بخش Rating - قسمت 24 Adding Contents for Rating Section Part-24

• ایجاد بخش Contacts - قسمت 25 Creating the Contacts Section Part-25

• اضافه کردن محتوا به بخش Contact - قسمت 26 Adding Contents to Contact Section Part-26

• تکمیل محتوای بخش Contact - قسمت 27 Finishing the Contents of Contact Section Part-27

• ایجاد Footer - قسمت 28 Creating the Footer Part-28

• استقرار در Vercel - قسمت 29 Deploy to Vercel Part-29

• اضافه کردن دکمه Scroll To Top - قسمت 30 Adding Scroll To Top Button Part-30

برنامه وب گالری عکس: پروژه - 3 Photo Gallery Web App: Project - 3

• برنامه پروژه گالری عکس - کد منبع Photo Gallery App Project - Source Code

• برنامه پروژه گالری عکس - دمو زنده Photo Gallery App Project - Live Demo

• راه اندازی پروژه Next.js - قسمت 1 Project Setup Next JS Part-1

• طراحی کامپوننت Header - قسمت 2 Designing Header Component Part-2

• دریافت داده تصویر در کامپوننت Server - قسمت 3 Get Image Data on Server Component Part-3

• نمایش داده تصویر در کامپوننت Image Tile - قسمت 4 Show Image Data on Image Tile Component Part-4

• طراحی Image Tile واکنشگرا - قسمت 5 Design Responsive Image Tile Part-5

• تبدیل داده تصویر به Light Box Slide Data-1 - قسمت 6 Convert Image Data to Light Box Slide Data-1 Part-6

• تبدیل داده تصویر به Light Box Slide Data-2 - قسمت 7 Convert Image Data To Light Box Slide Data-2 Part-7

• طراحی کامپوننت Image Slide-1 - قسمت 8 Design Image Slide Component-1 Part-8

• طراحی کامپوننت Image Slide-2 - قسمت 9 Design Image Slide Component-2 Part-9

• Layout و Loading State در Next.js - قسمت 10 Layout and Loading State In Next JS Part-10

• پیاده سازی جستجو با URL Search Params-1 - قسمت 11 Implementing Search With URL Search Params-1 Part-11

• پیاده سازی جستجو با URL Search Params-2 - قسمت 12 Implementing Search With URL Search Params-2 Part-12

• استقرار برنامه Next.js در Vercel - قسمت 13 Deploy Next JS App to Vercel Part-13