سفارشیسازی Filament برای اپهای کاربرمحور
Customizing Filament For User-Facing Apps
In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.
قسمتهای دوره
Setup and Foundation (4)
به Booknest خوش آمدید
2m 18sBuild Booknest with Laravel and Filament—turn an admin panel into a polished, user-facing app from a fresh install with clean layout and UX.
راهاندازی دو پنل Filament
14m 40sInstall Filament and configure separate admin and user panels. Secure access, build a Book resource with policies, and seed realistic data.
با برندینگ و تمها آن را به خودتان تبدیل کنید
13m 53sMake Filament feel like your app: customize branding, colors, fonts, and dark mode, refactor panel config, and generate a theme for clean styling.
استایلدهی لیست کتابها
11m 11sBuild a clean, read-only book list in Laravel: generate a Book resource, then style it with Split, Stack, grids, and custom views.
Core Features (6)
ردیابی درخواستها، امانتها و بازگشتها
15m 13sBuild a Laravel app core: track book requests, borrows, and returns with pivot models, plus a user-scoped Filament resource with tabs and badges.
افزودن امتیازات و نشانهای وضعیت
7m 13sAdd star ratings and status badges to book cards in Laravel using eager loading, avoid N+1 queries, and render clean custom columns.
ساخت اکشنهای مفید جدول
15m 50sAdd Filament table actions with recordActions(): request books, cancel or return items, collect feedback, and show buttons only when relevant.
بهبود UX با اعلانهای بهتر
7m 24sUpgrade UX with tailored notifications: refine success/error copy, set global position, and build rich, persistent actions using Notification::make().
ایجاد یک فیلد فرم امتیازدهی ستارهای
9m 52sBuild a Filament star rating form field with Livewire, Alpine state, and Tailwind styling—replace boring selects with a slick UX.
طراحی مجدد صفحه جزئیات کتاب
14m 26sRedesign a clean book detail page in Filament: refine the Infolist with sections and grids, add ratings, actions, and reviews.
Polishing (4)
بهبود ناوبری نوار کناری
17m 30sPolish your app’s sidebar navigation: adjust width, labels, slugs, icons, and groups, plus add badges and refresh events to stay synced.
استایلدهی Filament با هوکهای CSS
20m 5sStyle Filament confidently using CSS hooks and Fi-* classes. Use Tailwind @apply and custom CSS to refine sidebars, tables, and tabs.
ساخت داشبورد با ویجتها
12m 16sBuild a real dashboard with Livewire widgets and reading stats. Create a custom page to control ordering, columns, and spans.
سفارشیسازی صفحه ورود با هوکهای رندر
11m 25sPolish your Filament login page using render hooks, Blade injection, and @vite-loaded CSS for a clean, on-brand authentication UI.




