Blade, Inertia and Filament, on purpose

Laravel 13, Inertia 3, React 19, and Filament 5 are three technologies integrated into a single application. Each serves a distinct purpose, addressing specific problems encountered during development.

Blade is a templating engine that allows for server-rendered views with structured data. It eliminates the need for a front-end framework and reduces the size of JavaScript code to only 4,323 bytes. Blade's strength is demonstrated in the breadcrumb component, which emits navigation and JSON-LD in the same render, ensuring consistency between human and crawler consumption.

Inertia introduces typed props and eliminates the need for maintaining an API. By returning a readonly DTO, the controller receives the data, and the page renders it without the overhead of a client store, serializer layer, or separate versions of routes. This approach simplifies the development process and reduces potential points of failure.

Filament provides a simple, yet powerful back office for CRUD operations. By chaining two calls, a searchable, sortable, and paginated column is generated. The integration with Pest ensures that the panel is tested alongside other parts of the application. Livewire, which powers Filament, is not a direct dependency, and the developer has never written a Livewire component manually.

The integration of these three technologies results in a single application serving three distinct worlds, all operating from one origin. This approach eliminates potential drift between the public site and product, as both share the same token sheet. Additionally, shared state is achieved through a cookie and stylesheet, reducing complexity and ensuring consistency.

Light and dark mode settings are stored client-side, with both worlds reading from the same contract. This ensures that a visitor switching between light and dark modes will see consistent themes across all three worlds. The theme is determined before the first paint, ensuring that the correct theme is applied from the outset. This approach simplifies theme management and eliminates the risk of theme inconsistencies across different browsers or sessions.