Full Stack Facebook Clone with Vue JS, Laravel, Inertia JS, Tailwind CSS, Pinia

In this tutorial, let's take on the challenge of building a Facebook clone in just 2 hours! We'll be using the latest technologies such as Vue JS, Laravel, Inertia JS, Tailwind CSS, Pinia, and advanced image manipulation tools like Intervention Image and the npm package Vue Advanced Cropper.

We'll also dive into the world of eloquent relationships in Laravel, specifically the one-to-many relationship, to bring our Facebook clone to life.

LIKE!!! SUBSCRIBE!!! SMASH THE NOTIFICATION BELL!!!

And I'll see you in the video!

For freelance or contract work inquiries, kindly connect with me via Twitter / X:
Thank you.

00:00 - Facebook clone Project setup
06:29 - Main Nav Layout Section | Vue JS | Tailwind CSS
19:17 - Posts Page | Vue JS | Tailwind CSS
21:33 - Posts Page | Left Menu Section | Vue JS | Tailwind CSS
24:06 - Posts Page | Right Menu Section | Vue JS | Tailwind CSS
26:55 - Posts Page | Posts Section and Components | Vue JS | Tailwind CSS
39:44 - User Page | Vue JS | Tailwind CSS
51:56 - Get assets from GitHub
53:06 - Login and Register Pages | Vue JS | Tailwind CSS
58:58 - Image Cropper Modal | Vue JS | Tailwind CSS
1:08:48 - Image Display Component | Vue JS | Tailwind CSS
1:12:26 - Create Post Component | Vue JS | Tailwind CSS
1:23:25 - Laravel Models, Migrations, Controllers, and Routes setup
1:25:00 - Update Posts migration | Laravel
1:25:30 - Posts One to Many Relations | Laravel
1:26:25 - Comments Model, Migration, and Controller
1:26:47 - Update Comments migration | Laravel
1:27:21 - Comments One to Many Relations | Laravel
1:28:18 - Create User Controller | Laravel
1:28:56 - User One to Many Relations | Laravel
1:30:15 - Migrate to the DataBase | SQL | Laravel | Eloquent
1:31:31 - Laravel Router | Endpoints
1:32:53 - Updating Login and Register Redirect | Laravel
1:34:52 - Laravel Router | Endpoints
1:35:47 - PostController Methods | Laravel
1:36:30 - Laravel Collection Resource
1:40:45 - Image Service with Intervention Image | Laravel
1:45:15 - PostController Methods | Laravel
1:35:47 - CommentController Methods | Laravel
1:46:49 - UserController Methods | Laravel
1:49:27 - Connect the frontend to the backend | Laravel | Vue JS
2:08:52 - Final check of our application and FINISHED!!!

#facebookclone
#vuejs
#laravel

[j.m.]

Are you real? Insane! That's the best I've ever seen. Congrat, guy!!

[FelipeSantos-cehd]

Man, this is Just incredible. Thanks a lot. Continue your great work. Following you from Brazil.

[russelleonardlascano]

Nice job man!!! You deserve it! ❤ Keep rockin man 🔥🔥🔥

[pwrdaniel]

was watching this for fun but then i got an inspiration to implement something similar from here in my own project thanks man.

[evansaddo]

you are good and funny at the same time. you are simply awesome

[alnahian]

This is sick, man! I gotta try this right now

[eyuelnigussie]

back at it again John🔥🔥....If I can make a request, We would love it if you show us hosting one of your projects on netlify🤟🤟

[muhammadusmanali]

Amazing Man. You really deserve more subs😇

[maruatajongte]

you are awesome dude... thank you for all these videos

[justasarbatauskis]

thank you very much please make more videos about next/laravel

[FailedArchaeologist]

Super supply of material. Greetings from Ukraine)

[bowaller]

Yo Love your videos. Nice video and music by the way,

[snoudev]

Always a lovely work. You Really deserve more subs

[williamrobersone]

@johnweeksdev This is a really cool video. I have a question, would I be able to use Pinia as a backend on Windows since I'm not able to download Sequel Pro? By default, my backend db is MySql and I'm not sure how to access the data.

[mrjonny]

Great tutorial! Btw, which one you recommend for SSR, Quasar or Inertia ?

[raitasorin]

Do you know on how to make Video Live in Facebook ?

[videostar]

Really helpful tutorial. Thank you so much. Just a feedback - you are really spelling out class names (html markup/tailwind) all the time but not explaining much on what the codes (vuejs) are doing. It might be better if you can explain more of what code is doing rather than markup dictation.

[Oday]

Vue JS, Laravel, Gym Management System PLS 🙃

[benisaac]

the file i downloaded from git did not work

[phpisdead]

man remove fk rock from background please