You can find the Vent It! web app here

Firebase servers may take a bit of time to initially retrieve data if you’re the first user to use the app in an hour or so. Just wait a couple of seconds for the messages to load in if they don’t immediately

Have you ever wanted to scream, yell and shout just to get it all out? Because I know I have after 2 terms (soon 3) of online school. However, in all seriousness because of quarantining, I know many people currently feel isolated and just want someone to vent to so that they can get the stress, anxiety, or whatever out of their system. Even beyond quarantining, this is a common problem (especially for us introverts), as either there is no one around that can just listen, or you’re just to nervous too ask in the first place. As such, I decided I wanted to create a sort of anonymous chat room that could serve as this outlet for all the people in the world who just need to Vent it!

The App

The final product I ended up with was a full-stack real-time anonymous chatroom that anyone could participate in. There’s not much to say about the functionality of the web app, as it is quite simple in its purpose. Below you can see some screenshots from the running of the web app. The below convo is 100% staged as this was before I released the finished version of the App, but I hope you can appreciate it.

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀Figure 1: Some “random” people messaging on the chat!

The app is live right now so I hope you all could drop by the chat and say hi! The code for this project is available on this Github repo.

Technologies Used

The main reason I decided to make this app (besides the previously listed reason), was that I really wanted to try to integrate WebSockets into a web app. WebSockets intrigued me initially as they are different than standard HTTP requests, since rather than terminating the server-client connection after the initial request is fulfilled, it sustains the connection allowing for a continuous flow of information between the client and the server (full-duplex connection). I think the reason why I gravitated towards this technology is because of how powerful it is, as everything from online gaming to securities trading (or anything that is updated real-time) is powered by WebSockets, so learning to use them would greatly benefit my developer toolkit.

Moreover, such a technology is practically meant for building a chat room, as it is incredibly inefficient and slow to perform a GET request repeatedly to see if the database has been updated with a new message. In order to employ the usage of WebSockets, I used Socket.io as it allowed me to streamline the process of enabling my web server to handle WebSocket requests. The web server itself was built using Express, with the front end using Axios to PUT or GET data from the server. This server was as you might expect, a Node.js server, a technology I am more or less new to, but one that I definitely want to pick up in the future, as from this project it became very obvious how powerful of a tool it was. Also, if you were interested in it, I ended up using Heroku to host my server.

I wanted my chat’s history to persist even if no user was currently on the chatroom, and as such, I would need a Database for storing the chat history. Since I already had a decent amount of experience with SQL databases, I decided I would try out a non-relational database that I had been learning which was MongoDB. I used Mongoose to interface with the DB which proved to be very effective and straightforward. The final DB ended up being hosted on an AWS cluster that is handled by MongoDB Atlas.

Despite the web app being rather simplistic in its purpose, the architecture of it is probably one of the most complex things I have built in regards to web development, since this was my first full-stack app. I only mention this as I had to juggle 3 independently hosted components, which all rely upon one and another. Moreover, the process of integrating them all into one cohesive app proved to be a challenging yet beneficial experience.

Next Steps and Improvements

In regards to improvements to the current product, I only have one which is to make the app look better. I’m not a CSS guy and I barely know enough CSS to adapt what I find online to fit my project, as such the current look and aesthetic of the project leaves a lot to be desired. As you could imagine the simplistic yet gorgeous message bubble was not created by me, but by the very talented Mark Swardstrom, whose code for the message bubbles can be found here.

As for the next steps for this project, I have ALOT of features I want to add to this site, which I will be doing over the next couple of months (as school still exists sadly). The first of which is making a distinction between messages you have sent on your current session, and those sent by others so that the layout looks a bit neater. I also want to add a front-end login page so that users can create an identity to preserve the continuity of their chatting identity. In addition to that, I wanted to add timestamps to the messages, and also add integration of Pictures, GIFs, and other media to make it a lot like a more modern chat room. I have a lot planned for this app, so keep an eye out for updates!