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

دانلود The Freelance Stack: Real project with NextJS and Strapi

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

پروژه‌های واقعی برای فریلنسرها: از طراحی تا استقرار با NextJS و Strapi

یاد بگیرید چگونه با NextJS و Strapi یک پروژه واقعی بسازید و وب‌سایت‌هایی را به مشتریان خود تحویل دهید که دانش کدنویسی ندارند!

  • ایجاد استایل زیبا با CSS ساده و بدون فریم‌ورک اضافی!
  • ادغام ساختارهای پیچیده داده از Strapi API با انواع فرانت‌اندها
  • ترکیب سهولت استفاده از وب‌سایت‌سازها با انعطاف‌پذیری کامل کدنویسی یک وب‌سایت از ابتدا
  • منطق پشت کامپوننت‌های سمت سرور و کلاینت

پیش‌نیازها:

  • JavaScript (آشنایی با مبانی JavaScript، متدهای آرایه، انواع داده‌ها و غیره ضروری است.)
  • دانش اولیه React

با یادگیری عملی و پروژه‌محور، وارد دنیای فریلنسینگ شوید. این دوره شکاف بین تئوری و کاربرد عملی در دنیای واقعی را پر می‌کند. چه یک فریلنسر مشتاق باشید و چه یک توسعه‌دهنده باتجربه که به دنبال گسترش جعبه ابزار خود هستید، این دوره برای شما طراحی شده است.

چرا این دوره را انتخاب کنید؟

  • تمرکز بر پروژه‌های واقعی: از مثال‌های عمومی دوری کنید. یک وب‌سایت کاملاً کاربردی برای یک کمپ موج‌سواری با یک وبلاگ یکپارچه و قابل تنظیم و فرم‌های ثبت‌نام ایجاد کنید.
  • پشته جامع: در هم‌افزایی NextJS13 و Strapi، ترکیب آزمایش‌شده و امتحان‌شده برای طراحی انعطاف‌پذیر و تجربه توسعه‌دهنده یکپارچه، عمیقاً غور کنید.
  • توسعه مشتری‌محور: یاد بگیرید نه تنها کدنویسی کنید، بلکه ارائه دهید. خود را مجهز کنید تا به مشتریان این امکان را بدهید که مستقیماً محتوای وب‌سایت را به‌روزرسانی کنند، با استفاده از یک Headless CMS با راحتی پلتفرم‌هایی مانند Wordpress/Squarespace/Wix رقابت کنید.
  • از طراحی تا استقرار: طرح‌های Figma را به سایت‌های زنده تبدیل کنید. از قدرت یک گردش کار یکپارچه از طراحی تا توسعه بهره ببرید.

چه چیزی در داخل است؟

در یک برنامه آموزشی جذاب و شهودی با بیش از 12 ساعت محتوای یادگیری پیمایش کنید. هر بخش با دقت طراحی شده است تا مفاهیم جدید را با سرعت راحت معرفی کند و اطمینان حاصل کند که هر عنصر را بدون احساس غرق شدن درک می‌کنید. ساختار دوره نقطه قوت اصلی آن است و به یادگیرندگان این امکان را می‌دهد که به طور مداوم بر پایه دانش خود بسازند.

سفر و برداشت شما

این فقط یک دوره فنی نیست. این یک نقشه راه برای تبدیل شدن به یک توسعه‌دهنده فریلنسر عالی است. در پایان آن، شما نه تنها فناوری جدیدی را یاد خواهید گرفت، بلکه درک خواهید کرد که چگونه برنامه‌ها را با نیازهای مشتریان خود ارائه دهید.

قدرت ادغام یک CMS بدون سر با یک فرانت‌اند انعطاف‌پذیر را درک خواهید کرد که به شما امکان می‌دهد بسته‌ای را ارائه دهید که در آن مشتریان می‌توانند محتوا را به دلخواه خود تغییر دهند.
پیشنهاد شما برجسته خواهد بود و شکاف بین پلتفرم‌های سفارشی و CMSهای کاربرپسند مانند وردپرس را پر می‌کند.


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

مقدمه Introduction

  • معرفی دوره Course Intro

  • فریلنس استک چیست؟ What is the Freelance Stack?

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

  • مواد مورد نیاز برای گذراندن دوره Materials to go through the course

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

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

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

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

  • چیدمان در NextJS Layouting in NextJS

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

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

  • واکشی داده Data Fetching

  • مسیردهی پویا Dynamic Routing

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

معرفی فیگما برای توسعه‌دهندگان Developer Intro To Figma

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

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

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

  • یادآوری در مورد استایل‌دهی Reminder on styling

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

  • مروری بر راه‌اندازی ما (و چرایی این نوع راه‌اندازی) Overview of our setup (and why we set it up this way)

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

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

صفحه اصلی و صفحه تجربه با کامپوننت‌های چیدمان Landing Page & Experience Page with Layout Components

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

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

  • فیلتر برای دادن هر رنگی به SVGها Filter to give SVGs any colour you want

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

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

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

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

  • ساختار JSX اینفوبلاک‌ها InfoBlocks JSX Structure

  • استایل‌دهی: اینفوبلاک‌ها Styling: InfoBlocks

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

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

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

  • ایجاد نوع محتوای InfoBlock در Strapi Creating InfoBlock Content Type on Strapi

  • استفاده از نوع محتوای Single در 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

  • رندر اینفوبلاک‌ها در صفحه Render InfoBlocks on page

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

  • رندر اینفوبلاک‌ها در صفحه تجربه Render InfoBlocks on Experience page

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

  • ساختار JSX مقاله برجسته 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

  • ایجاد ناحیه پویا در 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

  • کامپوننت Generic Article برای رندر کامپوننت‌های مختلف بر اساس داده 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

  • نوع محتوای شرکت‌کننده و رویداد 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 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

استقرار در Heroku Deployment to Heroku

  • یادداشت در مورد استقرار Note on Deployment

  • مروری بر استقرار Deployment Overview

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

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

  • انتقال پایگاه داده محلی از SQLite به Postgres به پایگاه داده Production Migrate local database from SQLite to Postgres to the production database

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

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

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

نمایش نظرات

آموزش فریلنس استک: پروژه واقعی با NextJS و Strapi
جزییات دوره
12.5 hours
91
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
913
4.6 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Niklas Fischer Niklas Fischer

نیکلاس موسس یک آژانس فریلنسری است که در توسعه وب و علم داده تخصص دارد. سفر او با مقابله با چالش‌های کدنویسی در دنیای واقعی و برآوردن نیازهای مشتری مشخص شده است، که از آن بینش‌های ارزشمندی به دست آورده است. با این حال، اشتیاق واقعی او در تدریس نهفته است. نیکلاس هنر کدنویسی را با تأکید زیادی بر عملی بودن و کاربرد مستقیم با موفقیت به صدها نفر آموزش داده است. او این انبوهی از تجربیات عملی را در دوره های خود می ریزد و تضمین می کند که یادگیری ارائه شده فقط تئوری نیست، بلکه بلافاصله قابل عمل است. نیکلاس برای کسانی که آماده بهره مندی از موفقیت های او و درس گرفتن از اشتباهات او هستند، فرصتی بی نظیر برای فرو رفتن عمیق در دنیای کدنویسی ارائه می دهد.