Cloning apps are ubiquitous these days so we tried to create our first cloning application what better could it be than the app we use every hour today? We not only cloned the UI of the application but also tried the best of our knowledge to implement some key functionalities even if they might seem using brute force techniques. This collaborative project is entirely open source and available on Github.

Cloning the UI :

The first step to start building is having the proper UI. We developed the UI page by page from phone number authentication, OTP verification, chat screens, status screens, and calling screen. Each and every page came with unique challenges which were far more detailed than our expectations.

Each of these dart files represents different screens which stand as the base of our application. For instance, the splash screen that loads before any other screen helps initialise data that might be required in the later stages of the application. Few screens like a phone number or OTP authentication screens will be visible only once i.e when the user logs into the device for the first time.

To support those screens we built out some common widgets. They construct some crucial parts of the pages which are called more often from time to time dynamically.

These are the 3 different pages for chatting putting up status and calling respectively. Currently, these images do not fetch any data and are completely static. We designed each and every detail from the notification icon to the mute chat button. People can read more on the chatting part UI on my blog Flutter UI: Creating a chatbox

Integrating with backend:

The google flagship offering firebase is the best option for handling databases. This cloud service provides tons of features from phone number authentication to real-time cloud databases. It also supports cross-functional development for building applications for android, iOS or the web.

We used the firebase storage to store all data like images documents profiles pics or status. With the help of this, we overcome the burden of storing anything locally and storage space running out. Hence, we can easily fetch the URL and display them accordingly.

The cloud firestore was used to store the chats, statuses or profile details. For chatting with a person it would create unique chatrooms for the first time. The logic was such that each time it would blend the numbers and create a unique key. Also, we match with the contact data on the device so only a person having that contact number in his contacts is able to chat.

Future of Work:

Integrating voice calling and video calling features would definitely add up to the quality of the application. Message forwarding and sending voice notes are some key features that we skipped. Also currently we can set status or view others but can see status stats like which contact saw the status page at what time.