آموزش برنامه های Fullstack را با NextJS14 Tailwind CSS و MongoDB توسعه دهید

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

معرفی Introduction

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

• درباره مربی شما About your Instructor

تسلط بر Tailwind CSS از ابتدا Mastering Tailwind CSS from Scratch

• مروری بر Tailwind CSS و تفاوت آن با Bootstrap Overview Of Tailwind CSS and How it Differs from Bootstrap

• نصب و راه اندازی برای محیط توسعه Installing and Setup for Development Environment

• Hello World with Tailwind و نصب افزونه های مهم Hello World with Tailwind and Installing important extensions

• راه اندازی Tailwind CSS به روش درست Setting Up Tailwind CSS the Right Way

• نحوه کاوش در اسناد How to explore the documentation

• Project-1 Align Element در مرکز صفحه Project-1 Align Element at center of the page

• Project-2 Utility ابتدا با ایجاد یک کامپوننت کارت Project-2 Utility First by Creating a Card Component

• Project-3 Hover Focus and other states با ایجاد یک دکمه سفارشی Project-3 Hover Focus And Other states by creating a custom Button

• مفهوم طراحی پاسخگو در Tailwind Concept of Responsive Design in Tailwind

• عملی برای درک مفهوم طراحی پاسخگو برای دستگاه های مختلف Practicals to understand Responsive Design concept for different devices

• Project-4 Designing Card Responsive - Part-1 Project-4 Designing Responsive Card - Part-1

• Project-4 Designing Card Responsive - Part-2 Project-4 Designing Responsive Card - Part-2

• Project-4 Designing Card Responsive - Part-3 Project-4 Designing Responsive Card - Part-3

• استایل متغیر در Tailwind Variable Styling in Tailwind

• انتقال انیمیشن ها و ترجمه در Tailwind Animations Transitions and Translate in Tailwind

• طرح بندی ستون ردیف پاسخگو - قسمت 1 Responsive Row Column Layout - Part-1

• طرح بندی ستون ردیف پاسخگو - قسمت 2 Responsive Row Column Layout - Part-2

• نوار ناوبری پاسخگو - قسمت 1 Responsive Navbar - Part-1

• Navbar پاسخگو - قسمت 2 Responsive Navbar - Part-2

• Navbar پاسخگو - قسمت 3 Responsive Navbar - Part-3

• کامپوننت های رایگان Tailwind UI Free Tailwind UI Components

پروژه NextJS: معرفی و نصب NextJS Project: Introduction and Installation

• ایجاد برنامه بعدی Creating Next App

• ساختار پوشه و عملکرد برنامه Next Folder structure and working of Next app

• نصب پایگاه داده MongoDB و ایجاد پایگاه داده Installing MongoDB database and creating database

• نصب وابستگی های npm Installing npm dependencies

پروژه NextJS: توسعه Frontend با Tailwind CSS و NextJS NextJS Project: Developing Frontend with Tailwind CSS and NextJS

• ایجاد کامپوننت NavBar Creating NavBar component

• حالت دادن به نوار پیمایش با tailwind css Styling the navigation bar with tailwind css

• جزء Item List را ایجاد کنید Create the Item List component

• سبک دادن به مؤلفه ItemList - Part-1 Styling the ItemList component - Part-1

• حالت دادن به دکمه Delete Item Styling the Delete Item button

• سبک دادن به مؤلفه ItemList - Part-2 Styling the ItemList component - Part-2

• صفحه افزودن آیتم جدید را ایجاد کنید Create Add New Item Page

• استایل دادن به صفحه افزودن آیتم Styling the Add Item page

• ایجاد صفحه پویا ویرایش آیتم Creating Edit Item dynamic page

• ایجاد و استایل دادن به مؤلفه Edit Item Creating and Styling the Edit Item component

پروژه NextJS: توسعه Backend با NextJS، Mongoose و MongoDB NextJS Project: Developing the Backend with NextJS, Mongoose and MongoDB

• ایجاد ارتباط با mongodb Establishing connection with mongodb

• طرحواره مانگوس جدید برای مدل آیتم ایجاد کنید Create new mongoose schema for Item model

• POST API برای ایجاد آیتم جدید و ذخیره آن در پایگاه داده POST API to create new item and save it into database

• دریافت API برای واکشی همه موارد ایجاد شده تا کنون GET API to fetch all items created so far

• یک مورد با شناسه ارائه شده به عنوان پارامتر جستجوی url را حذف کنید DELETE an item with provided id as url search param

• به روز رسانی یک مورد با شناسه پویا در مسیر url PUT update an item with dynamic id passed in url path

• دریافت جزئیات یک مورد با شناسه منطبق GET details of one item with matching id

• با getAll Items API از Frontend تماس بگیرید Call getAll Items API from Frontend

• نمایش داده ها از API در UI Displaying the data from API on UI

• تست عملکرد لیست آیتم ها و تایید رندر سمت سرور برای SEO Testing the Item List functionality and Verifying Server Side Rendering for SEO

• افزودن متغیرهای حالت و ارسال کنترلر به جزء Add Item Adding state variables and submit handler to Add Item component

• ادغام Create Item API با frontend، مسیریابی به خانه در موفقیت، عملکرد Integrating Create Item API with frontend, routing to home on success, the funct

• ادغام Delete Item با Backend و تست عملکرد Integrating Delete item with backend and testing the functionality

• دریافت شناسه مورد در صفحه ویرایش از طریق پارامترهای مسیر پویا Getting the Item ID inside the Edit Page via the dynamic route params

• دریافت جزئیات مورد از API و ارسال آن به Edit Item Component Getting Item Detail from API and passing it to Edit Item Component

• اتصال متغیرهای حالت به فرم Binding the state variables to the form

• فراخوانی Update Item API و تست عملکرد Calling Update Item API and test the functionality

کد منبع Source Code

• پایه کد Code Base