Skip to main content
CourseFlix

Facebook Clone with Laravel, TDD, Vue & Tailwind CSS

9h 9m 44s
English
Paid

You will build a small Facebook-style app from scratch. You will use Laravel, Vue, TDD, and Tailwind to build real features. Each step shows how these tools work together in a real project.

Why This Project

You already know how Facebook works. This saves you time. You can focus on the code, not on figuring out the product. This helps you learn each new idea faster.

Skill Level

You should know basic PHP and JavaScript. This course is marked as intermediate, but you can still follow it as a beginner. You will see clear examples and learn the reason behind each step.

If you know Laravel and Vue, you will pick things up faster. But you can still learn a lot without deep experience.

No Slide-Only Lessons

You will work inside real code the whole time. Each video shows you how to write tests, build features, and style the UI. You will see the full workflow with Laravel, Vue, Vue Router, and Tailwind.

Requirements

  • Basic PHP, Laravel, JavaScript, and Vue skills
  • A local development setup
  • Basic knowledge of Test-Driven Development
  • Basic deployment steps for a PHP project

Who This Course Is For

  • Web developers who want to build strong APIs
  • Developers who want to grow their modern JavaScript skills
  • Developers who want to deepen their Laravel knowledge
  • Front-end developers who want to learn back-end work
  • Back-end developers who want to learn front-end work

What You Will Learn

  • How to build REST APIs with Laravel
  • How to build a Vue single-page app
  • How to write tests with PHPUnit
  • How to style pages with Tailwind CSS
  • How to build a full SPA from start to finish
  • How to use the JSON:API format
  • How to use Laravel with Vue Router
  • How to send API requests from JavaScript
  • How to add auth with Laravel Passport
  • How to upload images with Dropzone

About the Author: udemy

udemy thumbnail

Udemy is a global online marketplace for teaching and learning. It connects students with instructors who share skills in many fields.

Who Uses Udemy

Millions of learners use Udemy to gain skills for work and personal growth. Companies, governments, and nonprofits also use Udemy to train their teams.

What Udemy Offers

Udemy provides a curated set of business and technical courses. These courses help teams build practical skills and support ongoing learning at work.

Watch Online 64 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 64 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course
All Course Lessons (64)
#Lesson TitleDurationAccess
1
Welcome To The Course Demo
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
Unlock unlimited learning

Get instant access to all 63 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription