Learn Livewire V3 from Scratch : Practical Course

Build a mini students management system using Laravel, Livewire, and Tailwind css with a focus on crud operations, models, migrations, seeders, and pagination for scalable data tables.

Install and set up a laravel project with breeze starter kit, blade with alpine stack, and livewire. Configure mysql and initialize git as you define models and migrations for features.

Define the classes, sections, and students models and migrations for a Laravel-based mini student management system, outlining database structure, relations, and fillable fields, then run migrations and prepare seeders.

Define factories for classes, sections, and students, create a seeder to generate related sections and students, and configure has many and belongs to relationships before migrating and seeding the database.

Define a livewire list students component, render a Tailwind-styled table of all students from the database, enable authentication, and implement pagination with a use with pagination trait.

Learn live wire from scratch by defining a new live wire component and a student creation form with wire model bindings, validations, and database storage, wiring routes and blade views.

Implement dependent dropdowns to populate sections from the selected class using Livewire v3 lifecycle hooks, then finalize the student creation flow with validated inputs.

Learn to implement the record update flow with livewire v3 by building the edit route and component, pre-filling data via route model binding, and validating updates.

Learn how to use Livewire v3 form objects to shift the create student flow into a dedicated form object, including properties, validations, and a store method.

Define a dedicated update student form object, reuse the create form logic, implement set student, fill properties, validate, and call update on the student record to complete the update flow.

Learn to delete individual student records in a Livewire v3 app by passing the student ID, adding a confirmation dialog with wire:confirm, and refreshing the component after deletion.

Enable a spa-like experience in Livewire v3 by implementing the wire navigate feature, which intercepts requests and updates only the changed parts without full page refresh.

Implement indeterminate checkbox states in data tables by updating the check all state as items are selected on a page, showing indeterminate when some but not all are selected.

Implement a select all button to capture all item IDs across all pages before pagination, and sync with selected IDs via a blade component powered by Alpine.js.

Refactor a bloated data table by extracting reusable features into traits, building searchable and sortable traits in app/traits, and applying them to the list students component for reuse across CRUDs.

Build a reusable comments system with Livewire, enabling add, reply, edit, delete, and authorization checks, with pagination while preventing n+1 queries via eager loading and alpine-driven focus.

Install a Laravel project with the installer, configure Breeze with Blade and Alpine, initialize Git, set up MySQL with phpMyAdmin, enable login and registration, define articles and episodes models.

Set up article and episode models and attach a polymorphic comments relationship, then build migrations, views, and invokable controllers to access records by slug.

Install Laravel Livewire, define a comments component, and configure related blades and routes as a foundation for upcoming videos, including removing duplicate Alpine setups and preparing for the comments model.

Define a comment model and migration, implement a polymorphic relationship with a nullable parent_id to distinguish root comments from replies, and attach comments to episodes and articles via morph many.

Learn to list parent comments in Livewire v3 by adding a parent scope, wiring user relationships and gravatar avatars, and using a dedicated comment component for display.

Build a Livewire comment form, validate the body, and post the comment to the database, linking it to the user and rendering it in the Livewire component.

Toggle a per-comment reply form with alpine js using an is replying state in a livewire component, with the filament x data directive, x transition, and x show for reveal.

Learn how to implement storing a reply to a comment in a polymorphic one-to-many relationship using Laravel Livewire, including a reply form, validation, and correct association with the parent model.

Hide the reply form after a successful reply by using Livewire's entangled state with alpine js to sync is replying between front end and back end.

Improve comment component performance by implementing eager loading strategies to reduce n plus one queries, loading comments, their replies, and associated users, using the Laravel debug bar to inspect queries.

Toggle the edit state in a Livewire v3 component, populate the edit form with the comment, and wire the update flow to save changes and rerender the UI.

Implement update comment flow in Livewire v3 by creating an update comment form object, wiring the edit form, populating the text area when editing, updating the database, and rerendering component.

Finalize comment update flow by populating the edit body when editing is true with Livewire V3. Sync with backend via the live modifier to update the comment form and replies.

Discover how model presenters offload methods from large php models into dedicated presenter classes, like a comment presenter, and format created at for humans via the model and blade templates.

Implement a user-owned comment deletion flow with authorization checks, a confirmation dialog, and Livewire component updates to reflect deletions in the UI.

Prevent replies to replies by adding an isReply check on the comment model and using early returns in the Livewire flow, so only top-level comments can be replied to.

Implement the pagination feature for the comments component using Livewire v3, enabling paginated links, first-page navigation after new comments, and a seamless live update without full page refresh.

Learn to autofocus reply and edit textareas in a Livewire v3 comments component using Alpine.js x effect, x ref, and next tick to focus, with total comments via pagination.

Build a three-step multi-step form using livewire and the tall stack, covering meta data entry, image upload, and a final review and publish step.

Install and configure the Laravel Livewire Wizard to build a multi-step form, define step components (cart, delivery address, confirm order), and manage navigation between steps.

Configure the wizard component in livewire v3 by building a parent wizard and step components, rendering title, description, and publish steps, and wiring navigation for a multi-step form.

Implement a multi-step wizard in Livewire v3 by wiring a title input, validating it on submit, storing the title, and navigating to the description step and beyond.

Build a multi-step livewire flow that captures title and description, validates input, previews data in a publish step, and stores it in a wizard model in the database.

Refactor the stateToStore method to map all step data with collections and map with keys, extracting title and description for publishing and front end display, improving scalability when adding steps.

Define a product wizard in a Livewire v3 app by building meta, image, and publish steps, organizing them in a product create namespace, and wiring a steps() method for navigation.

Define a previous step button in a Livewire v3 multi-step form that dispatches a previous step event to the wizard and uses a flex layout to navigate between steps.

The lecture demonstrates building a custom state in Livewire v3 to store and share the created product model across wizard steps, replacing repetitive database queries and enabling image upload integration.

Define the uploader Livewire component and design its interface using Tailwind, including a drag-and-drop file area, multiple file uploads, and validation messages with a progress indicator.

Configure a multi-file uploader with Livewire's with file uploads trait and a public files array. Bind uploads to the front end via alpine js and the files property.

Implement a drag-and-drop upload on the uploader component using alpine js, track dropping state, and provide visual border feedback during drag over.

Learn how to store uploaded files using the Laravel Media Library, attach them to a post model in a dedicated attachments collection, and enable a polymorphic, reusable media workflow.

Learn to display a live progress bar for file uploads using Livewire's upload multiple callbacks and Alpine JS, binding progress detail to an indicator that appears during uploading.

Display user uploaded files, render download links, and use Livewire computed properties to fetch post attachments; implement media downloads via the media library and ensure automatic UI refresh on uploads.

Make the uploader reusable by passing a dynamic model to a Livewire component and displaying its associated media via the Laravel media library.

Install a Laravel project using the installer and Breeze Blade with Alpine, then install Livewire, initialize git, use sqlite, and prepare a model with seeders and factories for infinite scrolling.

Learn Livewire v3 to implement infinite scrolling by loading post data for each chunk via IDs, using a post chunk component, where in queries, and a sorting strategy like latest.

Implement an intersection observer to trigger infinite scrolling by loading more data as items enter the viewport, using Livewire and Alpine.js with the x-intersect directive.

Build a real-time chat app with Laravel, Livewire, and Laravel Reverb, implementing message broadcasting, online user lists, and typing indicators that update without page reloads.

Set up Laravel Reverb and configure broadcasting with Laravel Echo, Pusher, and environment settings to broadcast and listen for real-time events on the front end.

Build the chat interface by rendering the room name and messages using tailwind and alpine js, then set up the input area and ui structure for future logic.

Customize the text area behavior to support shift+enter for new lines and enter to submit, wiring the text area to a Livewire component and storing messages in the database.

Define a message model, migration, and factory to store user messages in a room, validate the body, relate messages to the user and room, and save to the database.

Seed two users, a live wire room, and 50 messages to render in a chat interface, displaying messages on left or right by sender using Laravel seeders and sequence helper.

Define two Livewire components, messages and message, to render each seeded message by looping over the room's messages relationship, eager loading users, and displaying body and timestamp.

Learn how to render chat messages using conditional blade classes in Livewire v3, distinguishing authenticated user messages from received ones and applying dynamic styling with item start and item end.

Learn how to implement real-time functionality with Livewire and Laravel Echo, configure broadcasting with Laravel Reverb, and broadcast on private and presence channels.

Learn how to listen for user joining and leaving events in a chat channel, update the ids array to prevent duplicates, and reflect real-time presence.

Format message timestamps in livewire v3 by creating a createdat human date attribute that renders today, yesterday, or a date with time, and display it in the chat interface.