Browse all series

Practical UI Components With Livewire and AlpineJS

In this series, we'll build a collection of practical UI components with Livewire and AlpineJS, using real interface patterns instead of toy examples. We'll start with smaller pieces like inline editing and a reusable toast system, then move into more stateful components like multi-step flows, tag inputs, dynamic search, notifications, and a drag-and-drop Kanban board.

Along the way, we'll focus on the details that make UI feel great to use: autosave, subtle feedback, keyboard navigation, transitions, persisted state, polling, and clean reset behavior. By the end, you'll have a small library of polished components and a clearer sense of how to structure these kinds of interfaces with Livewire and Alpine in your own apps.

Progress

Series Info

Episodes
9
Run Time
1h 55m
Difficulty
Intermediate
Last Updated
Jul 22, 2026
Version
Latest
Play Series

Series Episodes

  1. Episodes (9)

    1. Getting Started

      Let's kick things off by building practical UI components with Livewire and AlpineJS. We'll focus on how they work together to create interactions that feel modern, smooth, and thoughtfully built.

    2. Inline Editing

      We'll warm up by building a polished inline editing experience in Livewire. Plain content will become editable fields with autosave, subtle feedback, and a smoother overall feel.

    3. Toast Notifications

      Next, we'll add a reusable toast system to give users better feedback. We'll wire it up with Livewire and Alpine, then make the notifications stack, animate, and disappear smoothly.

    4. Build a Multi-Step Wizard

      In this lesson, we'll turn a modal into a real multi-step wizard. We'll validate each step, support easy backtracking, and add persisted state and smooth transitions to make the flow feel polished.

    5. Tag Input

      We already have the basics in place, so now it's time to make the tag picker feel polished. We'll add suggestions, keyboard navigation, and the ability to create a new tag when nothing matches.

    6. Infinite Scroll

      Next, we'll turn a basic feed into a proper infinite scroll with Livewire 4. Then we'll add search and category filters that reset cleanly and keep the experience feeling smooth.

    7. Notification Center

      We'll take a basic notifications dropdown and make it feel alive. That means polling for new items, animating them in, syncing the unread badge, and wiring up read state with Livewire and Alpine.

    8. Dynamic Search

      Our basic Livewire search dropdown already works, but now we'll make it faster and more polished. We'll add keyboard navigation, recent searches, and the little details that make inline search feel great.

    9. Kanban Board

      Finally, we'll turn a static board into a useful little Kanban with Livewire's wire:sort features. Once drag and drop is working well, we'll round it out with quick task creation and cleanup.

Continue Learning

The Many Misconceptions of Laravel thumbnail

The Many Misconceptions of Laravel

With Jeremy McPeak

Laravel is the recipient of plenty of criticism, but much of it is based on half-truths, outdated assumptions, or a fuzzy sense of what the framework is actually doing. In this series, we'll take those common complaints head-on and build a clearer mental model of Laravel, from modern PHP, to facades, the service container, Eloquent, and more.

  • 12 Episodes
Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

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.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes