Twitter Clone with Laravel 10 and Vue 3

Analyze high level system design for a twitter-like app. Focus on functional requirements: follow, tweet creation, and read feeds; address read-heavy data with caching and scalable app servers.

Create the tweets table and model, define cascading foreign keys for user and follower relationships, and build a timeline with hasManyThrough to display followers' tweets, while exploring Laravel relationships.

Build a Laravel 10 timeline endpoint using a timeline controller and tweet resource collection, returning a paginated set of tweets with user name and username for Vue.js rendering.

Move from bootstrap to tailwind by cleaning resources/sass and removing app.css and variable CSS for a Laravel project, then set up postcss.config.js and tailwind.config.js and update app.css.

This lecture introduces Vuex for state management in a Vue 3 Twitter clone, explains why and how to use it, and shows setup with timeline module, getters, mutations, and actions.

Create the tweet compose component in a Laravel 10 and Vue 3 app, wiring a global user object and avatar, and building a focused tweet form.

Discover API debugging with Laravel Telescope: install, migrate, and monitor requests, queries, and status codes; optimize queries with eager loading to boost performance and avoid heavy table loads.

Add a string type field to the tweets table to support tweet, retweet, and quote, and map these types in the tweet controller with a tweet type class.

Implement the quote component by reusing the tweet structure and applying the dry principle to create a quote tweet with the original tweet id, body, and type set to quote.

Refactor the tweet compose component to remove the form wrapper, bind the textarea to the form body, and clear it after the API call to post a tweet.

Create a like model and migration for a user–tweet many-to-many relationship with indexed user_id and tweet_id, foreign keys, and set guarded to [] in the like model.

Implement like counts by using the likes relationship, pass tweet props to components, and eager load likes to avoid duplicate queries, enabling a dynamic front end like action.

Show retweets across the timeline by merging tweet collections and using the original tweet ID, then implement retweet and quote type handling in the user model.

Implement retweet logic in a Laravel 10 and Vue 3 app by creating a retweet controller, API routes, and a retweet relationship, mirroring the like flow and handling dropdown visibility.

Create a media button to upload images or videos via a hidden input, emitting selected files. Plan separate media data handling and future image or video support.

Define allowed image and video mime types in a Laravel API and connect it to a Vue 3 front end, enforcing up to four images and a single prioritized video.

Reduce console warnings by addressing two areas: the property ID binding fix and refining emits in view version three, and demonstrate quick, optional cleanups that keep behavior consistent.

Preview images and video client-side in a twitter clone by building app tweet image and video preview components in Vue 3, using object URLs and video controls without API calls.

Install and configure the Laravel Media Library to upload media, publish migrations and config, run migrations, and set up a public media path with file metadata and model relationships.

Apply a quick fix to reset the Twitter clone progress bar after uploading media in a project built with Laravel 10 and Vue 3.

Improve application performance by reducing duplicate queries, eager loading relations like retweets and media, and leveraging telescope insights to optimize page requests.

Create a quote controller and endpoint to post quotes using the original tweet id and body, wire the front end timeline to submit quotes via Axios.

Add a nullable parent_id to tweets with cascade foreign key, create replies relationship and parent scope, and update resources and actions to expose replies_count and support replies with eager loading.

Implement the reply modal by building the reply model with show and close behavior, escape handling, and media aware compose, preparing for the async post to reply.

Implement real-time functionality for a Twitter clone by setting up a websocket with Beyond Code or Pusher, configuring Laravel Echo, and broadcasting tweet, retweet, and like events.

Learn to implement real-time tweet likes in a Laravel 10 and Vue 3 app by broadcasting updates on a public tweets channel and updating the timeline live.

Synchronize likes across the front end by per-user state and sink like events. Update the state with push and pop, and adjust original tweet counts for retweet and quotes.

Learn to build a database notification for tweet likes in Laravel 10, wiring user and tweet data through resources, and refining when users aren’t notified for their own likes.

Discover how to restructure Laravel 10 notifications by creating a custom database notification channel, making the tweet like type more readable, and exploring the behind-the-scenes driver logic.

Create a namespaced notifications module in Vuex for the Twitter clone, fetch API notifications, and render them with a dynamic app notification component that supports a like variant.

Split the reply notification into modular actions, getters, and mutations, reuse timeline tweet logic, and load tweets by id via a dedicated API endpoint.