Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
- 9 hours on-demand video
- 4 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.Try Udemy for Business
- 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
- Authentication Using Laravel Passport
- Image Uploads with Dropzone JS
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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?
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.
- Web developers wanting to build robust APIs
- 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