Full Stack WhatsApp Clone with Vue JS, Vite, Tailwind CSS, Node JS, Firebase, Google Auth

Yo!!! Join me in this tutorial series where we'll Build a Full Stack WhatsApp Clone using Vue JS, Vite, Tailwind CSS, Node JS, Firebase, and Google Auth, we'll be creating a powerful web application that looks and functions just like the real WhatsApp.

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 - WhatsApp Clone project setup
07:43 - HomeView styling with Tailwind CSS
11:35 - ChatsView styling with Tailwind CSS
13:42 - MessageRowComponent for ChatsView styling with Tailwind CSS
16:16 - Create the no chat selected section styling with Tailwind CSS
19:40 - MessageView styling with Tailwind CSS
25:03 - Login Page styling with Tailwind CSS
27:32 - Get image assets for the application
29:36 - FindFriendsView styling with Tailwind CSS
31:53 - Google cloud console | Create OAuth token for the login
34:40 - Node JS setup | Create the backend and google login endpoint
38:46 - Pinia | Add login user to Pinia state management
44:53 - Firebase setup (Firestore DB) | Save user on login
50:46 - Get all users from Firebase
54:46 - Remove logged-in user from find friends list
55:33 - All chat functions
1:32:38 - Testing Application Finished!!!

#whatsappclone
#vuejs
#firebase

[russelleonardlascano]

Your channel is one of the best vue js tutorial!!! Keep it up man!!

[snoudev]

Love this one John, especially the music 💪💪💪

[SentryConstructAverado]

Ah so you gone missing for few days to, surprise us with this huh.. Great!

[rsufiyand]

Would like to see more clones like Twitter, Reddit, Discord, Airbnb with all the functionalities.

[mrrolandlawrence]

Wow just what I was looking for today :) Up to date Vue stuff seems to be missing on youtube. I have swapped from Vuetify to Element Plus as I just couldn't hold out longer for the new version. New subscriber here. Loving the selection of up to date videos here. Have also been using Tony Fu's vueUse project as well as the unplugin & auto import for vite. Looking at supaBase too as postgres based.

[Dermoiin]

in 49:36 already made the database, and press the login button, it wont add data on the database, is there something i miss, or something that i need to add. As far as i know everything, every line of code is just the same

[TuNguyen-nqdf]

This is the best stack a newbie can follow, I really appreciate it, thank you Mr.Weeks

[devcline]

Make a Telegram clone! Thanks, you are amazing!

[SHOURYASINHA-dw]

hello sir when we run this project then it show error that is serve is missing script
npm run serve . how to resolve it

[FailedArchaeologist]

super. Is this possible to do on Laravel?

[danielali]

Just finished building it. Awesome tutorial! I'm trying to deploy it with firebase and when it loads, I click sign in with google and it loads that window and it's just a white screen of death. What do you think?

[questo]

Hey pls tell me how can I contact you i have so many doubts

[questo]

Do you have Instagram or like telegram any thing by which I can contact you