Whatsapp Clone with NextJS, Firebase and Material UI

Learn how to use firebase v9 function and Next.JS server side rendering

Web Development
Whatsapp Clone with NextJS, Firebase and Material UI
2 hours
Nov 2021
last update
regular price

What you will learn

Nextjs and Firebase integration

Build a real world app

Fuzzy search on data

Server side rendering

Firebase authentication


Create WhatsApp clone with Next.js and Firebase

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.

Why Nextjs?

All of the React components that make up a website's user-facing section are rendered on the server first. This means that after the HTML has been transmitted to the client (the user's browser), the user can read the material on the page without having to do anything further. The user perceives page loading speeds to be substantially faster as a result of this.

SSR also provides an out-of-the-box, indexable and crawlable website, which is critical for Search Engine Optimization (SEO) because no client-side javascript is required to view the page content. Essentially, increased technical SEO benefits our clients.

Why firebase?

Firebase is a mobile platform from Google that allows you to create mobile apps. It is aimed mostly towards business apps, with the goal of assisting businesses in expanding their user bases and increasing earnings through mobile apps. The screenshot below from Google Firebase demonstrates just a few of the functions available in Firebase, all of which are designed to help you develop, grow, and earn money.

We will cover

Using Nextjs layout, add auth provider, sign in and sign out with google account,  render real time messages, server side rendering messages, create scroll to bottom function and fuzzy search on friends and much more...

So I am sure you will learn a lot through this course. You can life time access this course and have 30-day-money back. So nothing to lose.



Add background color
Add Next.js Layout
Create Whatsapp index page
Create header and avatar
Create icons group
Add dropdown menu to sidebar
Add whatsapp searchbar
Add sidebar notification
create chat item at sidebar
whatsapp chatbox
add header to the chatbox
add inputbox for sending messages
render messages
create whatsapp type message bubble
add message tail to the message bubble, add background color in chatbox
create login page
add firebase config file
add auth provider
add loading page
sign in and sign out with google account
store user data to firestore
fetch friends data
create a new chat
fetch chat data
create function to get friend data
switch between showing chats and users
show friend profile picture at chat content page
add send message function
show message and time
Real time rendering messages
server side rendering messages

Related Topics

udemy ID
course created date
course indexed date
course submited by