Build a Full Stack WhatsApp Clone (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 in just 90 minutes! 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.

We'll start by setting up our project with Vue JS and Vite, then move on to creating the UI with Tailwind CSS. Next, we'll add Firebase for our backend and Google Auth for user authentication. Finally, we'll finish up by integrating Node JS for server-side functionality and deployment.

This tutorial series is perfect for beginners and experienced developers alike. Whether you're new to web development or a seasoned pro, you'll gain valuable skills and knowledge by building this WhatsApp clone. By the end of the series, you'll be able to create your own clone apps, and you'll be able to use the skills you've learned to build other projects.

Don't miss out on this opportunity to learn the latest web development technologies and build a powerful web application. Make sure to subscribe to our channel for more amazing tutorials and to be notified when the next episode is released.

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

And I'll see you in the video!

Buy me a coffee - https://www.buymeacoffee.com/johnweeksdev

Let's Build Spotify in 90 minutes - https://www.youtube.com/watch?v=ZzuqwqP1wAQ Let's Build Twitter in 90 minutes - https://www.youtube.com/watch?v=RWJF0xSSaps Let's Build Amazon in 2 hours - https://www.youtube.com/watch?v=SAUKvG6ILSs Let's Build YouTube in 90 minutes - https://www.youtube.com/watch?v=o-hIuejQzAA Let's Build Uber in 90 minutes - https://www.youtube.com/watch?v=zXpr8zaK2eA Let's Build Gmail in 2 hours - https://www.youtube.com/watch?v=KE5sQiHRZQg

GitHub Repo: https://github.com/John-Weeks-Dev/whatsapp-clone

00:00 - App demonstration 03:36 - Setup | What you need 11:22 - HomeView styling with Tailwind CSS 15:11 - ChatsView styling with Tailwind CSS 16:18 - MessageRowComponent for ChatsView styling with Tailwind CSS 19:52 - Create the no chat selected section styling with Tailwind CSS 22:16 - MessageView styling with Tailwind CSS 28:39 - Login Page styling with Tailwind CSS 31:08 - Get image assets for the application 33:12 - FindFriendsView styling with Tailwind CSS 35:33 - Google cloud console | Create OAuth token for the login 38:48 - Node JS setup | Create the backend and google login endpoint 42:56 - Pinia | Add login user to Pinia state management 49:03 - Firebase setup (Firestore DB) | Save user on login 54:36 - Get all users from Firebase 59:15 - Remove logged-in user from find friends list 59:55 - Start a new chat and send a message with the selected user 01:09:49 - Get chat by id from Firebase 01:13:15 - Get all chats by user from Firebase 01:21:25 - Display correct user and chat information 01:25:07 - Remove from find friend if chat in progress 01:27:22 - Blue tick icon if chat is viewed 01:31:57 - Scroll to the most recent message 01:33:42 - Complete the logout function 01:34:43 - Clean up application | remove bugs 01:37:11 - Test between 2 different browsers 01:38:44 - Finished! - Well done and thanks for watching!

Vue Vue js Vue 3 Vite Tailwind Tailwind CSS Pinia Pinia State Management Pinia Tutorial Pinia Vue Vue Pinia Node Node JS NodeJS Firebase Firebase Tutorial Google Firebase Firebase Firestore Google Google Auth Google Authenticator Setup Gmail Moment JS MomentJS Moment JS Tutorial Javascript Tutorials Gmail Uber WhatsApp Gmail Clone Uber Clone WhatsApp Clone

#whatsappclone #vuejs #tailwindcss #vite #nodejs #firebase #googleauth #webdevelopment #cloneapps #javascript #css #html #vue #vuejs #vue3 #vite #tailwind #tailwindcss #pinia #googlecloud #googleconsole #nodejs #node #javascript #javascript_tutorial #firebase #firestore #firebasecourse #gmail #gmailaccount #uber #gmail #whatsapp #uberclone #whatsappclone #gmailclone ... https://www.youtube.com/watch?v=E-cg6Bqaxm0