🚀 Laravel Inertia Svelte Starter Kit

Modern starter kit for building web applications with Laravel 12, Inertia.js v2, and Svelte 5 (Runes). Includes authentication, Spatie Permission, user management, and component library.

📋 Table of Contents

• Features
• Requirements
• Installation
• Configuration
• Usage
• Project Structure
• Components
• Customization

✨ Features

🔐 Authentication & Authorization

• Login, Register, Forgot Password, Reset Password
• Email verification (optional)
• Spatie Laravel Permission for roles & permissions
• 3 default roles: Super Admin, Admin, Member
• 17 granular permissions
• Permission Matrix UI for managing permissions
• Protected routes with middleware

👥 User Management

• CRUD users with DataTable
• Assign roles to users
• Search, sort, and pagination
• User avatar with initial generator

🔒 Session Management

• View all active sessions
• Revoke sessions from other devices
• Device, IP, and last activity information

🎨 UI/UX Features

• 5 Theme Colors: Orange (default), Blue, Emerald, Purple, Slate
• Customizable Alert Position: 6 positions (top/bottom, left/center/right)
• Responsive Design: Mobile-first approach
• Toast Notifications: Success, error, info, warning alerts
• Loading States: Skeleton loader & spinner
• Empty States: Informative placeholder

🛠️ Developer Experience

• Svelte 5 Runes: Full migration to $state, $derived, $effect, $props
• Hot Module Replacement: Instant preview
• Component Library: 40+ reusable components
• Form Handling: Integrated with Inertia
• Validation: Client & server-side
• Multi-language Support: Indonesian & English

📦 Requirements

Make sure your system meets the following requirements:

• PHP >= 8.2
• Composer >= 2.7
• Node.js >= 20.0
• NPM >= 10.0 or Yarn
• MySQL >= 8.0 or PostgreSQL >= 15

🔧 Installation

1. Clone Repository

# Clone repository
git clone https://github.com/RobithYusuf/starterkit-inertia-svelte.git my-app

# Enter directory
cd my-app

2. Install Dependencies

# Install PHP dependencies
composer install

# Install Node dependencies
npm install
# or using yarn
yarn install

3. Environment Setup

# Copy environment file
cp .env.example .env

# Generate application key
php artisan key:generate

4. Configure Database

Edit .env file and configure your database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

5. Run Migrations & Seeders

# Create database tables
php artisan migrate

# Seed dummy data (optional)
php artisan db:seed

Seeder will create:

• Super Admin: [email protected] / password
• Admin: [email protected] / password
• Member: [email protected] / password
• 50 dummy users with member role

6. Build Assets

# Development mode with HMR
npm run dev

# Production build
npm run build

7. Start Development Server

# Terminal 1: Laravel server
php artisan serve

# Terminal 2: Vite dev server (if not already running)
npm run dev

Application accessible at: http://localhost:8000

⚙️ Configuration

Email Configuration

For email features (reset password, verification), configure in .env:

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
[email protected]
MAIL_PASSWORD=your-app-password
MAIL_ENCRYPTION=tls
[email protected]
MAIL_FROM_NAME="${APP_NAME}"

Storage Link

For file/image uploads:

php artisan storage:link

Queue Configuration (Optional)

For background jobs:

QUEUE_CONNECTION=database

php artisan queue:table
php artisan migrate
php artisan queue:work

💻 Usage

Default Users

After running seeder, use the following accounts:

Roles & Permissions

This project uses Spatie Laravel Permission:

Available Permissions:

• user.view, user.create, user.edit, user.delete
• role.view, role.create, role.edit, role.delete
• settings.view, settings.edit
• dashboard.admin, dashboard.member
• profile.view, profile.edit
• sessions.view, sessions.revoke
• components.view

Route Structure

// Public routes
Route::get('/', ...);
Route::get('/login', ...);
Route::get('/register', ...);

// Admin routes (super-admin & admin)
Route::middleware(['auth', 'role:super-admin,admin'])->prefix('admin')->group(function () {
    Route::get('/dashboard', [DashboardController::class, 'index']);
    Route::resource('users', UserController::class);
    Route::resource('roles', RoleController::class);
    Route::resource('permissions', PermissionController::class);
    Route::get('/settings', ...);
    Route::get('/components', ...);
});

// Member routes
Route::middleware(['auth', 'role:member'])->group(function () {
    Route::get('/dashboard', ...);
    Route::get('/profile', ...);
    Route::get('/sessions', ...);
});

📁 Project Structure

├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   └── Middleware/
│   └── Models/
├── resources/
│   ├── js/
│   │   ├── Components/     # Reusable Svelte components
│   │   │   ├── Dashboard/
│   │   │   ├── Layouts/
│   │   │   ├── Shared/
│   │   │   └── UI/
│   │   ├── Pages/         # Svelte pages
│   │   │   ├── Auth/
│   │   │   ├── Dashboard/
│   │   │   └── Error.svelte
│   │   ├── Stores/        # Svelte stores
│   │   └── app.js         # Main entry point
│   └── css/
│       └── app.css        # Tailwind CSS
├── routes/
│   └── web.php           # Application routes
├── database/
│   ├── migrations/
│   └── seeders/
└── tests/

🧩 Components

Starter kit provides 40+ ready-to-use components with Svelte 5 Runes:

UI Components

Form Components

View all components at /admin/components after login.

🎨 Customization

Changing Theme

1. Via UI:

   • Login as admin
   • Go to Settings
   • Select desired theme

2. Adding new theme:

   // resources/js/Stores/themeStore.svelte.js
   export const presetThemes = {
    indigo: {
        name: 'Indigo Night',
        colors: {
            primary50: '#eef2ff',
            primary100: '#e0e7ff',
            // ... other colors
        }
    }
   };
   

Adding Role & Permission

// database/seeders/RolePermissionSeeder.php

// Add new permissions
$permissions = [
    // ... existing
    'report.view',
    'report.export',
];

// Create new role
$editor = Role::create(['name' => 'editor']);
$editor->givePermissionTo(['report.view', 'report.export']);

// Run: php artisan db:seed --class=RolePermissionSeeder

Using Permissions in Svelte

<script>
    import { page } from '@inertiajs/svelte';
    
    let user = $derived($page.props.auth?.user);
    let canCreateUser = $derived(user?.permissions?.includes('user.create'));
    let isAdmin = $derived(user?.roles?.some(r => ['admin', 'super-admin'].includes(r)));
</script>

{#if canCreateUser}
    <Button>Create User</Button>
{/if}

📚 Resources

• Laravel Documentation
• Inertia.js Documentation
• Svelte Documentation
• Tailwind CSS Documentation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open-sourced software licensed under the MIT license.

👨‍💻 Author

Created with ❤️ by RobithYusuf

Happy Coding! 🎉