Paths

Choose your path to mastery

Topic
Laravel

Realtime with Laravel

Whatever you’re building, adding realtime to your Laravel applications is a breeze with Laravel Reverb and Echo.

Alongside some fun projects, learn everything about broadcasting events in Laravel, listening on the client and reacting to updates.

0%
Path progress
  • Total: 5h 57m
  • Played: 0m
  • Remaining: 5h 57m
Join or sign in to track your progress
Courses in this path
0%
Realtime with Laravel Reverb
New to realtime broadcasting in Laravel? This course covers the essentials with plenty of examples along the way, leaving you ready to start adding realtime functionality to any of your Laravel applications. Broken up into channel types, we’ll cover: - The basics of installing, configuring and running a Reverb server - Broadcasting events - Private channels - Presence channels - Client-to-client broadcasting by whispering
18 episodes
1 hr 19 mins
0%
Build a Multi-room Realtime Chat with Livewire and Reverb
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.
14 episodes
1 hr 23 mins
0%
Build a Realtime Chat with Laravel, Vue and Pinia
Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management. We’ll cover: - Using the Intersection Observer API to automatically load previous chat messages - State management with Pinia - Using presence channels to show online users for each room - Client-to client communication to show who’s typing - Using flexbox tricks to keep messages scrolled into view as they roll in
21 episodes
1 hr 41 mins
0%
One Million Checkboxes with Laravel
How do you render one million checkboxes in a browser and keep them synced in realtime? Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication. Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.
16 episodes
1 hr 17 mins
0%
Deploying Reverb with Forge
So you’ve built a realtime application. Now it’s time to deploy it. Laravel Forge makes it incredibly easy to toggle Reverb, which configures your server for you and sets up (nearly) everything you need to broadcast and listen for events. In this course, we’ll cover every step needed to get an local example application deployed to a production server, with a separate subdomain reserved for your Reverb connections.
7 episodes
16 mins
Topic
Livewire

Big Livewire Projects

A collection of our biggest, most up-to-date projects in Livewire.

Progress through this path to learn tips, techniques and strategies you can apply to any project — and come through the other side having built up a collection of inspiring real-world applications.

0%
Path progress
  • Total: 8h 55m
  • Played: 0m
  • Remaining: 8h 55m
Join or sign in to track your progress
Courses in this path
0%
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
0%
Building Reactive Realtime Applications with Livewire
Livewire can react and re-render anywhere you need it to. But what if we have a infinite scrolling timeline of user posted content with updates in realtime? With added reactivity, we need to be a bit more careful about performance. Let’s build this together, making sure we keep things running smoothly along the way.
12 episodes
1 hr 43 mins
0%
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
0%
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
Topic
Inertia

Learn Inertia

Build reactive single-page applications without leaving Laravel. Meet Inertia — the bridge between Laravel and your favourite front-end framework, wrapped up in a convenient monolith.

The courses in this path have been designed to touch nearly every aspect of Inertia — by the end, you’ll be ready to build anything.

This path focuses on Vue, but the knowledge within can be applied to React or Svelte.

0%
Path progress
  • Total: 6h 27m
  • Played: 0m
  • Remaining: 6h 27m
Join or sign in to track your progress
Courses in this path
0%
Learn Inertia
Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API. Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API. To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.
28 episodes
2 hrs 20 mins
0%
Installing Inertia from Scratch
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it? In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes. To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
14 episodes
1 hr 7 mins
0%
Flexible Flash Notifications with Inertia
Flash notifications exist in almost every application. With Inertia, flashing notifications requires a bit more thought, and we're going to take this further and end up with a global notification plugin that just... works. By the end of the course, you'll have the ability to flash any type of notification, anywhere in your application, without repeating any code.
7 episodes
28 mins
0%
Translations with Laravel and Inertia
Localisation is a breeze in Laravel applications, but what happens when you need to bring this to the client-side? Turns out in Inertia, it's pretty simple. In this course, we'll build a language switcher, share translations with the client, and build a simple translation helper for Vue to use directly in templates. We'll also cover caching translations to keep things running smoothly. The best part? With the magic of reactivity, we'll be able to switch languages without any page refresh, and see everything instantly translated.
9 episodes
57 mins
0%
Modals in Inertia
Effortlessly add modals to your Inertia applications with the momentum-modal package. In this course, we’ll get modals set up, design a customisable modal container with transitions, then cover everything you need to know about working with modals in your Inertia applications.
10 episodes
46 mins
0%
Chunking Large Uploads in Inertia
Effortlessly handle large file uploads in your Inertia/Vue apps with chunked, resumable uploading. We’ll cover the entire upload process for the client and server, 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.
10 episodes
46 mins

Big Inertia Projects

Dig even further into Inertia with hours of practice — a huge collection of real-world projects to sharpen your skills.

Each course works through building a real-world application that touches nearly every aspect of building single-page applications. You’ll pick up tips, techniques and strategies you can apply to any project.

Let’s build.

0%
Path progress
  • Total: 21h 7m
  • Played: 0m
  • Remaining: 21h 7m
Join or sign in to track your progress
Courses in this path
0%
Build a Forum with Inertia and Laravel
Ready to build a forum with Inertia and Laravel? Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting. So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
62 episodes
6 hrs 54 mins
0%
Build An Uptime Monitor with Inertia
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects. This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down. In this course, you'll learn to: * Build a real app from scratch with Inertia * Work with Laravel queues * Perform actions on models at user-defined intervals * Work with sub-minute schedules in Laravel * Send out channel notifications with Laravel * Use API resources to simplify Inertia data * Organise apps with events and observers * Create modals in Vue * Perform inline editing with Inertia forms
44 episodes
4 hrs 59 mins
0%
Build a Webcam and Screen Sharing Site With Inertia
Let’s build an app to capture and record your webcam (or screen) directly from the browser, store it, and provide a link that can be shared to anyone for them to watch. Completely from scratch, we’ll hook into the browser APIs for recording, send the video to our backend for encoding, generate still images with FFmpeg, and produce a sharable link that can be sent to anyone for them to view.
16 episodes
2 hrs 16 mins
0%
Build an Appointment Booking System With Inertia
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 Inertia (using Vue), 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 Inertia!
39 episodes
5 hrs 0 mins
0%
Multiple Drag And Drop File Uploading and Processing with Inertia
Build a multiple file chunked uploader in Inertia with the ability to pause, resume and cancel uploads. We’ll also be able to edit metadata (like the title and description) for each upload — even while they’re uploading and processing. In the second half of the course, we’ll learn how to queue and process uploaded files on the backend (like encoding videos), and in realtime, report back to the client with progress updates using WebSockets. It’s everything you need to know to upload and process large files in Inertia.
17 episodes
1 hr 56 mins
Topic
Alpine.js

Learn Alpine.js

Alpine.js a lightweight JavaScript framework with serious power.

Either used on its own, sprinkled into an existing project, or paired with Livewire and Tailwind CSS to form the TALL stack — its straightforward syntax, extensibility and first-party plugins will allow you to add dynamic interfaces anywhere you need.

0%
Path progress
  • Total: 4h 17m
  • Played: 0m
  • Remaining: 4h 17m
Join or sign in to track your progress
Courses in this path
0%
Learn Alpine.js
Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.
19 episodes
2 hrs 10 mins
0%
Alpine Store Basics
Forget dispatching events to keep your state together. In Alpine, stores give you a central location for data that make state management a breeze. In this series, we'll cover everything you need to know to get started with Alpine stores!
5 episodes
29 mins
0%
Build a Notes App with Alpine.js
Put Alpine.js state management to the test by building a fully working notes app in the browser.
11 episodes
55 mins
0%
Meilisearch Instant Search with Alpine.js
Combining the power of Meilisearch and the simplicity of Alpine.js to build an instant, as-you-type, result-highlighted dropdown search. We’ll cover making the Alpine.js component highly re-usable, so you can use it in multiple places, or with an entirely different index and options.
12 episodes
42 mins