UI Architecture

The starter is architected with two separate and distinct UI stacks. This dual-stack approach is optimized to deliver the best experience for different audiences and use cases: a custom, branded stack for users, and a rapid administration panel for staff/developers.

User Facing Interface - Northwestern Laravel UI

This stack is dedicated to creating a cohesive, branded experience for end-users and the public.

Repository: Northwestern Laravel UI

Stack Details

View Layer: Blade Templates
Styling: Customized Bootstrap 5
Icons: Font Awesome

Purpose & Use Cases

Public Facing Pages: Landing pages, informational content.
Custom Experiences: User dashboards, complex custom workflows.
Branding: Achieving the official Northwestern branded look and feel.
Design Flexibility: Provides full control over the design and frontend code.

Example: The application’s default home page (/) is built entirely with this stack.

Filament

Filament is a rapid application development framework built on Livewire and Tailwind. The starter ships with a single Administration panel for back-end staff tooling, but Filament is not limited to admin use — it is equally suited for authenticated, data-driven user experiences like portals, dashboards, and self-service tools.

Framework: Filament

Stack Details

View Layer: Filament
Styling: Tailwind CSS
Icons: Heroicons

Purpose & Use Cases

Administration: Internal staff tooling, system configuration, and user management.
Data Management: Full CRUD operations, interactive tables, filters, and bulk actions.
Analytics: Custom reporting dashboards and chart metrics.
User-Facing Panels: Portals, self-service tools, and data-driven workflows for authenticated users.
Access: The built-in Administration panel is available at /administration (requires authentication and specific permissions). Additional panels can be created on separate routes.

Choosing the Right Stack

The choice between stacks depends entirely on the audience and the required level of customization.

Northwestern Laravel UI

Best For

Custom User Experiences
Public-facing Content & Landing Pages
Official Branded Pages
Complex Custom Workflows

Trade-offs

More Development Time
Manual building of forms/tables

Filament

Best For

Data-Driven Interfaces
Rapid CRUD Operations
User/System Configuration
Analytics Dashboards
Portals & Self-Service Tools

Trade-offs

Limited UI Customization
Not suited for public/unauthenticated pages

Filament Architecture

Filament’s power lies in its structure based on Panels and Resources.

Filament Panels

A Panel is a discrete, isolated area of the site with its own navigation, set of resources, and pages.

Example: Everything under /administration is driven by the AdministrationPanelProvider.

Panel ID & Authorization

When adding a new Panel, the ID is critical for authorization:

class AdministrationPanelProvider extends PanelProvider
{
    public const string ID = 'administration';

    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id(self::ID)
            // . . .
    }
}

The initial access check for the entire panel is determined by the User::canAccessPanel() method, which uses this ID constant to execute the appropriate permission check.

Filament Resources

Filament adapts Eloquent Models to its system using Resources. This is where the configuration for the tables, filters, and CRUD screens resides.

Generating Resources

To ensure correct mapping to the application’s domain structure, you must specify the model namespace when generating a resource:

php artisan make:filament-resource User --generate --model-namespace=App\\Domains\\User\\Models

The --generate flag is highly recommended as it uses model introspection to create reasonable defaults for forms and columns.

Relation Managers

To facilitate relationships between resources (e.g., users belonging to a role), you use Relation Managers. You must specify the related model’s full path:

# Example: Generating a manager for the Role::users() relationship
php artisan make:filament-relation-manager --related-model=App\\Domains\\User\\Models\\User --attach Role users username