Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
4.6 (183 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,018 students enrolled

Facebook Clone with Laravel, TDD, Vue & Tailwind CSS

Learn to code a social network platform powered by a Laravel API & built using a Vue Single Page Application
4.6 (183 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,018 students enrolled
Created by Victor Gonzalez
Last updated 11/2019
English [Auto-generated]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • RESTful API Development with Laravel
  • Vue JS Single Page Application Methodology
  • Test Driven Development (TDD) with PHPUnit
  • Front-End Design Using Tailwind CSS
  • Build a Complete SPA from Scratch
  • JSON:API Specification for Building APIs in JSON
  • Integrating Laravel with Vue Router
  • Submitting Requests to an API from Javascript
  • Authentication Using Laravel Passport
  • Image Uploads with Dropzone JS
Course content
Expand all 64 lectures 09:08:40
+ Introduction & Downloadable Files
2 lectures 04:45

Let me walk you through the final project that we will be building throughout this course.

Preview 02:30

Here are all of the lesson files that you will need to get this project completed.

Downloadable Content
+ Project Setup
3 lectures 28:49

Having a strong foundation is always important for every project. In this first step, we will install Laravel and pull in the 1st party package Passport to handle API authentication on our application.

Preview 07:49

We will need two layers of routing in our application. The backend routing will simply consist of auth routes and a single app entry point. Then, we'll use Vue-Router to handle the rest of our application routing needs. In this lesson, we install Vue and Vue Router and start scaffolding our application's routing layer.

Preview 15:50

Tailwind CSS is a utility CSS framework. Unlike many of the other pre-built CSS libraries, Tailwind differs in that it gives you the building materials for your application and customizable design guidelines. These design guidelines give your application a polished look without much extra work. Let's bring that in and wire it into our Laravel application.

Preview 05:10
+ Getting Started
6 lectures 51:25

If you’ve ever argued with your team about the way your JSON responses should be formatted, JSON:API can be your anti-bikeshedding tool.

By following shared conventions, you can increase productivity, take advantage of generalized tooling, and focus on what matters: your application.

Preview 02:07

For the first stab at introducing posts to our application, let's work together on a 1st draft test and get it to green. You will be able to follow along as we follow each test error until the test starts to pass. TDD is an integral part of modern application development and will be an integral part of this course.

Preview 09:27

With our test in a green state, let's take it to the next level by introducing the response side of our JSON:API specification. We will be working through all of the test errors until we end up with a passing test. This will represent the basic arrival post state of our application.

Preview 10:41

Let's make use of Laravel's Resources features to refactor our code into a reusable formatter response. At the same time, we will add information about the user that created the post.

Preview 08:36

Let's retrieve some posts, though we don't have any idea of friends in our social network, let's at least retrieve all of the user's posts. This will require us to follow the API convention and reuse our resource but in Collection style. Follow along as we reuse all of our resource code.

Retrieving Posts Using a Post Collection Resource

If you recall, we are simply displaying all posts in the database whenever someone requests all of the posts. Let's write a new test to make sure that the only posts returned, are the ones that belong to the user. Next, let's create a global query scope to make sure that posts always get returned in reverse order as expected by the user.

Returning User's Posts Only & Global Scope for Post Order
+ App Design
6 lectures 48:53

I've included the final design files from all of the following videos. Download the files and put them in the correct places in your app.

SKIP: Watch this to skip "App Design" Section

Let's take some time to get the basic structure of our app in place.

Spiking The App Design

The top navigation section of the new Facebook design, entails 3 distinct groupings with svg icons, search bar and special styling for active links.

Vue Component: Nav

The content section includes a sidebar on the left and a scrollable content area on the right. Let's make sure we get proper scrolling and sidebar.

Vue Component: Sidebar

Let's work on the NewsFeed content area and the component that will be in charge of posting new things to the user's news feed.

Vue Component: NewPost & NewsFeed

Each post will consist of a user, an optional image, a caption and a like/comment button. Let's create that now.

Vue Component: Post
+ Connecting Front & Back
7 lectures 54:09

With our newly designed views, let's start fetching posts from our database. But first, let's make sure that our database has the correct table and posts to show.

Fetching Posts From Database

Let's add a new field to our resource for showing how long it has been since the post was created using Carbon's diffForHumans() helper. Next, let's add a column to our post table to store an image link.

Posted At & Post Image

As we have already learned, Axios performs a request and returns a Promise. A Promise is only resolved once the request has been completed so we need to keep track Promise's state. Let's add a piece of data to our component to keep track of it and then use it to display proper messages to the user.

Keeping Track of Loading State

Introducing the concept of user profiles to our application requires that we have a way of fetching a user's information. Let's add a new route and controller to handle user profiles. As we have done before, let's start with a test.

User Profile Test

With our new route under test, let's start fetching it in the front end and spike a quick design for it.

User Profile Front End

As we always do, let's start with a test. Along the way, we will create the necessary nested route to our api.php file to tackle grabbing a specific user's posts.

User Posts Test

With the ability to fetch a specific user's posts, we can now shift our attention to displaying it properly on the user's profile component. Follow along as we style and design the user's profile.

User Profile Design
+ State Management with Vuex
4 lectures 32:52

Before we can begin this section, we need a way of retrieving the currently authenticated user's information. Let's write a test that drives us to create the necessary end point and logic to return the currently authenticated user.

Auth User Test

Now that we are able to get the user's information, let's use that to finally get the navigation link to route the user to their profile. We will refactor this in the next lesson but for now this simple implementation will do the trick.

Fetching the Auth User

Let's cover the basics for setting up a Vuex store that fetches the user's information on page load. This will allow us to have shared information about the authenticated user throughout our application.

Vuex Store Setup for Auth User

Now that we have Vuex working, let's create a new module to handle page titles and then use Vue Router to dictate when it should swap out our document's title.

Setting Page Titles
+ Let's Be Friends - Part I
7 lectures 01:22:36

In this first test, we will tackle the happy path of creating two users and one of them sending a friend request to another. To do this, we will need to properly set the column names to be able to associate a user to another user within the same table.

Friend Request Test

What happens when a user is not a valid user id? Well, right now, our app crashes! Let's fix that with a proper JSON response to the JSONAPI specification.

Handling Invalid Users

An old saying says that "it takes two to Tango" and that is true whenever a user friend requests another user. We need have the ability for the second user to accept that new friend. In this lesson, we implement the endpoint to accept friend requests.

Accepting a Friend Request

An important thing to consider when writing APIs is to make sure that you think of every possible scenario where a user can make your app act in ways that you didn't intend. We currently have two cases we need to handle, first is the one where a user accepts a friend request that doesn't exist and the second is where a user tries to accept a friend request that doesn't belong to them.

Locking Down the API

Let's tackle validation without breaking the awesome built-in Laravel validation methods. We'll do 3 rounds of refactors until we arrive at the final solution that involves us taking care of validation for the entire application.

Handling Validation Errors

When a user visits another user's profile, we need to attach the friendship status to that user to properly display the friend request button. In this episode, we go through the steps necessary to account for that by using the reusing the resource.

Retrieving Friendships
Ignoring Friend Requests
+ Let's Be Friends - Part II
7 lectures 01:02:23

In a previous episode, we installed Vuex and started using it in the navigation component. In this episode, let's move the user fetching code from the UserShow component, into a new Vuex module in preparation for adding the Add Friend button.

Refactoring to Vuex

The Add Friend button will take several different roles depending on the authenticated user's friendship with the current user. Let's tackle hooking up our button to our Vuex store.

Setting Friend Button Text

Let's refactor our action to set the text on the button to a computed property so we can take advantage of Vue's reactivity, Then we'll clean some small lose ends and get ready to tackle accepting and ignoring friend requests.

Friend Button Text Getter

This is the lesson that we have been working towards for a long time. We finally get to accept or ignore friend requests and go through the whole flow through the browser. Settle in, we have arrived.

Accepting & Ignoring Friend Requests

We have one remaining refactor in the Show component and that is the way that we fetch the user's posts. Let's refactor that code to use Vuex instead. Then, we will take a look at the console errors and get those fixed using the statuses that we have been setting along the way.

Extracting Posts to Vuex & Console Errors

We have two bugs in our application right now. The first is that a user can keep hitting the friend request button and adding records to the database. The second, is that we show the friend requests buttons even on our own profile. Let's fix both of those, in this episode.

Fixing Some Bugs
The Newsfeed
+ Posts, Likes & Comments
10 lectures 01:34:57

We need to move the logic for fetching posts from the newsfeed component to a new Vuex store and then start the process of adding a button to submit a new post to our app.

Refactoring Newsfeed to Vuex

Let's take all of the necessary steps to complete a text post to our app. Then, let's add a nice fade transition to the post button for that extra cool detail and let's also make sure that we don't create a ton of unnecessary updates with Lodash and debouncing.

Submitting Text Posts

Up next in our features, we need to add the functionality to "like" a post. As we've been doing, let's start with a feature test to get the backend properly storing and associating likes to posts and users. This will take the shape of a many-to-many relationship and a couple of resources. Let's dive in.

User Can Like Posts Test

With our functionality to toggle likes in place, let's shift our focus to returning these new likes with each post. The approach here is to not have to fetch the likes separately from our posts but rather, have a unified post and likes resource to achieve this.

Posts Must Return with Likes Test

Now that posts can be liked, let's shift the attention to the front end code. Vue is a data-driven JS framework and this episode fully illustrates that. Being able to change our data and have the views re-render automatically is very powerful. In this lesson, we implement the ability to like a post.

Integrating the Likes Feature

For a first test, let's create the endpoint, controller and model necessary to have the concept of comments in our application. Once we get that to green, an authenticated user will be able to submit their comments for a particular post.

User Can Post Comments Test

Let's secure our endpoint with some validation as well as making sure that all posts now return with comments.

Posts Must Return with Comments

Let's start off easy and display the proper count of comments on each post. Then, let's dial it up and start to iterate through any comments a post may have.

Displaying Comments on a Post

In this lesson, we are hooking up Vuex to our post comment submit sequence.

Submitting Comments to Posts

Refactoring needs to be a normal part of any project. In this lesson, we refactor two of our modules to eliminate any cross and duplication with the newsfeed and profile logic.

Code Design Change & Modules Refactor
+ Handling User Image Uploads
7 lectures 55:07

Our application will have a concept of User Images. This will represent any content that the user uploads. Our implementation will need to keep record of all of the images a user has uploaded into our application but it all start with the basic "a user can upload an image" test.

Images Can Be Uploaded Test

When fetching the user, we should expect to get the profile image resource as well as the cover image resource. Let's cover that with a test in this lesson.

User Are Returned with Images Test

Dropzone is a great library we can pull it to facilitate uploading a single image into our application using the backend code that we already wrote in the previous two episodes. Let's pull that in and get it setup in our UploadableImage component.

Setting Up Dropzone

After an user updates their images, we need a way of updating that on our component. For a first stab at this, let's use a computed property that will check if there's an uploaded image and if there isn't, it defaults to the user image that was passed through to us from the Show.vue component.

Showing Image After Upload

When a user first creates their account, our application has no images for their profile and this can break our UI. Instead, let's use Laravel's model defaults to set a sensible default image that a user can then just update when they are ready.

Default Images

Let's make sure that all of the images are properly displayed and reloaded when they are updated. Then, let's add the finishing touches to our UploadableImage component and make sure that it only displays for the authenticated user.

Finishing Touches On Profile Images

Using the Intervention Image package, we can easily resize the images on upload and make sure that we don't save huge images onto our server. Let's take care of that, in this episode.

Resizing User Images
  • Working Knowledge of PHP, Laravel, JavaScript & Vue
  • Have a Local Development Environment
  • Know The Basics of Test-Driven Development
  • Basic Project Deployment for a Modern PHP Application

Building modern applications requires a specialized toolbox of skills and tools. We are going to be using Facebook as an example to build a social network platform from scratch. We will be using modern development techniques that mimic real-world team flow along with some added tooling to help aid with that.

Why did we choose this as the sample project?

Most students that take this course will know or at least have an understanding of Facebook. Instead of spending time trying to explain what our project needs to do and what the expected functionality needs to be, we can jump straight into writing code. This helps facilitate the comprehension of the new concepts we are introducing.

What if I am not sure that I have the skills necessary?

This course is what would be considered an intermediate level course but with basic knowledge of PHP & Javascript even the most beginner will be able to acquire new skills and level up their skills. Working knowledge of Laravel & Vue will increase your chances of grasping every concept. But all and all, every lesson goes into great detail about the "why" we are doing what we are doing.

Will there be boring slides?

Absolutely not! Every video will be engaging, throughly explained and straight to the point. Showing you every nook and cranny of Test-Driven Development using Laravel, Vue, Vue Router & Tailwind CSS.

Who this course is for:
  • Web developers wanting to build robust APIs
  • Web developers wanting to level up their modern JavaScript knowledge
  • Web developers wanting to level up their knowledge of the Laravel framework
  • Web developers that are front-end developers wanting to learn back-end
  • Web developers that are back-end developers wanting to learn front-end