Laravel 12 + React Starter + Multi-Role Auth | Gates, Policies, CRUD & ShadCN UI Full-Stack Tutorial

Laravel 12 + React Starter + Multi-Role Auth | Gates, Policies, CRUD & ShadCN UI Full-Stack Tutorial

2.501 Lượt nghe
Laravel 12 + React Starter + Multi-Role Auth | Gates, Policies, CRUD & ShadCN UI Full-Stack Tutorial
🚀 Master Laravel 12 + React + ShadCN UI in this full-stack tutorial! In this in-depth walkthrough, we'll build a modern, role-based CRUD application using the Laravel 12 React Starter Kit. Learn how to implement multi-role authorization using Gates & Policies, Inertia.js, and ShadCN UI components — everything you need for a production-ready admin panel or SaaS app. ✅ What You'll Learn: - Setting up Laravel 12 with React Starter Kit - User authentication with Admin & User roles - Advanced Laravel Gates & Policies for access control - CRUD operations with Inertia.js - Modern UI design with ShadCN (based on Tailwind CSS) - Role-based dynamic rendering in React - Securing data and routes properly - Conditional UI rendering based on user roles 🧰 Tech Stack: - Laravel 12 - React 18+ - Tailwind CSS + ShadCN UI - Inertia.js + Laravel Breeze - PHP 8.3 - MySQL 💡 Ideal for developers building: - Admin dashboards - User portals - SaaS platforms - Role-restricted tools - Laravel-React full-stack apps ⏱️ Timeline: 0:00 - Intro to the Series 0:45 - Exploring Laravel 12 Starter Kits 2:00 - Project Setup and Installation 4:00 - Running Laravel + React App 6:00 - File Structure Overview 7:15 - Switching to MySQL & DB Setup 8:30 - Laravel Auth & UI Walkthrough 10:00 - Customizing Layout and Header 13:00 - Creating Contact Navigation 14:00 - Creating Model, Migration, Controller 15:30 - Seeding Admin and User Roles 18:00 - Building CRUD Routes 22:00 - Setting Up React Pages with Inertia 25:00 - Integrating ShadCN UI Components 31:00 - Implementing Table UI 35:00 - Fetching & Displaying Data 38:00 - Edit Contact UI Setup 40:00 - Creating Contact Form with Validation 50:00 - Saving Contact Data 53:00 - Edit & Update Contact 56:30 - Delete Contact with Confirmation Dialog 1:02:00 - Dynamic Policy-Based Delete with Alert Dialog 1:03:00 - Restricting Data Based on Roles 1:06:00 - Implementing Laravel Policies 1:10:00 - Using Policies in Controllers 1:13:00 - Securing URLs Based on Policies 1:14:00 - Dynamic Authorization in React UI 1:17:00 - Hiding Navigation Based on Permissions 1:20:00 - Fine-Tuning Access Control with Laravel Policies 1:24:00 - Using Laravel Resources for Policy Access 1:29:00 - Final Dynamic UI Based on User Roles 1:30:00 - Outro & What's Next (Search, Filters, etc.) 👍 Like, Share, and Subscribe for the next video covering: ✅ Search ✅ Sorting ✅ Filters ✅ API pagination & more... #Laravel12 #React #FullStack #ShadCNUI #MultiRoleAuth #LaravelReact #Gates #Policies #CRUD #LaravelStarterKit #InertiaJS #TailwindCSS #Authorization #WebDevelopment #LaravelTutorial #ReactTutorial #AdminDashboard #LaravelSecurity #SaaSDevelopment #FrontendDevelopment #BackendDevelopment