Building Realtime Web Apps with Laravel, Vue 3 and Reverb

Define the post model, migration, seeder, and factory for a real-time post timeline, establish user relations and avatar url logic, and seed 100 posts for testing.

Define an authenticated API to fetch posts, paginate ten records by latest created_at timestamp, and return a post resource with embedded user data including avatar via a user resource.

Define post item and post index components, render each post by looping backend data, and enhance the design with breeze-inspired tailwind styling in the home view.

Create a use post composable to manage CRUD and fetch posts from the backend with Axios, then render them by v-for looping in the post index and passing post props.

Implement infinite scrolling in a Vue.js app using the intersection observer from view use core to fetch additional posts from a Laravel-paginated backend as the user scrolls to the bottom.

Shift the element above its original position with a negative y translate using tailwind to preload the next batch before the bottom for infinite scrolling, and unify the fetch logic.

Define essential UI components for the timeline project, including a primary button and text area inspired by the breeze package and tailwind, and integrate the create post feature.

Define an API to store new posts, validate body and auth, return the post resource, fix future created_at seeds, and introduce Pinia state management for the Vue app.

Configure Pinia in a Vue.js project, migrate state from composables to a store, and implement a timeline with a post store managing page, posts, and loading state.

Fix the fetchNextPosts call by guarding it with an is_loaded boolean that becomes true after the initial data load, ensuring ten records load first before subsequent chunks.

Define a store post action to send form data to the API and prepend the new post to the timeline. Render server driven validation errors from the errors object.

Fix the issue pushing a new post into the timeline by properly accessing response.data.data and adding a pushPost function to avoid duplicates. Prepare for real-time updates with Laravel Echo.

Fix duplicate posts in the real-time timeline by popping the last post from the post array before pushing a new one, on both sender and receiver sides.

Pass the Laravel Echo socket ID when broadcasting from an API to distinguish the sender from others, by sending the x socket ID header during post storage.

Implement authorization to ensure only post owners can delete posts, delete via a store action, and broadcast a real-time post deleted event on the posts channel.

Toggle the edit state for a post with a boolean editing flag, populate the body in edit mode, and use an edit component to update or cancel, including child-to-parent events.

Update posts in real time by editing the post body, syncing changes via the backend to the current user’s dashboard, and broadcasting updates to all viewers on the timeline.

Implement real-time post updates by broadcasting a post updated event on the public post channel and syncing front-end views with Laravel Echo.

Identify why the shared validation errors appeared in both create and update flows, then implement separate create and update error bags to render errors correctly.

Implement real-time liking and broadcasting for posts. Update the backend to increment the likes counter, dispatch a post liked event, and broadcast on a post-specific channel to synchronize across users.