A Live Chat app created with MERN

A live chat app built using MERN stack and socket.io for live chat functionaity. Kep the UI simple to focus on learning socket.io to add live event based functionality to the app.

---

Motivation

I wanted to learn about how real-time popular chat applications work, especially the real time messaging part. So in my research I stumbled upon socket.io which is popular library for creating event driven ,real time web apps. I read the documentation and it was surprisingly easy to develoip a messaging logic due to its event-driven nature.

Tech Stack

• Socket.io
  Socket.IO is an event-driven library for real-time web applications. It enables real-time, bi-directional communication between web clients and servers. It consists of two components: a client, and a server. Both components have a nearly identical API.
• Reactjs
  React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript.
• Typescript
  Typescript is a superset of javascript which adds features like static typing and helps write type safe code.
• TailwindCSS
  Great framework for writing custom css fast.
• MongoDB
  MongoDB is a source-available, cross-platform, document-oriented NOSQL database program.
• ExpressJS
  Express.js, or simply Express, is a back end web application framework for building RESTful APIs with Node.js
  

Problems faced & how I solved them

• Deciding the tech stack
  Using socket.io was a no brainer since it is the most popular library for creating real time applications. It is based on web sockets.
  

• Real time UI logic
  Since the functionaity is realtime and event based , I had to carefully map out all the user events and write code for updating UI accordingly. I also had to make sure that I was trasmitting certain events to the appropriate stakeholder. For example, when a user comes online , the event should be transmitted to all its friends list, but when a user messages a certain other user, the message event must be transmitted to the receipient user only.

Final thoughts

Learning and integrating all these different technologies was quite challenging but very rewarding. I learned a lot about event based and realtime web app architecture.