Clone Linktree en Laravel + Filament

Apprenez à développer un système Link in Bio (type Linktree) en utilisant Laravel et FilamentPHP. Ce guide vous accompagne pas à pas pour créer une page publique personnalisée avec gestion des liens et aperçu en direct.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Une application Laravel installée
• FilamentPHP v4 configuré
• Composer et une base de données fonctionnelle

Création des Modèles et Migrations

Nous allons créer deux modèles : Profile et Link.

php artisan make:model Profile -m
php artisan make:model Link -m

Dans la migration profiles :

$table->string('display_name');
$table->string('slug')->unique();
$table->string('avatar_path')->nullable();
$table->text('bio')->nullable();
$table->boolean('is_active')->default(true);

Dans la migration links :

$table->foreignId('profile_id')->constrained()->cascadeOnDelete();
$table->string('title');
$table->string('url');
$table->boolean('is_active')->default(true);
$table->integer('position')->default(0);

Création de la Resource Filament

Générez une Resource Filament pour le modèle Profile :

php artisan make:filament-resource Profile

Dans le formulaire, ajoutez un Repeater pour gérer les liens :

Repeater::make('links')
    ->relationship()
    ->schema([
        TextInput::make('title')->required(),
        TextInput::make('url')->url()->required(),
    ])
    ->reorderable('position');

Et un composant custom ProfilePreview pour afficher un aperçu en direct de la page.

Page Publique

Ajoutez une route dans web.php :

Route::get('/u/{slug}', [PublicProfileController::class, 'show'])
    ->name('public.profile');

Et dans le controller :

public function show($slug)
{
    $profile = Profile::where('slug', $slug)
        ->where('is_active', true)
        ->firstOrFail();

    return view('profiles.public', compact('profile'));
}

Conclusion

En quelques étapes, vous avez un clone simple de Linktree avec : • Un tableau de bord Filament pour gérer son profil et ses liens • Un aperçu en temps réel • Une page publique partagée via /u/{slug}

🚀 De quoi lancer un mini-SaaS en un rien de temps !