What i wish i knew while building my first chat application

The purpose of this project is to build a chat application where users can easily communicate without sharing their private/exposing their data while also learning how WebRTC works using websockets. I built the project with my friend Fumi while sourcing for web design resources online, I am not so good at making web designs.

My project is created for all persons who are interested in testing out how real time communication works over the web and those who want to chat and keep their personal data private. Unlike whatsapp and telegram, other users do not need your personal contact line before they can chat you up, you can create an invitation link and send it to them to join the personal chat space. Unlike Facebook, it does not suggest your profile to other users of the platform.

My personal focus was to develop an idea, build as it comes.

My Story

Just like every project, this project was ignited by a desire to solve a problem I encountered earlier this year. It may not be as perfect as other chatting applications but it is able to perform basic functions like texting, sending pictures, creating groups, adding and removing members, transfer of admin role, and a lot more, all in real time. Going back to the story, I woke up on a cool Monday morning only to check my WhatsApp and I discovered that I have been banned from WhatsApp. I was a bit confused why, then I remember asking some of my course mates in my group to pay up so we can start the project assigned to us since I was leading the group, i believe that was the reason for the ban.

I was frustrated that morning since there was no other way of getting information and WhatsApp is a basic means of communication for both the students and the lecturers. I thought of another substitute then I came up with building a chatting application. I never regretted this decision because I learnt more while putting up the project together. Any time I get logged out by any social media platform, I can always use mine, thanks to ALX for the opportunity.

What i Accomplished in this Project?

Technologies Used

For the frontend, i used react, i used nodeJS for the backend and mongo db for the database. I choose these because of how user-friendly they are and I love writing JavaScript

Features

1. Two factor authentication using otpauth library.
  1. Emailing service using google OAuth.
  2. I used socket.io to implement real time communication
  3. I used JWT web tokens for authentication.
  4. The application is highly responsive on different screen sizes
  5. You can video call/ audio call.

Problems I encountered and how i overcame them

First, I had to combine it with my academics, while trying to cover my ALX schedules. Technically, I started the project being very optimistic and confident in what I learnt. But while writing the code I encountered many challenges but I will only write on two. Firstly, I had the problem of Circular dependency at the Backend in my express server, i have never heard of that before. What am I going to do now? I cried.

Secondly, In the react project at the Frontend. I also had serious bugs. I didn't know what I could term it, so finding the solution became a bit difficult. I know I am having a problem but I don't know what to search for. That was the first time I felt there should be a device that can read the human mind and proffer solutions.

For the first problem, I researched and was directed to Stackoverflow site where a fellow developer shared a resource. From the resource, I studied Singleton Design Pattern which helped me understand how and also the need to maintain a single instance of the socket.io class. Isolating and abstract classes when necessary.

The second problem actually was tricky. It was already a known issue in react and it is a kind of Stale Closure but a bit deeper. The "UseState hook" is not enabled to accurately update in the callback within socket listening events placed in useEffect hook. So I had to use the useRef hook which persists the state, supporting it with the Usestate hook so that the useRef hook can also be updated accurately. It worked perfectly after.