Building Realtime Web Apps With Laravel, Vue 3 And Reverb

Learn how to build a realtime applications with Laravel 11, Vue 3 and Reverb, using Pinia for state management

What you'll learn

Learn how to build realtime applications with Laravel (with Sanctum, Reverb) and Vue 3 (SPA))

Learn how to configure Laravel Sanctum (along with Fortify) to serve a Frontend SPA

Learn how to setup broadcasting in Laravel and listen for events in our Vue 3 app using Echo

Learn how to configure and implement private broadcasting in an API/SPA environment

Learn how to implement an infinite scrolling behaviour in a Vue 3 app

We'll also learn how to implement login (which is session based implemented with Sanctum)

Learn State management with Pinia

Requirements

Beginner level knowledge of PHP/Laravel is Required

Beginner level knowledge of VueJS 3 is Required

Description

Using the power of Laravel Reverb, let’s build a real-time post-timeline application with Laravel 11, VueJS 3, and Sanctum,  pulling in Pinia for state management.Projects Roadmap and Status:[Uploaded] A Guide to Setup Laravel with Vue 3 and Reverb[Uploaded] Let's Build a Realtime Post Timeline ProjectProject Description:[Uploaded] A Guide to Setup Laravel with Vue 3 and ReverbIn this section, we'll look into the basics of Laravel and Vue, by setting up both projects.Some of the topics we'll cover in this section include:Learn how to set up Laravel Sanctum to serve an SPA.Look into the basics of broadcasting in Laravel and our frontend Vue 3 app.We'll also configure private broadcasting in our front-end app.Learn how to use composable in Vue 3Learn how to implement authentication features like login flow, along with grabbing the user data on reload.[Uploaded] Let's Build a Realtime Post Timeline ProjectIn this section, we'll build a real-time post timeline project, where the users can create posts, view all the posts, and like the posts, all of these interactions will be realtime, and we'll also implement an infinite scrolling feature.Some of the topics we'll cover in this section include:We'll learn how to configure private broadcasting in an API/SPA environmentLearn how to implement an infinite scrolling feature in Vue 3 and the API will be served by Laravel.We'll learn how to manage the state of our app using PiniaAnd many more topics.Course Summary:Building real-time applications with Laravel (with Sanctum, Reverb) and Vue 3 (SPA)Configuring Laravel Sanctum (along with Fortify) to serve a Frontend SPASetting up  broadcasting in Laravel and listening for events in our Vue 3 app using Laravel EchoConfiguring and implementing private broadcasting in an API/SPA environmentUsing the Intersection Observer API to load the next chunk of posts automatically when the user scrolls to the bottom of the timelineLearn database seeding techniques in LaravelLearn how to use API Resources in LaravelLearn how to listen for Broadcasted events from the backend and react to them accordingly in the frontendAll of this state will be managed on the client side, using PiniaBy the end of this course, you will have built a feature-rich, real-time timeline application that showcases your understanding of front-end and back-end technologies, perfect for any aspiring developer looking to enhance their skills in dynamic web application development.

Overview

Section 1: A Guide to Set Up Laravel(backend) with Vue 3(SPA) and Reverb

Lecture 1 Setting Up Laravel and Vue Projects

Lecture 2 Running On the Same Domain

Lecture 3 Install and Configure Sanctum

Lecture 4 Install and Configure Broadcasting

Lecture 5 Configuring Broadcasting in the Frontend

Lecture 6 Testing Real Time Functionality

Lecture 7 Install and Configure Laravel Fortify

Lecture 8 A Quick Authentication Test

Lecture 9 Installing Tailwind

Lecture 10 Let's Work on the Nav

Lecture 11 An Introduction to Composables

Lecture 12 Moving Auth Logic to a Composable

Lecture 13 Attempting Authentication

Lecture 14 Authenticating on Reload

Lecture 15 Finalizing the Login Flow

Section 2: Let's Build a Realtime Post Timeline

Lecture 16 Define Model/Migration/Seeder/Factory

Lecture 17 Define API to fetch all Posts

Lecture 18 Define PostItem and PostIndex Components

Lecture 19 Displaying the Posts

Lecture 20 Implementing Infinite Scrolling Behaviour

Lecture 21 Finalizing Infinite Scrolling

Lecture 22 Improving the Design

Lecture 23 Defining API to store Posts

Lecture 24 Let's Install and Configure Pinia

Lecture 25 Fixing fetchNextPosts function call

Lecture 26 Finalize Post Store Flow

Lecture 27 Fix Issue while pushing new post in the Timeline

Lecture 28 Fix Duplicate posts rendering Issue

Lecture 29 Fix Laravel Echo Socket ID Issue

Lecture 30 Authorizing and Deleting Posts In Realtime

Lecture 31 Liking and Broadcasting

Laravel Developers who want to Build Realtime web applications using Vue 3 and Reverb