Laravel 11 with Inertia.js and React | A Practical Guide

Create a reusable toast component to display flash notifications across all pages, avoiding code duplication. Integrate it into the authenticated layout with React hot toast and Inertia.js use page.

Fix the flash notification issues by adding a unique key for each post in the index.jsx loop and by checking the body property in the post defi.jsx component.

Learn to customize the default error pages in Laravel by defining blade files in resources/views/errors (such as 403) to override specific status codes, with Inertia responses covered next.

Return inertia responses for application errors in laravel by customizing the exception response, inspecting status codes such as 403 and 419, and rendering a React error component.

Reuse a single error component to render multiple error types by status codes, with backend sending the status and front end using use memo to compute titles and descriptions.

Define a config to enable or disable rendering of custom inertia error pages by environment, toggling between local and production.

Build a student management system from scratch using Laravel, Inertia.js, React, and Tailwind CSS, implementing CRUD operations, validations, dependent dropdowns, and server-side pagination.

Install and set up a Laravel 11 project with Inertia.js and React using Breeze starter kit, SQLite database, and initialize a git repo, then prepare migrations, seeders, factories, and relationships.

Examine the database structure for a Laravel app, detailing classes, sections, and students and defining migrations, factories, seeders, and relationships with cascade on delete.

Display the students data with a secured route and controller. Use API resources to format class and section data, render with Inertia to a React component, and prepare for pagination.

Implement pagination in a Laravel 11 app with Inertia.js and React by using the paginate method to fetch ten records per page, and render navigation with meta and links.

Implement the record creation flow by applying dynamic classes for active links with curly braces and backticks, then set up the create method and Inertia render with classes resource data.

Continue building the record creation flow by wiring the create component with the Inertia.js use form helper, handling name, email, class_id, and section_id, and planning dependent dropdowns and validations.

Develop dependent dropdowns in a laravel 11 app using inertia.js and react by rendering classes data, then fetch sections with axios when the class id changes, and populate sections dropdown.

Learn to implement the record update flow in a Laravel 11 app with inertia.js and React, including editing a student, validating requests, updating with put, and frontend data binding.

Define a destroy method with route model binding to delete a student and redirect to the index, then attach a delete button that confirms and calls router.delete to students.destroy.

Enable search functionality across name and email by binding a search term to an input and building a dynamic students url that drives backend filtering.

Fixes pagination related issues by maintaining the current page number and rebuilding the students URL when the search term changes, ensuring the search state persists during page navigation.

Render a classes dropdown and filter the students by class id on the front end and back end, preserving the filter state via url parameters.

Implement a from-scratch debounce for the data table search using setTimeout and useEffect, with a temporary input state, two-second delay, and automatic page reset to one when the term changes.

Learn to implement roles and permissions in inertia based applications from scratch, enabling front end and back end authorization checks and sharing permission data between server and client.

Explore the database structure for implementing roles and permissions in a Laravel 11 app. See how users, roles, and permissions relate via belongs-to-many pivots using permission_role and role_user.

Define the role and permission models with title fields, create migrations and pivot tables (permission_role, role_user), and seed initial admin and user data for role-based access.

Learn to display and delete roles in a Laravel 11 app using inertia.js and react, including setting up a role controller, resource, and front-end index with delete actions.

Explore storing roles in a Laravel 11 with Inertia.js and React app: define create and store methods, validate the title input, and connect the front-end to the roles index page.

Learn to edit roles in a Laravel 11 app with Inertia.js and React, using route model binding, Inertia render, and a put request to update the role.

Implement permissions selection on the role edit page by wiring react select to display and sync permissions, handling eager loading, and updating the backend with mapped, synced data.

Define and register authorization gates from the authenticated user's roles and permissions using a middleware, enabling or aborting access based on each permission in Laravel 11.

Implement backend authorization by gating actions with the gate facade. Protect student and role controllers with permissions like student_access, student_create, role_access, and role_create, ensuring actions run only for authenticated users.

Implement frontend authorization by loading the user's roles and permissions via Inertia, building a can map, and conditionally rendering UI elements such as create, edit, and delete based on access.

Learn to implement smooth infinite scrolling in a Laravel 11 app with Inertia.js and React, using pagination and an intersection observer to preload data.

Install a fresh Laravel 11 project with the Laravel installer, Breeze, React and Inertia for infinite scrolling, then initialize Git, use SQLite, and define a model with migrations and seeders.

Define a post model with migration, factory, and seeder using -MFS, seed 100 posts with title and teaser, and set up an admin user to prepare for infinite scrolling.

Define a post controller with an index method to paginate posts, format them with a post resource, and render via Inertia.js; map posts in React to show id, title, teaser.

Configure an intersection observer to watch an element's in-view status and trigger a backend request for additional data, enabling infinite scrolling with the react intersection observer.

Implement infinite scrolling by loading additional posts through Inertia's router when the element is in view, merging new data with existing posts. Switch to Axios in the upcoming lecture.

Replace Inertia's router with Axios to enable infinite scrolling by loading next page, merge new data with existing data, and ensure the backend returns JSON when the client requests it.

Finalize the infinite scrolling feature by adopting cursor-based coarser pagination with next cursor and path, fixing duplicate data while boosting performance in a Laravel 11 with Inertia.js and React workflow.

Implement infinite scrolling with in-view checks and a null next cursor to stop loading at the end, preload data using a negative tailwind translation, and fix the unique key issues.

Implement translations in an inertia-based Laravel 11 app with a language dropdown, set the locale, render translations across the project, and learn how to catch translations to improve performance.

Install a fresh Laravel 11 project with the Breeze starter kit using React and Inertia, configure SQLite, initialize a git repo, and define a languages enum for translations.

Define an enum to store available languages in a Laravel 11 app, create it with artisan, and use a label helper to expose language labels for the frontend.

Share available languages to the frontend via Inertia middleware, format as value and label, and enable end users to translate the app by selecting a language and setting the locale.

Build a language selector in a Laravel 11 with Inertia.js and React app, enabling the end user to choose a language and apply translations across the app.

Store the language selected by the user in the session of a Laravel 11 app using Inertia JS and React, via a language.switch route and a language switcher controller.

Register and use a set language middleware in Laravel 11 to read the language from the session and apply the locale across the app before inertia requests.

Share available language translations from the Laravel 11 backend to the frontend via the handle inertia request middleware, exposing them as translations under translations.languages with prefixed keys.

Build a JavaScript translation helper named double underscores to replace placeholders with actual values, wiring backend translations to the frontend and rendering greetings like Willkommen John Doe.

Cache translations with a unique locale-specific key and remember forever to speed up loading, then clear the cache during ci/cd deployments to apply updated translations.

Upgrade Inertia from version 1 to 2 in a Laravel 11 with Inertia.js and React project, and explore new features like polling, prefetching, and deferred props.

Learn how inertia 2.0 polling fetches the latest server data at intervals using use poll, enabling real-time updates, post counts, and start/stop control.

Learn how Inertia 2.0 deferred props load an initial skeleton quickly, while deferring data from the server, with client and server implementation and grouping for parallel fetches.

Explore Inertia 2.0's merging props feature in a Laravel 11 app, merging server side data and client side updates (notifications) with the Inertia merge helper, only options, and router reload.

Enable the history encryption API with inertia history encrypt to prevent back navigation after logout by encrypting history data on the client and clearing history to invalidate the key.

Explore inertia 2.0 prefetching to boost perceived performance by prefetching pages on hover or load, and apply programmatic prefetching, caching, and stale while revalidate strategies.