Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Build a Livewire App With Me!

Join me as we build an application from an idea to a functional prototype. We will use Livewire Volt, Reverb, and learn some fun AlpineJS tricks along the way. What does it look like to think through building an application, making it work, and then making it beautiful?

Series trailer thumbnail

Progress

Series Info

Episodes
21
Run Time
3h 26m
Difficulty
Intermediate
Last Updated
Sep 16, 2024
Version
Latest
Play Series

Series Episodes

  1. Episodes (21)

    1. What We'll Build

      How do we take an idea and turn it into a functional prototype? What are the tools we'll use? How will we make it beautiful?

    2. Prepping Our Workspace

      It's always best to just jump right in and start building. Let's get the tools we need all set up and ready to go and then take some time thinking through how we'll structure our application's data models.

    3. Models and Migrations

      Now that we have our data models in place, let's put those plans into action and create our database so that way we can start building our application.

    4. Adding a Component Library

      Using additional packages or libraries can help us build our application faster, especially when it comes to styles. Let's add a component library (WireUI) to our application and choose some styles to use.

    5. Refactoring Migrations and Methods

      When you're building an application, your data models change over time. Let's refactor our migrations and methods to make it easier to add new Listening Parties to our application.

    6. Livewire Volt Full Page Components

      When we use Livewire Volt, we have the option of using full page components. What are the things we need to think through using this approach?

    7. Prepping the Podcast Job

      Let's find the best way to get the application working instead of trying to solve for all options at once.

    8. Process the RSS Feed

      What information can we get from a podcast RSS feed? Let's see what we need in our application and then use a background job to grab the information we need and calculate the rest of the data.

    9. Styling the Landing Page (Part 1)

      Once we have the data we need, how do we start to show that data in a way that fits for our application and in a way that looks good? Let's start with the first page of our application.

    10. Styling the Landing Page (Part 2)

      Let's improve the barebones look of our application and use TailwindCSS and WireUI to make it look nicer.

    11. Adding Alpine.js to the Landing Page

      As we finish improving the look and feel of our application's landing page, let's use AlpineJS to add some dynamic elements.

    12. Using Custom Fonts

      An application wouldn't be complete without a logo. Let's add a custom font and pretend it's a logo so that we can prettify our application with minimal effort.

    13. Setting Podcast State with Alpine.js

      As we start building the real-time listening experience for our application, how can we use AlpineJS to keep users in sync, even if that's just on the client?

    14. Adding a Scheduler to the Application

      What's the easiest way to make sure our application data stays up to date on the server? Let's use a scheduler to update listening party state and then use that data to update our application's views.

    15. Building a Waiting Room

      How can we use AlpineJS to keep all of our users seeing the same data on without using websockets (yet)? Let's build a waiting room for our application until the podcast listening party starts.

    16. Give Consent to Play Audio

      The browser policies for playing audio are geared towards the user's privacy. Let's give the user the ability to consent to playing audio and then use that consent to determine if and when we should play the podcast.

    17. Syncing Alpine.js and Livewire

      One of the benefits of using Livewire is it's so closely tied to AlpineJS. How can we use server-side state to keep our AlpineJS client code displaying the same data?

    18. Creating a Podcast Player

      Before we reach for other options or libraries, what can we do with basic CSS and a little bit of AlpineJS? Quite a lot.

    19. Real-time Chat with Laravel Reverb

      Once you have the structure set up for a chat application in Laravel Livewire, adding real-time functionality is incredibly simple. Let's take a look.

    20. Real-time Emoji Reactions

      Event broadcasting is incredibly flexible. How can we take client-side emoji reactions and broadcast them to people who are in the listening party?

    21. What's Next?

      Usually when you build an application, it's never quite "done". I'll give you a few ideas for what you can do next to make your application even better.

Continue Learning

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
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes