Facebook Messenger Clone

Background

When we hear about facebook, one thing that pops into our mind is communication. With their wide array of communication platforms such as messenger, whatsapp , instagram, facebook app, portal, the company values connecting several users all around the world. However, why is it that facebook apps perform better than other messaging apps. In my opinion, it's the UI of the platform along with the ease of finding your connection over here. In order to see how the messenger app has been designed, I carried out the task of developing a messenger clone app.

Design of App

For this project I planned on using React.JS because of its flexibilty in developing several components of the clone itself. For getting the design of the button right, I utilized Materials UI. Next, in order to allow users to save data I connected the clone to a persistent database service offered by Firebase. Finally, for people around the world to access the clone, I deployed the code to heroku, which allowed me to obtain a public URL for the app.

UI Layout

Lessons learnt

Designing frontend of any commercial service is hard. Not only does a programmer need to handle user request, but also manage connections to the backend logic. Apart from this frontend design also involves learning about the UI/UX design approach that users all around the world are comfortable with. An example of this could be that when a programmer is rendering a webpage on his/her end, then it will load fast owing to the fact the programmer has a decent computer for developing, high network bandwidth and so on. However, people all over the world do not even have proper connection to network. Accounting all of these challenges is a major task that facebook faces on a constant basis. Moreover, currently this project is a simple interface. As number of users rise, the app should be designed in such a way that it can scale well and handle requests with latency in nanoseconds to provide a seamless experience to the end users. This project helped me learn not only new programming concepts but also critical components that go into designing the architecture of a web service.