دوره جامع آموزش توسعه‌دهنده فول استک با لاراول ۱۲ API و ری‌اکت - آخرین آپدیت

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

مقدمه Introduction

• خوش‌آمدگویی به دوره Welcome to the Course

• آنچه در این دوره خواهید آموخت What You Will Learn In This Course

• توسعه فول استک چیست؟ What is full-stack development?

ابزارها و نرم‌افزارها (VS Code, Chrome, Node.js, Composer, Laragon, Postman, Git) Tools & Software (VS Code, Chrome, Node.js, Composer, Laragon, Postman, Git)

• مقدمه بخش Section Intro

• نصب گوگل کروم Install Google Chrome

• نصب VS Code Install VS Code

• نصب افزونه‌های VS Code Install VS Code Extensions

• نصب NodeJs Install NodeJs

• نصب Laragon Install Laragon

• نصب Composer Install Composer

• نصب Postman Install Postman

• نصب Git Install Git

راه‌اندازی بک‌اند (Laravel 12 API) Backend Setup (Laravel 12 API)

• نصب لاراول ۱۲ و راه‌اندازی پروژه Installing Laravel 12 & Project Setup

• ساخت دیتابیس و اتصال به MySQL Creating Database & Connecting MySQL

• ساختار دایرکتوری و مبانی MVC Directory Structure & MVC Basics

• نصب Routeهای API Install API Route

• آشنایی با Routeها و Controllerها در لاراول Introduction to Routes & Controllers in Laravel

بک‌اند – API پروژه و تسک‌ها Backend – Project & Task API

• ساخت Modelها و Migrationها (جداول پروژه‌ها و تسک‌ها) Creating Models & Migrations (Projects & Tasks tables)

• تعریف روابط (یک پروژه $ightarrow$ چندین تسک) Defining Relationships (One Project → Many Tasks)

• مدل – تعریف فیلدهای fillable Model - Make fields fillable

• ساخت Endpoints برای پروژه‌ها (CRUD) Building API Endpoints for Projects (CRUD)

• تست API پروژه با Postman Testing Project API with Postman

• تست خطاهای اعتبار‌سنجی API با Postman Testing Validation API Errors with Postman

• راه‌اندازی Git برای بک‌اند API Git Setup Backend API

• ساخت Endpoints برای تسک‌ها (CRUD) Building API Endpoints for Tasks (CRUD)

• تست APIها با Postman Testing APIs with Postman

• ارسال کدها به GitHub Push Code to GitHub

بک‌اند – احرازهویت Backend – Authentication

• مقدمه‌ای بر احرازهویت در APIها Introduction to Authentication in APIs

• نصب و پیکربندی Laravel Sanctum Installing & Configuring Laravel Sanctum

• API ثبت‌نام کاربر User Registration API

• API ورود کاربر User Login API

• API خروج کاربر User Logout API

• محافظت از مسیرها با Middleware و تست با Postman Protecting Routes with Middleware and Test with Postman

راه‌اندازی فرانت‌اند (React with Vite) Frontend Setup (React with Vite)

• راه‌اندازی پروژه ری‌اکت با Vite Setting up React Project with Vite

• ساختار پروژه و پاک‌سازی Project Structure & Cleanup

• نصب TailwindCSS برای استایل‌دهی Installing TailwindCSS for Styling

• آشنایی با کامپوننت‌ها و Props در ری‌اکت Introduction to React Components & Props

• راه‌اندازی React Router (ناوبری و صفحات) React Router Setup (Navigation & Pages)

• راه‌اندازی Git برای فرانت‌اند Frontend Git Setup

فرانت‌اند – احرازهویت Frontend – Authentication

• ساخت صفحه لندینگ اپلیکیشن Create App Landing Page

• ساخت صفحه ورود Creating Login Page

• ساخت صفحه ثبت‌نام Creating Register Page

• مدیریت فرم‌ها و State در ری‌اکت Handling Forms & State in React

• اتصال فرم ورود به API لاراول با Axios Connecting Login Form with Laravel API with Axios

• اتصال فرم ثبت‌نام به API لاراول با Axios Connecting Registration Form with Laravel API with Axios

• جمع‌بندی بخش و Push به Git Section Wrap Up & Git Push

فرانت‌اند – پروژه‌ها Frontend – Projects

• ساخت لایوت داشبورد Creating Dashboard Layout

• تغییر مسیرها و مسیرهای محافظت شده (فقط کاربران وارد شده) Redirects & Protected Routes (Only logged-in users can see dashboard)

• ذخیره توکن احرازهویت و مدیریت نشست کاربر Saving Auth Token & Managing User Session

• نمایش لیست پروژه‌ها (دریافت از API) Displaying List of Projects (Fetch from API)

• افزودن پروژه جدید (فرم + یکپارچه‌سازی API) Adding New Project (Form + API Integration)

• ویرایش پروژه‌ها Editing Projects

• حذف پروژه‌ها Deleting Projects

فرانت‌اند – تسک‌ها Frontend – Tasks

• لیست تسک‌ها (یکپارچه‌سازی API) Tasks List (API Integration)

• افزودن تسک به یک پروژه Adding a Task to a Project

• ویرایش تسک‌ها Editing Tasks

• حذف تسک Delete Task

• مشاهده جزئیات پروژه به همراه تسک‌ها View Project Details with Tasks

داشبورد و آمار Dashboard - Stats

• نمایش داده‌های داینامیک کاربر Display Dynamic User Data

• داینامیک کردن آمارهای داشبورد (Laravel API + React) Make Dashboard Stats Dynamic (Laravel API + React)

• بهبود UI/UX با اعلان‌های Toast Improving UI/UX with Toast Notifications

پروژه‌ها و تسک‌های کاربر-محور User Based Project & Tasks

• کاربر-محور کردن اپلیکیشن Make App User Based

• جمع‌بندی بخش و ارسال کدها به GitHub Section Wrap Up - Push Code to GitHub

استقرار (Deployment) Deployment

• مقدمه‌ای بر استقرار بک‌اند Backend Deployment Intro

• استقرار API لاراول روی Hostinger – انتقال فایل‌ها از GitHub Deploying Laravel API to Hostinger - Migrating Files from GitHub

• استقرار API لاراول روی Hostinger – ساخت دیتابیس Deploying Laravel API to Hostinger - Create Database

• افزودن .htaccess و دستورالعمل‌ها Adding .htaccess - Instructions

• بک‌اند API – تولید App Key Backend API - Generate App Key

• اتصال فرانت‌اند به API زنده Connecting Frontend to Live API

• استقرار اپلیکیشن ری‌اکت روی Netlify / Vercel Deploying React App to Netlify / Vercel

بهبود و بهینه‌سازی اپلیکیشن Refine & Polish App

• رفع باگ‌های پروژه – تغییر UI اعلان‌ها Bug Fixing Project- Notification UI Change

• جایگزینی <a> با <Link> در ری‌اکت (Home.jsx) Replacing <a> with <Link> in React (Home.jsx)

مفاهیم پیشرفته – React Context و سرویس‌ها Advanced Concepts - React Context, Services

• مقدمه بخش Section Intro

• مدیریت وضعیت احرازهویت با React Context Manage Auth State with React Context

• رفع خطای CORS در بک‌اند API CORS - Fix with Backend API

• چرا از سرویس‌ها استفاده می‌کنیم؟ (ساخت authService.jsx) Why We Use Services ( Creating authService.jsx )

• سرویس خروج (logoutService) logoutService

• راه حل تمرین (LogoutService) Solution for Assignment (LogoutService)

• سرویس پروژه (Project Service) Project Service

• سرویس جزئیات پروژه Project Details Service

• سرویس تسک (Task Service) Task Service

• سرویس تسک (بخش دوم) Task Service

پایان دوره و گام‌های بعدی Thank You & What's Next

• سپاسگزاری Thank You

• مسیر پیشرفته مهارت‌ها: بررسی عمیق APIهای لاراول ۱۲ (نقشه راه پروژه محور) Skill Advanced Path : Deep Dive into Laravel 12 APIs (Project-Based Roadmap)