I built a social network with a single HTML file

I have been developing a modest social network called Relay. It is accessible online at https://relay-4vm.pages.dev. At present, it includes features like feeds for your connections and following, direct messaging with images and GIFs, notifications, editable profiles, a dark mode theme, and password reset functionality via email codes.

The user interface is a single HTML file, now surpassing 13,000 lines of code. The back-end is built with TypeScript, while the front-end is hosted on Cloudflare Pages.

Throughout the process, I encountered several challenges. One-file architecture has its quirks; as it grows beyond 10,000 lines, even minor edits can affect the entire file, causing slower search times and conflicts when making parallel changes. For now, I'm sticking with this approach, but I plan to separate the CSS and JavaScript in the future.

Crafting the small UI details tends to take longer than implementing new features. It took considerable effort to get a message action bar to align correctly beside an image without resizing it when it appears, rather than simply adding the feature itself.

Security measures should ideally be implemented on the server side. The password reset feature utilizes a code check and a single-use reset token on the back-end, with the user interface solely responsible for collecting input. It is highly recommended to test the application on a real phone early on, as factors such as long display names, Arabic text, and the keyboard covering buttons have caused issues that weren't apparent on desktop versions.

Despite these rough edges, I invite users to try out Relay and provide feedback on any bugs or missing features.