Synopsis

Whats Popping is a chat app built to familiarize myself with Socket.io. This app allows for users to register for an account with a username and password, and send messages to other registered users.

Implementation

Front End
The front end is mocked up in React using the Material-UI framework. This framework is well supported and relatively easy to use and customize, which leads to it being my #1 React CSS framework/component library. The React Context API is responsible for the global state management of the app. The decision to implement the Context API over a library like Redux was done to keep the app as native as possible, thus keeping the bundle size low. As the application doesn't have many routes or other places where global state is needed, the Context API was a lightweight, intuitive and performant solve.

Back End

The back end is a Node application that uses the Express js framework to speed up development and make it a bit more developer friendly. Messages are posted to a custom REST API that stores and retrieves information in a Firebase Cloud Firestore Database. The speed and ease of queries ensure the application is performant (the free storage plan doesn't hurt either) and easy to use. The Express application opens up a web socket using Socket.io that allows for all users of the app to connect and text each other in real time without polling an endpoint endlessly or refreshing the page. Allowing for each user to receive messages in real time was the end goal of this application and that was indeed accomplished with my usage of Socket.io.