Learn Livewire practically by building multiple real-world projects along the way.
# Course Description
What you’ll learn
- Learn how to Build Practical Applications using the TALL Stack.
- Learn how to build Custom Re-Usable Livewire Components from scratch..
- Learn how to Build Real-Time Applications with Laravel and Livewire.
- Learn how to Build Multi-Step Forms with the TALL Stack.
- Learn how to build amazing data-tables using the TALL Stack including features like Bulk Actions, Excel Exports, Filters, Multi-Column Searching/Sorting etc..
- Learn how to Build a Re-Usable Drag & Drop Uploader Component with the TALL Stack.
Course Content
- Getting Started –> 7 lectures • 43min.
- Let’s Build a Students Management System –> 13 lectures • 2hr 9min.
- Building Feature-Rich Data Tables with the TALL Stack (In Progress) –> 13 lectures • 3hr 12min.
- Let’s Build a Re-usable Comments System with Livewire –> 23 lectures • 3hr 30min.
- Building Multi-Step forms with Livewire –> 19 lectures • 2hr 47min.
Requirements
# Course Description
C0UPON C0DE: If anyone wants to use a Coupon Code (I’ll update this every month, and this would help me a lot as well since udemy won’t take the 67% cut) => 8F08925BDABD4BE6D9EC
In this course, we will be Learning Laravel Livewire v3 (A tool to build Powerful, dynamic, front-end UIs without leaving PHP) along with Laravel (TALL stack in general) in a practical way by building multiple practical projects along the way.
Projects Roadmap and Status:
[Uploaded] Livewire Basics
[Uploaded] Building a Simple Student’s Management System
[In Progress] Building Amazing and Performant data tables with the TALL Stack
[Uploaded] Building a re-usable Comments System with Livewire
[Uploaded] Building Multi-Step Forms with Livewire
[In Progress] Building a Re-Usable drag and drop Uploader
[In Progress] Building real-time applications with Livewire
Project Description:
[Uploaded] Livewire Basics
In this section, we’ll look into the basics of Livewire and some of the fundamental features Livewire provides.
Some of the topics we’ll cover in this section include:
- Learn how to Define Components in Livewire
- Look into Properties and Actions in Livewire and their general use cases.
- Learn about Lifecycle Hooks in Livewire and their conventions.
- Learn about Full Page Components in Livewire, how to use them, and some issues we might face. (these eliminate the use of Laravel Controllers and intermediate views)
- A gentle introduction to Alpine.js and how to use it in Livewire/Blade
[Uploaded] Building a Simple Student’s Management System
In this section, we’ll build a simple CRUD app and dive into the fundamentals of building CRUD applications with Livewire and the TALL Stack, we’ll start by installing Laravel and then set up Livewire along with Laravel Breeze installation, and we will learn the following topics along the way:
- Learn about Lifecycle hooks and Build dependent dropdowns in Livewire
- Learn how to extract properties and methods to a Form Object and use it in a Livewire Component
- Learn how to work with Factories and Seeders in Laravel, and seed the necessary data for all of our Models
- Learn about the new #[Rule] attribute syntax in Livewire and implement Validations.
- Learn about wire:navigate and implement SPA kind of experience in a Livewire-based app.
- Look into the issues we might face while using dedicated form objects, and eventually fix all of them.
[In Progress] Building Performant data tables with the TALL Stack
We’ll continue from where we left off in the previous section and build an interesting data table in this section.
This includes Excel Exports, Filtering Functionality, Bulk Records Selection, Loading Indicators etc.
Some of the features that we’ll cover in this section are listed below:
- Learn how to Implement Loading Indicators (while paginating data or while performing any operation)
- Learn how to Implement Search functionality (supporting multi-column searching)
- Learn how to Implement Columns Sort functionality (supports multi-column sorting)
- Learn how to implement Bulk Actions (a feature to select multiple rows and perform group action on all of them)
- Learn how to implement Excel Exports
- We’ll also learn how to install and configure the Filament Notifications package to display notifications.
- We’ll also implement Selecting all the records (across all the pages), and make the necessary visual changes.
- Learn how to Implement Filter Functionality
- And many more…
[Uploaded] Building a re-usable Comments System with Livewire
In this Section, we’ll be building a re-usable Comments Component that instantly works for any model. We’ll use polymorphic relationships, which can be attached to multiple models.
Some of the features that we’ll cover in this section are listed below:
- Learn how to build a re-usable Comments Component that supports multiple models along with Comment Edit, Delete, and Reply Functionality.
- Learn how to implement proper authorization checks (on both frontend and backend) so that only the authorized user can delete the comment.
- We’ll sprinkle in Alpine.js to make our Livewire Component more interactive (like showing reply/edit forms, applying transitions etc.)
- We’ll also learn how to automatically focus the reply/edit forms when it is rendered in the form. (using Alpine.js)
- We’ll also implement replying to Comments, Editing Comments/Replies, Deleting Comments and Replies
- Learn how to properly paginate the comments and fix a few issues along the way.
- At the end, we’ll look at how to optimize our database queries using eager loading strategies.
[Uploaded] Building Multi-Step Forms with Livewire
In this section, We’ll learn about everything we 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, and building a practical project at the end of the Section.
Some of the features that we’ll cover in this section are listed below:
- Learn how to seamlessly navigate between the steps of the multi-step form, we’ll also implement proper Validations along the way.
- We’ll use a Laravel package specifically dedicated to building multi-step forms in this section, and build features on top based on our needs.
- Learn how to work with Image Uploads and fix state-related issues
- Learn how to define a configurable navigation component to show the state of the Multi-Step Component.
- Finally, we’ll build a fully working practical example with more advanced step navigation, file uploads, and custom state.