Genius Chat is a website that I created in grade 8 as a way for my friends and I to communicate with each other after school. It was designed to be a platform that everyone could access -no social media required!
CIRCA 2020...
When I first started working on this project, I had very little experience with web development. I remember starting out with just HTML and CSS, creating the basic layout and style of the site. However, I quickly realized that I needed to learn more in order to add the functionality my friends wanted, like a message submission system and real-time communication.
I quickly turned to the internet for help and started to learn JavaScript. It was a challenging process, but with persistence and determination, I was able to create a functioning chat platform.
After I had the basic functionality of the chat working, I enlisted the help of my friend (and fellow user) @mh-anwar so that we could work together to roll out features faster and more efficiently. I also enlisted my dad's server and database to store our chat messages on the web. This allowed the site to be accessible to users at any time and allowed messages to be saved even after the page was closed.
Three years later, the website has received over 160 commits and broadcasted over 80,000 messages. This doesn't even include the code that I had created before uploading to GitHub! Although you might not call it Discord (we argue that it's better), I can honestly say that this chat platform taught me so much about web development and programming in general, and I know that I 100% want to spend the rest of my life in the amazing industry of CS.
- Secure login system with API key
- Dark mode and accessibility mode for my colourblind friend
- Message replies! (Before Discord)
- Built-in markdown using regular expressions - Hashtags are shown as blue - Links are automatically detected - HTML tag support ("strong","em","mark","ins",etc)
- All inputs cleaned using DOMpurify to prevent cross-site scripting (XXS)
- multi-tab system for quick links
- working mobile integration
- fun quotes generator
- inline emotes and gifs
- chat emptying system for "sus" messages
- "system commands" not associated with any users
- and much more...
We are currently in the midst of planning a completely revamped chat website that follows proper coding conventions and updated libraries from the very start. Check out the repository here!
