Overview

For my WEB 238 final, we were tasked with utilizing Google’s Firebase to build an in-browser app. I decided to build an asynchronous chat system with multiple features you may find in other messenging apps, along with an interface. The current version is exactly the same as the one submitted for the final assignment, only the database has been set to read-only for security purposes.Check out the codepen here!

Features

• Login and account creation system along with user authentication
• Notification system which displays messages that can be dismissed by simply clicking them
• Message and polling system which checks periodically for new messages, and displays new ones without reloading old messages
• Intuitive UI to show whether a user sent a message or not, like many other messaging apps

Conclusion

Building this system made me understand why encryption is so important. Any message entered into the database can be read directly, hence one of the reasons for setting it to read-only. An end-to-end encrypted messenger might be an interesting future project.

Below is a screenshot of what the same chat room looks like from different client’s view. You may log into any of them with the default password.