WhatsApp clone with Next.js and Firebase

In this project, we are going to create WhatsApp clone with Next.js and Firebase.

Interface

This WhatsApp clone looks the same as real WhatsApp.

You can see it will take up whole browser area if the browser is smaller.

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.

Firebase

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.

Next.js and React

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.

So I am sure you will learn a lot when working on this project.