CF

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 the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prerequisites are needed before enrolling in the course?
Before enrolling, you should have basic skills in PHP, Laravel, JavaScript, and Vue. You will also need a local development setup and a basic understanding of Test-Driven Development and PHP project deployment steps. While the course is marked as intermediate, these prerequisites will help you follow the material more effectively.
What kind of application will I build during the course?
In this course, you will build a small Facebook-style application. The project involves creating a full-stack application using Laravel for the back-end, Vue for the front-end, and Tailwind CSS for styling. You will implement features such as user profiles, friend requests, and a newsfeed, which will give you a comprehensive understanding of how these tools work together in real-world projects.
Who is the target audience for this course?
This course is aimed at web developers who want to build strong APIs and enhance their modern JavaScript skills. It is also suitable for developers looking to deepen their knowledge of Laravel. Additionally, both front-end developers wanting to learn back-end work and back-end developers interested in front-end work will benefit from this course.
How does the depth of this course compare to other similar courses?
The course provides a hands-on experience with no slide-only lessons. You will work inside real code throughout the course, covering the full workflow with Laravel, Vue, Vue Router, and Tailwind CSS. This practical approach might offer more tangible skills compared to courses that focus more on theoretical knowledge or do not involve building a real project.
What specific tools and platforms will I be using in the course?
You will use several specific tools and platforms, including Laravel for building REST APIs, Vue for creating a single-page application, and Tailwind CSS for styling. Additionally, you will utilize Vue Router for front-end routing and learn about JSON:API. The course also covers setting up and using Vuex to manage application state.
What topics are not covered in this course?
The course does not cover advanced topics beyond basic Test-Driven Development and deployment steps for PHP projects. It also assumes prior knowledge of basic PHP, JavaScript, and Vue principles, so it might not delve deeply into introductory concepts for these languages and frameworks.
What is the expected time commitment for completing the course?
The course consists of 64 lessons. While the total runtime is not specified, you will engage in hands-on coding exercises throughout. The time commitment will depend on your pace, but you should expect to spend a substantial amount of time practicing coding to build the Facebook-style application effectively.