The Challenge of building a video application using in ReactJs using Socket.io and PeerJs

Earlier this year while looking out for ways to improve my skills and increase my knowledge of backend web development, I read through different resources including documentations on the use of socket.io for Web Real time communication (WebRTC). I felt good learning it and i decided to take a bold step to build an application which has WebRTC capabilities. At first, i was confused on what to build after much contemplation i decided to work on a Chat Application which has the texting functionalities as WhatsApp.

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, 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 human mind and proffer solution.

How did i overcome the problem?

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 help 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 an already a known issue in react and it is a kind of Stale Closure but a bit deeper. The "Usestate hook" is not enable to accurately update in the callback within socket listening events placed in useEffect hook. So i had to use useRef hook which persists the state, supporting it with Usestate hook so that the useRef hook can also be updated accurately. It worked perfect after.

Guess What!

I have joined HNG Internship. It is a dream come true for me. They do HARD THINGS and that's exactly what i love doing. I am Kingsley, i go by the nickname "devmonk" which i believe combines development and monk signifying discipline, dedicated and hardworking. I want to do BACKEND WEB DEVELOPMENT in the HNG internship because that's where my passion lies. And i have plans of subscribing to HNG Premium in the near future.

HNG Premium Network is our Community where techies network, get job postings, and engage weekly in various fun events (for example mock interviews, coding quizzes, webinars and free talk with other techies). HNG Premium costs N5000 ($5) for one full year of access.

When you register for HNG Internship, you can choose the option "With Premium". When you do that, you are added to the Premium Workspace with all the perks, and you also are guaranteed to reach Stage 5 in the HNG Internship, and to receive a Certificate for reaching that stage. You can also choose to do HNG Internship without any payment at all.