Twitter Clone With Laravel 10 And Vue 3

A complete guide to how to code in laravel & vue

What you'll learn

How to Integrate Laravel with Vue js in a real world project

Api implementation best practices

Create a real time web app

See how twitter really works in practice

Utilise query optimisations and performance boost in a big project

Requirements

Basic knowledge of Laravel

Good understanding of php or any other backend language

An never ending desire to learn

Description

How long has it been since you coded an interesting project ?Are you tired of 40 something hours courses with so many trivia in it ?Have you ever wondered how is it like to code Laravel with Vuejs ?Do you how how real time applications work ?Have you always been afraid of coding in  JavaScript ??? Well, please read at least  half of my arguments here  , Hello fellow engineers, my name is Alireza and I am a backend developer for almost 7 years now. I know some of you might  have already worked with Laravel as it is one of the most popular php frameworks out there and got to the point that every project seemed boring, repetitive and not challenging  anymore  . That is why I created an interesting, real world project to teach you how to code ( with Laravel and Vue ) efficiently without getting bored of tedious CRUD operations or doing what you have been doing so far !We cover so much and cover them with proper explanation and coding along , just to name a few thing that you learn in this unique course  :Laravel foundationsApi debugging with Laravel Telescope  How Vue 3 works ( including props, data, methods, vuex  and MOST importantly components )How to create Optimised Apis with the help of query monitoring Various Laravel relationships in-code practiceTaking advantage of broadcasting to make everything REAL TIME Making sense out of the Twitter design system ( to our best knowledge )Working with Laravel most famous packages namely : Sanctum, Echo, Websocket, Laravel ui , …AND don't forget, we will create a Twitter-like application which resembles the actual functionalities of the Twitter itself ( before Elon musk tho ?? )And many more ..If you ask me what do you get out of this rather compact course I'd say " How to confidently create realtime applications with laravel and vuejs"I tailored every episode with all-knowledge and 0-trivia meaning we are NOT going to  tell  you  what laravel or vue is or how to install laravel (of course we install it tho ) or what is MVC or such things. We get to the real stuff from the beginning and go with the most natural way of learning which is not being perfect all the time. Meaning you are gonna see me making mistakes on purpose ( mostly  )  just to understand what may go wrong with the application as we implement our features now here are some of to-my-view best features of this course :Effective and efficient; meaning I trust you not needing 1 hour of explanation on each topic so you can code along instead of watching me moving from one powerpoint to another .Each episode with only one issue/feature at hand; Its not gonna be one of those courses with an episode of half an hour long where you wish you haven't started it at the first place ."Cut to the chase" kind of principleImplementing real world features in a kinda real world applicationYou can ask me anything !  I am not gonna be one of those guys who are available for the first or two weeks Up to date contents;  we are doing the course with Laravel 10 and Vue 3 and all of other updated packagesI hope you find this course useful for you career and can make the most out of it .

Overview

Section 1: Basic Configurations

Lecture 1 Demo

Lecture 2 Intro

Lecture 3 Laravel Installation

Lecture 4 Laravel UI

Lecture 5 Basic Migrations

Lecture 6 Register to our application

Lecture 7 Configuring Sanctum for authentication&authorization

Section 2: How Twitter Works

Lecture 8 System Design

Section 3: It all starts with Timeline

Lecture 9 Follower's Functionality

Lecture 10 Let's create a nice timeline

Lecture 11 More on timeline logic

Lecture 12 Making things nice with Tailwind

Lecture 13 Adding frontend layout

Lecture 14 First Component Ever !!! here comes the vue3

Lecture 15 Vuex installation - for our state management

Lecture 16 Infinite scroll implementation

Section 4: "Tweet / Retweet" that please

Lecture 17 Tweet Component

Lecture 18 Saving tweet in our application

Lecture 19 Api debugging with laravel telescope

Lecture 20 Tweet types - tweet & retweet & quote

Lecture 21 Retweet logic

Lecture 22 Make use of dynamic components in Vuejs 3

Lecture 23 Quote component ( DRY principle in place )

Lecture 24 Styling the textarea

Lecture 25 All the tweet actions in ONE place

Section 5: Like

Lecture 26 "Like" model+migration

Lecture 27 "Like" logic with best practice in mind

Lecture 28 Is this tweet been liked before?

Lecture 29 Hit that like button please !

Section 6: More on Retweet !

Lecture 30 Retweet/Quote dropdown component

Lecture 31 Retweet count

Lecture 32 Show me if I retweeted it already

Lecture 33 Implement Retweet logic

Section 7: A Tweet without a media is a bee without honey !

Lecture 34 A nice progress bar for the tweet length

Lecture 35 Media button

Lecture 36 Media type validation

Lecture 37 Some console cleanups !

Lecture 38 Media preview WITHOUT any api calls !

Lecture 39 Remove preview

Lecture 40 Media library package

Lecture 41 Upload media on our backend

Lecture 42 Media collection

Lecture 43 Attaching media to tweet

Lecture 44 Display the image

Lecture 45 Display the video

Lecture 46 Nice progress bar for uploading media

Lecture 47 Reset progress bar

Lecture 48 Performance boost to what we did so far

Section 8: Quotes & Replies

Lecture 49 Create our own modal ( no package involved )

Lecture 50 Introducing Mixins

Lecture 51 Quote API implementation

Lecture 52 Replies backend structure

Lecture 53 Reply modal

Lecture 54 Reply- bind modal to backend

Section 9: Let's make it REAL(time) !

Lecture 55 Let's make it REALTIME

Lecture 56 Tweet realtime

Lecture 57 Like realtime

Lecture 58 Like synchronization

Lecture 59 Retweet realtime

Lecture 60 Reply realtime

Section 10: Notification

Lecture 61 Notification structure

Lecture 62 Tweet liked notification

Lecture 63 Restructure notification

Lecture 64 Notification in frontend

Lecture 65 Reply notification

Lecture 66 Reply notification part 2

Lecture 67 Realtime notification

Section 11: Mentions & Hashtags

Lecture 68 Entity migration

Lecture 69 Save hashtags and mentions

Lecture 70 Entity collections

Lecture 71 Rendering hashtags

Lecture 72 Finally !! EXERCISE

Lecture 73 Notify on mention

Lecture 74 Performance Performance Performance !

Section 12: Conversation

Lecture 75 Getting the tweet itself

Lecture 76 Showing replies

Lecture 77 Conversation component

Lecture 78 Replies and parent tweets

Lecture 79 Make it realtime please

Lecture 80 Show reply to

Section 13: Make it clean, Make it beautiful

Lecture 81 Use phpcs to follow PSR-12 code style

Lecture 82 Source Code

Php and Laravel developers who want to boost their career by doing a real project,Laravel new comers who seek never ending challenges,Vue beginners who really want to use it inside Laravel to taste how good is it in real world