the globe
Building a unique global asynchronous chat application from scratch - a journey through development, experimentation, and community.
The Beginning: Discord Integration
I started this project as a kind of external connection for a Discord server channel. You’d connect to a webpage, send messages, and they’d arrive on Discord, and vice versa—all with support for avatars, names, etc.
Then I thought, hmm, I’m going to tune this up and turn it into a global asynchronous chat app, and well…
There it was going! I wanted this to be unique—not your typical corporate messaging app that everyone makes. No, I started developing this from scratch, in Node.js, without templates, without ANYTHING. So I began. There were going to be registration options, login, profile editing, custom colored messages, etc.
Early Struggles and Bugs
At first, everything was very buggy. I had never done anything like this before, so I didn’t know how to start properly, but it worked (more or less).
I had to implement many design policies and message handling to make everything look good. Here I moved the buttons around and made everything a bit cleaner, but I still needed to limit the size of message bubbles.
Profile Editing Implementation
Here I already implemented profile editing—very simple but straight to the point.
Testing the Core Features
Here I was already testing this seriously. The basics already worked—colors, profile pictures, names, etc. It was taking shape…
But when reloading, everything would break. Eventually, I fixed it.
Message Management Features
Now you can delete messages, wow.
UI Tweaks and Typing Indicators
More tweaks to the interface—I added an indicator when someone is typing.
First Online Test
FIRST ONLINE TEST! I invited a few acquaintances to test the page. It seems to work perfectly!
Message Replies and Threads
I introduced message replies, also allowing threads.
Authentication System
First looks at the login and registration windows.
Robust Message Deletion
I made message deletion more robust to accommodate the new reply system.
Notification System
Notification system!
Emoji Implementation
Emojis! Taking into account old Facebook emojis because they’re cool (please don’t sue me).
Legal Notice
I implemented a rather invasive legal notice because I was afraid something might happen now that this was running publicly (even for testing, you have to protect yourself).
Reaction System Experiment
Reactions—I thought about this for a long time and added it, but it was too unsustainable to barely implement it, so I removed it instead. But it worked! Maybe I’ll implement it in the future…
User Profiles
Profiles! Very basic and buggy, but profiles were implemented, banners and all!
End-to-End Encryption Experiment
An experiment I did to implement private messages with end-to-end encryption—quite difficult to implement. It worked, but I discarded it. My philosophy with this project is that it should be totally public.
Profile Views
Preliminary views of the profiles—they already look good! I added more fields to better customize everything.
Clans System
Clans—I implemented clans to bring the community together a bit more in groups. I plan to add a chat for clans later, but PUBLIC.
Obviously, I also have to modify the profile view to show the clan. This is a very basic and ugly preliminary version.
Here I already tuned it much more—it looks cleaner and simpler. I thought about removing the clan tag, but no…
Image Cropper
I implemented a cropper for photos and banners to customize everything even more!
Themes System
Themes! Although I didn’t like that modal and finally changed it to this:
Legal Pages
Now yes, I put together some terms and conditions and privacy view to put the cards on the table at the globe. Pretty ugly, but I modified them later to look better haha.
Production Release
Release version MILESTONE 2.4.0 (I think? XD I don’t remember anymore). First production release!
More Clans
More clans arrive, and I improved their views :D
Welcome Page
A proper welcome page—quite quirky, fun, and vintage! I love it lol.
The profiles are almost finished!
Temporary Images Experiment
An experiment with temporary images that the public will never see because it was too buggy, and I think it breaks the philosophy of the globe a bit.
Welcome Screen Tweaks
Tweaks to the welcome screen!
Members View
Members view to see all registered users—very basic, horrible…
Badges System
More badges! I added a tester badge for 2 very special people in this project: NCubs and Topaz. Thanks!!
Admin Page
Admin page to check project performance (this was before a certain catastrophe happened, which I’ll talk about later).
Bots Are Coming
The bots are coming…
The Apocalypse: When Everything Broke
While I was trying to create a script to automatically indent the code without my intervention (OCD, you know)… well, I completely screwed up the entire page. All the files got corrupted. It was imperceptible visually, but there were many invisible characters interfering with every part of the site, even with the ASCII art in the terminal! Everything was lost. The backup I had was very old, and I couldn’t redo all the progress I had made… So I got to work, and during a session of almost more than 8 hours, I recovered the entire project to 98% functionality, and it seems like nothing ever happened. But it did happen… it did happen, and it was very serious.
Rising from the Ashes
But well, after having recovered EVERYTHING, I made the page even more robust and pleasant to the eye, and for me in the backend. I improved the header links to be little buttons instead of plain text.
This was after the apocalypse—even the code efficiency improved haha.
Dark Mode Implementation
Dark mode! I needed it, my eyes were screaming for it. Coding this late into the night is very visually exhausting…
Live and Running
And… finally, it’s running! Without errors, 24/7!
Final Thoughts
This project is here for the long haul. It’s quite robust already. I never thought I could pull off a project of this caliber. I’m quite proud of all of this and of the people who have supported me.
Long live the globe! 🌍
Thank you for following this journey. The globe continues to evolve, and this is just the beginning.