Join a room and start chatting! This course covers building a multi-room text chat app with Livewire using Laravel Reverb for real-time updates. Using presence channels and client-to-client whispering, we’ll also show who’s online, and who’s currently typing.
Get ready to master drag and drop sorting in Livewire, by building a Trello clone. We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order. Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Build a drop-in comment system with Livewire that instantly works for any model. We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually. Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.
Let’s learn how wire:stream can help us stream ChatGPT responses as they arrive, by building a chat interface with Livewire. Each message we send and receive will be shown in chat history. It even remembers the conversation context. Sure, there are a ton of ChatGPT wrappers out there, but by the end of this course, you’ll have wire:stream in your toolkit for future projects.
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course. Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments. For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots). To finish up, we’ll create an entire booking flow with Livewire, including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment. Phew. We’ve got a lot to learn — let’s build a booking system with Livewire!
Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js. We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database. Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.
Using Livewire, Alpine and Cropper.js (or any cropping library), we’ll create an embeddable form field for users (or any other model) to upload profile photos. The form element will launch a modal, where users can crop and adjust their profile photo, before being able to preview and save the cropped image — or clear everything out and start again. You’ll learn: - How to launch modals in Livewire - How to use Cropper.js with Alpine - How to resize images on the backend with the spatie/image package - How to pass data between Livewire components
Everything you need to build multi step forms in Livewire. We'll cover the basics of creating a multi step form, adding steps, navigating steps and accessing state using the laravel-livewire-wizard package. Finally, we'll build a fully working practical example with more advanced step navigation, file uploads, and custom state.
Effortlessly handle large file uploads in your Livewire apps with chunked, resumable uploading. We’ll cover the entire upload process, display a progress bar, then add the ability to pause, resume and cancel uploads. From there, you’ll be able to handle huge file uploads anywhere in your applications.
Build your own modal functionality in Livewire, completely from scratch! We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.