آموزش مجموعه ابزارهای فریلنسری: پروژه واقعی با NextJS و Strapi - آخرین آپدیت

مقدمه Introduction

• مقدمه دوره Course Intro

• مجموعه ابزارهای فریلنسری چیست؟ What is the Freelance Stack?

• نحوه گذراندن این دوره How to go through this course

دوره فشرده NextJS NextJS Crash Course

• چرا از NextJS استفاده می‌کنیم؟ Why are we using NextJS?

• راه‌اندازی پروژه NextJS Setting up a NextJS Project

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

• ساختاردهی Layout در NextJS Layouting in NextJS

• لینک دادن از یک صفحه به صفحه دیگر Linking from Page to Page

• مرور کلی کامپوننت‌های سرور و کلاینت Server and Client Components Overview

• دریافت داده‌ها (Data Fetching) Data Fetching

• مسیریابی پویا (Dynamic Routing) Dynamic Routing

• صفحات یافت نشد (Not Found) Not Found Pages

آشنایی توسعه‌دهنده با Figma Developer Intro To Figma

• Figma چیست و چگونه از آن استفاده کنیم What is Figma and how to use it

راه‌اندازی اولیه پروژه NextJS، Strapi و Sass Initial Project Setup NextJS, Strapi, and Sass

• راه‌اندازی پایه NextJS NextJS Base Setup

• ویدیو استایل‌دهی: تنظیمات Sass Styling Video: Sass Setup

• ویدیو استایل‌دهی: متغیرها و تایپوگرافی Styling Video: Variables and Typography

• مرور کلی تنظیمات ما (و دلیل این روش تنظیمات) Overview of our setup (and why we set it up this way)

• نصب و بررسی Strapi Strapi Installation and Overview

صفحه فرود و صفحه تجربه با استفاده از اجزای Layout Landing Page & Experience Page with Layout Components

• ساختار JSX هدر (Header) Header JSX Structure

• استایل‌دهی: هدر Styling: Header

• ساختار JSX فوتر (Footer) Footer JSX Structure

• استایل‌دهی: فوتر Styling: Footer

• ساختار JSX بخش Hero Hero Section JSX Structure

• استایل‌دهی: بخش Hero Styling: Hero Section

• ساختار JSX بلوک‌های اطلاعاتی (InfoBlocks) InfoBlocks JSX Structure

• استایل‌دهی: بلوک‌های اطلاعاتی Styling: InfoBlocks

• صفحه تجربه: استفاده مجدد از بخش Hero و InfoBlocks ساخته شده Experience Page: Reuse created Hero Section and Infoblocks

• استایل‌دهی: تنظیم رنگ هدر بر اساس مسیر Styling: Adjust Header colour per path

اتصال فرانت‌اند به Strapi Connecting our Frontend to Strapi

• ایجاد Content Type برای InfoBlock در Strapi Creating InfoBlock Content Type on Strapi

• استفاده از Single Content Type در Strapi برای ایجاد InfoBlock هر صفحه Use Single Content Type in Strapi to create InfoBlocks per page

• دریافت داده‌های InfoBlock از Strapi Fetch InfoBlock Data on Strapi

• دریافت داده از Strapi و پردازش آن Fetch Data from Strapi and process it

• رندر کردن InfoBlocks در صفحه Render InfoBlocks on page

• ایجاد دکمه از داده‌های Strapi مربوط به InfoBlock در صفحه Create Button from InfoBlock Strapi Data on page

• رندر کردن InfoBlocks در صفحه تجربه Render InfoBlocks on Experience page

صفحه اصلی بلاگ Main Page of the Blog

• ساختار JSX مقاله برجسته (Highlight Article) Highlight Article JSX Structure

• استایل‌دهی: مقاله برجسته Styling: Highlight Article

• ساختار JSX اشتراک در خبرنامه Subscribe To Newsletter JSX Structure

• استایل‌دهی: کامپوننت اشتراک در خبرنامه Styling: Subscribe to Newsletter Component

• قابلیت‌های کامپوننت اشتراک در خبرنامه Functionality Subscribe to Newsletter Component

• ساختار JSX کامپوننت آیتم‌های ویژه Featured Items Component JSX Structure

• استایل‌دهی کامپوننت آیتم‌های ویژه Styling Featured Items Component

پیاده‌سازی بلاگ در فرانت‌اند از طریق Strapi و NextJS Implement Blog on Frontend through Strapi and NextJS

• ایجاد نوع مقاله بلاگ در Strapi Create blog article type on Strapi

• وارد کردن داده‌های مقاله بلاگ در Strapi Input blog article data on Strapi

• رندر کردن مقالات از داده‌های Strapi در صفحه اصلی بلاگ Render articles from Strapi data on main page of the blog

• ایجاد مسیرهای پویا برای تمام مقالات بلاگ Create dynamic routes for all blog articles

ایجاد مقاله بلاگ کاملاً قابل شخصی‌سازی Create Fully Customisable Blog Article

• ایجاد Dynamic Zone در Strapi برای محتوای قابل شخصی‌سازی بلاگ Create dynamic zone in Strapi for customisable blog content

• ایجاد داده برای مقاله برجسته Creating data for highlight article

• ساختار JSX بخش Hero مقاله Article Hero Section JSX

• استایل‌دهی: بخش Hero مقاله Styling: Article Hero Section

• ساختار JSX کامپوننت مقدمه مقاله Article Intro Component JSX

• استایل‌دهی: کامپوننت مقدمه مقاله Styling: Article Intro Component

• کامپوننت مقاله عمومی برای رندر کردن کامپوننت‌های مختلف بر اساس داده‌های Strapi Generic Article Component to render different component depending on Strapi data

• ساختار JSX تیتر مقاله Article Headline JSX

• استایل‌دهی: تیتر مقاله Styling: Article Headline

• ساختار JSX کامپوننت متن همراه با تصویر Text with Image Component JSX

• استایل‌دهی: کامپوننت متن همراه با تصویر Styling: Text with Image Component

• ساختار JSX پاراگراف مقاله Article Paragraph JSX

• استایل‌دهی: پاراگراف مقاله Styling: Article Paragraph

• ساختار JSX کامپوننت تصویر Image Component JSX

• استایل‌دهی: کامپوننت تصویر Styling: Image Component

• بخش سایر مقالات در صفحه اختصاصی بلاگ Other Articles Section on Individual Blog Page

• ساختار JSX بخش بلاگ در صفحه اصلی Blog Section Homepage JSX

• استایل‌دهی: بخش بلاگ در صفحه اصلی Styling: Blog Section Homepage

• اصلاح آیتم مقاله برای آیتم‌های ویژه در صفحه اصلی Fix Article Item for Featured Items on Homepage

بخش رویدادها: ایجاد قابلیت ثبت‌نام برای کمپ‌های موج‌سواری و رویدادها Events Section - Create Signup Functionality for Offered Surfcamps & Events

• درخواست‌های POST در Strapi برای ثبت‌نام خبرنامه Post Requests in Strapi with the Newsletter Signup

• اتصال فرانت‌اند به کامپوننت ثبت‌نام در Strapi Hook up Frontend to Signup Component in Strapi

• Content Type شرکت‌کننده و رویداد در Strapi Strapi Participant and Event Content Type

• وارد کردن داده‌ها به Strapi برای تمام رویدادها Feeding Data into Strapi for all events

• ساختار JSX فرم ثبت‌نام Signup Form JSX

• استایل‌دهی: فرم ثبت‌نام Styling: Signup Form

• قابلیت فرم ثبت‌نام: ارسال داده به Strapi از صفحه اصلی رویدادها Signup Form Functionality: Sending data to Strapi from main events page

• پیش‌ساخت (Pregenerate) صفحات اختصاصی رویداد Pregenerate individual event pages

• پردازش داده‌های رویداد Event Data Processing

• رندر کردن صفحه اختصاصی رویداد بر اساس داده‌های Strapi Render individual event page based off Strapi data

• ثبت‌نام برای یک رویداد خاص Sign up for specific event

• دریافت و فیلتر کردن رویدادهای آتی با کوئری رشته‌ای از Strapi Fetch and filter upcoming events with a string query from Strapi

• تنظیم کامپوننت آیتم‌های ویژه برای صفحه اختصاصی رویداد Adjust featured items component for individual event page

• استایل‌دهی: کامپوننت FeaturedItem تنظیم شده برای رویداد Styling: FeaturedItem Component adjusted for event

• دریافت رویدادهای بیشتر در صفحه اختصاصی رویداد و سپاسگزاری Fetch more events on individual event page & THANK YOU

استقرار (Deployment) روی Heroku Deployment to Heroku

• مرور کلی استقرار (Deployment) Deployment Overview

• استقرار سرور Strapi روی Heroku Deploy Strapi Server to Heroku

• تفاوت بین Strapi نسخه تولید (Production) و توسعه محلی Difference between Production Strapi and Local Development

• مهاجرت پایگاه داده محلی از SQLite به Postgres برای پایگاه داده تولید Migrate local database from SQLite to Postgres to the production database

• مدیریت آپلود تصاویر در محیط تولید با AWS S3 Handle Image Uploads in Production with AWS S3

• جایگزینی مسیرهای تصویر در دیتابیس تولید برای استفاده از باکت AWS S3 Replace image paths in production db to use AWS S3 bucket images

• استقرار فرانت‌اند NextJS روی Heroku Deployment of NextJS Frontend to Heroku