Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
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.
More
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.
- 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
- 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
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
Watch Online Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
| # | Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 02:31 |
| 2 | Downloadable Content | 02:16 |
| 3 | Install Laravel & Setup Passport | 07:50 |
| 4 | Front-End Routing & Vue | 15:51 |
| 5 | Tailwind CSS | 05:11 |
| 6 | What is JSON:API? | 02:08 |
| 7 | Spiking Out the First Post Test | 09:28 |
| 8 | Asserting on the Response | 10:42 |
| 9 | Refactor to Post & User Resources | 08:37 |
| 10 | Retrieving Posts Using a Post Collection Resource | 12:28 |
| 11 | Returning User's Posts Only & Global Scope for Post Order | 08:08 |
| 12 | SKIP: Watch this to skip "App Design" Section | 01:17 |
| 13 | Spiking The App Design | 05:13 |
| 14 | Vue Component: Nav | 15:23 |
| 15 | Vue Component: Sidebar | 06:34 |
| 16 | Vue Component: NewPost & NewsFeed | 07:51 |
| 17 | Vue Component: Post | 12:41 |
| 18 | Fetching Posts From Database | 10:09 |
| 19 | Posted At & Post Image | 07:16 |
| 20 | Keeping Track of Loading State | 05:57 |
| 21 | User Profile Test | 07:26 |
| 22 | User Profile Front End | 08:02 |
| 23 | User Posts Test | 06:28 |
| 24 | User Profile Design | 08:58 |
| 25 | Auth User Test | 06:37 |
| 26 | Fetching the Auth User | 04:39 |
| 27 | Vuex Store Setup for Auth User | 12:15 |
| 28 | Setting Page Titles | 09:25 |
| 29 | Friend Request Test | 14:54 |
| 30 | Handling Invalid Users | 06:39 |
| 31 | Accepting a Friend Request | 17:59 |
| 32 | Locking Down the API | 07:35 |
| 33 | Handling Validation Errors | 15:39 |
| 34 | Retrieving Friendships | 11:20 |
| 35 | Ignoring Friend Requests | 08:37 |
| 36 | Refactoring to Vuex | 11:47 |
| 37 | Setting Friend Button Text | 10:07 |
| 38 | Friend Button Text Getter | 06:40 |
| 39 | Accepting & Ignoring Friend Requests | 10:52 |
| 40 | Extracting Posts to Vuex & Console Errors | 07:30 |
| 41 | Fixing Some Bugs | 07:08 |
| 42 | The Newsfeed | 08:26 |
| 43 | Refactoring Newsfeed to Vuex | 07:42 |
| 44 | Submitting Text Posts | 12:47 |
| 45 | User Can Like Posts Test | 12:45 |
| 46 | Posts Must Return with Likes Test | 06:55 |
| 47 | Integrating the Likes Feature | 11:47 |
| 48 | User Can Post Comments Test | 15:11 |
| 49 | Posts Must Return with Comments | 05:33 |
| 50 | Displaying Comments on a Post | 10:52 |
| 51 | Submitting Comments to Posts | 03:19 |
| 52 | Code Design Change & Modules Refactor | 08:16 |
| 53 | Images Can Be Uploaded Test | 15:55 |
| 54 | User Are Returned with Images Test | 07:15 |
| 55 | Setting Up Dropzone | 09:15 |
| 56 | Showing Image After Upload | 06:00 |
| 57 | Default Images | 03:05 |
| 58 | Finishing Touches On Profile Images | 09:02 |
| 59 | Resizing User Images | 04:42 |
| 60 | New Posts with Images Test | 10:07 |
| 61 | Submitting Images with Posts | 09:12 |
| 62 | Customizing Dropzone & Bug Fixes | 08:49 |
| 63 | Max File Count for Dropzone | 01:59 |
| 64 | Bonus Lecture | 02:42 |
Similar courses to Facebook Clone with Laravel, TDD, Vue & Tailwind CSS
Let's Build a Go version of Laravel
Vue 3 Composition API 3
Build a Server Rendered Vue.js App with Nuxt and Vuex
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)
