Let's build a powerful CSV importer and exporter with Livewire, completely from scratch. This can handle millions of rows, be reused for multiple models, and by using queues, doesn't require the browser to be open. This course is for you if: * You need a robust drop-in importer and exporter component for your models that you have full control over * You want to brush up on some advanced Livewire concepts * You want to learn about queues in Laravel
In this mini-course, we’ll walk through setting up and adding Cloudflare Turnstile to our Livewire forms. Turnstile is a reCAPTCHA alternative, and thanks to a handy package, we’ll have it set up in no time, ready to apply to any form. Once we’re done, we’ll take a look at configuring the widget and adding custom validation rules to display to the user if the verification fails.
Let’s tackle how to batch tasks in Laravel, change their state as they complete, and display step-by-step progress in the UI. Using job batching we’ll create, dispatch and monitor a list of sequential jobs — changing their state using model states. We’ll also take this a step further to allow batch variations based on different tasks, and the ability to easy swap around the order of tasks. At the end of the course, we’ll set up a UI with Livewire to poll the state of our batch, displaying progress to the user (and if anything goes wrong). Simply put, if you’re building something that requires step-by-step jobs to be run and you need to display progress to the user — this course covers absolutely everything you’ll need to know.
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