Superduper Filament Starter Kit

The starter kit includes a pre-configured Role-based Access Control (RBAC) system. You can manage users, assign roles, and define granular permissions through the Admin Panel.

Supported roles include:

• Super Admin
• Admin
• Editor
• User

For debugging purposes, the system supports user impersonation, allowing administrators to act as other users to troubleshoot permission or UI issues.

To set up mail functionality:

1. Navigate to Settings > Email.
2. Configure your mail server settings (SMTP, etc.).
3. Use the built-in tool to Test email configuration.
4. Set up and customize email templates.

Manage how data is cached and how sessions are stored using the .env file. Common drivers include file for local development and redis for production.

CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120

To set up a new project using the SuperDuper Filament Starter Kit, follow these three steps:

1. Create the project using Composer.
2. Run the setup wizard to configure the environment and initial settings.
3. Access the admin panel using the default credentials provided below.

Default Admin Credentials:

• URL: http://localhost:8000/admin
• Email: superadmin@starter-kit.com
• Password: superadmin

# 1. Create a new project
composer create-project riodwanto/superduper-filament-starter-kit

# 2. Run the setup wizard
php bin/setup.php

Improve frontend loading speeds by optimizing assets and images:

Asset Optimization

1. Minify CSS and JavaScript by running: npm run production.
2. Enable gzip compression on your web server.
3. Use a Content Delivery Network (CDN) for static assets.

Image Optimization

1. Use responsive images with srcset and sizes attributes to serve appropriate sizes for different devices.
2. Use modern formats like WebP.

<img 
    srcset="image-320w.jpg 320w,
            image-480w.jpg 480w,
            image-800w.jpg 800w"
    sizes="(max-width: 320px) 280px,
           (max-width: 480px) 440px,
           800px"
    src="image-800w.jpg"
    alt="Description">

Custom styles can be applied by editing resources/css/filament.css. This file uses Tailwind CSS directives and allows for @apply usage.

@config "../../tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles */
.fi-sidebar {
    @apply bg-primary-600 text-white;
}

To update global application settings:

1. Navigate to Settings > General.
2. Update site information (name, description, etc.).
3. Configure date and time formats.
4. Set the default language for the application.

Laravel Telescope provides a debug assistant for your Laravel application.

1. Install via composer: composer require laravel/telescope
2. Run the installation command: php artisan telescope:install
3. Run migrations: php artisan migrate
4. Access the dashboard at /telescope.

The project follows PSR-12 coding standards. You can verify compliance or automatically fix style issues using Composer commands.

composer check-style
composer fix-style

You can create a new project using Composer. Follow these steps to initialize the project and install all necessary dependencies.

1. Create the project:

composer create-project riodwanto/superduper-filament-starter-kit
cd superduper-filament-starter-kit

2. Install PHP and Node dependencies:

composer install && npm install

To change the visual appearance of the Filament panel, edit tailwind.config.js. Ensure you import the Filament preset and include the necessary paths in the content array so Tailwind can scan Filament's PHP and Blade files. You can then extend the theme.extend.colors object to override the primary color palette.

import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                primary: {
                    50: '#f0f9ff',
                    // ... other colors
                    900: '#0c4a6e',
                },
            },
        },
    },
}