Let’s build a Whatsapp clone with Next.js and Firebase v9 in 2 hours

ckmobile

Join this channel to get access to perks:
https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww/join

👨‍💻 Source code:
1. Join the Level up member in this channel to access all source code
2. https://ckmobile.gumroad.com/l/whatsapp-clone-with-nextjs-and-firebase
3. https://www.udemy.com/course/whatsapp-clone-with-nextjs-firebase-and-material-ui/?referralCode=297A6BF36B06CA512E91

In this project, we are going to create WhatsApp clone with Next.js and Firebase.
This WhatsApp clone looks the same as real WhatsApp.
The style of the message bubbles are different for user message and his friend message. The user message will be on the right hand side with light green color and his friend’s message will be on the left hand side with white color.
We store the data inside the firebase firestore. We will store the user data, the latest message and timestamp of the chat, and of course all the messages inside the chat.
We also use the firebase authentication so the user can login the app with Google account.
We will also employ Next.js server side rendering so the messages will load up already when the user access this WhatsApp clone. User will not still watching the messages render one by one when enter the chat.
Here we used React.js hook like useEffect, useRef and useState and Context and much more .. to create this WhatsApp clone. We will also add a fuzzy search to search friends.

00:00 introduction
01:34 add background color to whatsapp
04:19 add layout
09:51 create whatsapp index page
13:15 header and avatar
16:30 create icons group
19:58 add dropdown menu to sidebar
24:02 add the whatsapp search bar
28:03 add sidebar notification
33:49 create chat item at sidebar
42:21 whatsapp chatbox
45:20 add header to the chatbox
50:24 add inputbox for sending messages
53:51 render messages
56:45 create whatsapp type message bubble
59:35 add message tail to the message bubble, add background color in chatbox
01:07:57 create login page
01:13:26 add firebase config file
01:15:30 add auth provider
01:18:15 add loading page
01:20:02 sign in and sign out with google account
01:24:46 store user data to firestore
01:27:09 fetch friends data
01:33:27 create a new chat
01:36:55 fetch chat data
01:39:25 create function to get friend data
01:44:43 switch between showing chats and users
01:48:31 show friend profile picture at chat content page
01:53:32 add send message function
01:58:42 show message and time
02:00:49 render real time messages
02:06:06 server side rendering messages
02:08:56 scroll to bottom function
02:11:24 add fuzzy search to the search friends

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Gumroad Web and mobile complete courses
https://app.gumroad.com/ckmobile

Complete CSS course
https://www.udemy.com/course/draft/4112256/?referralCode=D70F3923FF6501A398AA

React native Expo for multiplatform mobile app development
https://www.udemy.com/course/react-native-expo-for-multiplatform-ios-android-mobile-app-development/?referralCode=2FA276AA4E55CE5A2A39

Complete NodeJS course with express, socket io and MongoDB
https://www.udemy.com/course/create-nodejs-app-with-express-socket-io-and-mongodb/?referralCode=4B0B97AD4B1908DD6588
Complete Progress Web App BootCamp
https://www.udemy.com/course/complete-progressive-web-app-bootcamp/?referralCode=E04DAFEDCE920AB6EA55

Complete Modern JavaScript BootCamp from the beginning
https://www.udemy.com/course/complete-modern-javascript-with-firebase-bootcamp-for-beginners/?referralCode=6AF7AA3DB6AD6B880D66

React – The Complete Guide with React Hook Redux 2020 in 4hr
https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536F

Vue JS and Firebase:Build an iOS and Android chat app [2020]
https://www.udemy.com/course/vuejs-and-firebase-build-an-ios-and-android-chat-app/?referralCode=D959334D3BC5DB1FDF53

New SAT Math Course
https://www.udemy.com/course/new-sat-math-complete-course/?referralCode=4E1A982C127EA13EB3D8

New SAT Math Practice Test Explain
https://www.udemy.com/course/new-sat-maths-explain/?referralCode=ABD0C235875F55CB6F5F

Get A* in GCSE Maths (Quadratic equations and graph)
https://www.udemy.com/course/get-a-in-gcse-maths-quadratic-equations-and-graph/?referralCode=2E4D7672FE3571F59DF8

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► https://www.udemy.com/user/cyruschan2/
‣‣ Twitter ► https://twitter.com/ckmobilejavasc1
‣‣ Facebook ► https://www.facebook.com/javascript.ck/
‣‣ Instagram ► https://www.instagram.com/ckmobile8050/

***Equipment that I use***

Macbook Pro

https://amzn.to/2CC41HV

Blue Yeti USB mic

https://amzn.to/3jf3gph

Camtasia

https://amzn.to/30aopbg

#javascript
#webdevelopement next js next js tutorial nextjs next js firebase