Скачать или смотреть Let’s build a Whatsapp clone with Next.js and Firebase v9 in 2 hours

Join this channel to get access to perks:
   / @ckmobile  

👨‍💻 Source code:
1. Join the Level up member in this channel to access all source code
2. https://ckmobile.gumroad.com/l/whatsa...
3. https://www.udemy.com/course/whatsapp...


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/41...

React native Expo for multiplatform mobile app development
https://www.udemy.com/course/react-na...

Complete NodeJS course with express, socket io and MongoDB
https://www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
https://www.udemy.com/course/complete...

Complete Modern JavaScript BootCamp from the beginning
https://www.udemy.com/course/complete...

React - The Complete Guide with React Hook Redux 2020 in 4hr
https://www.udemy.com/course/complete...

Vue JS and Firebase:Build an iOS and Android chat app [2020]
https://www.udemy.com/course/vuejs-an...

New SAT Math Course
https://www.udemy.com/course/new-sat-...

New SAT Math Practice Test Explain
https://www.udemy.com/course/new-sat-...

Get A* in GCSE Maths (Quadratic equations and graph)
https://www.udemy.com/course/get-a-in...




▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💟Follow me
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
‣‣ Udemy ► https://www.udemy.com/user/cyruschan2/
‣‣ Twitter ►   / ckmobilejavasc1  
‣‣ Facebook ►   / javascript.ck  
‣‣ Instagram ►   / 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