Library

Courses

Course
Livewire
Build a Trello Clone With Livewire

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.

31 episodes
2 hrs 27 mins
Course
Livewire
Build a Livewire Comment System

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.

18 episodes
1 hr 40 mins
Course
Livewire
Create an AI chat bot with Livewire and ChatGPT

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.

6 episodes
29 mins
Course
Livewire
Build an Appointment Booking System With Livewire

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!

36 episodes
3 hrs 4 mins
Course
Livewire
Drag and Drop Sorting 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.

6 episodes
22 mins
Course
Livewire
Crop and Upload Profile Photos with Livewire

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

10 episodes
43 mins
Course
Livewire
Livewire Multi Step Forms

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.

15 episodes
1 hr 38 mins
Course
Livewire
Chunking Large Uploads in Livewire

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.

13 episodes
53 mins
Course
Livewire
Building Modals in Livewire

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.

11 episodes
1 hr 1 min
Course
Livewire
Fast Infinite Scroll with Livewire

Infinite scrolling in Livewire can be simple to implement, but things slow down as more data rolls in. In this short course, we’ll look at a technique to load batches of records upfront, then fetch and render each batch only when its needed. The result? No drop in performance, regardless of how many records a user scrolls through.

5 episodes
27 mins