BuyBus Architecture

created: 2023.09.29. 08:08 · modified: 2023.10.05. 09:45 ·  · license

This post was automatically translated and has not yet been reviewed by me. Please read with discretion.

People sometimes ask me about the tech stack behind BuyBus, so I thought I’d put it all together. This will probably be obvious to experienced developers, but I’ve tried my best to include everything. I hope it’ll be useful to anyone who’s vaguely imagined building something similar but hasn’t known where to start.

There are three diagrams in total. The one at the top is an overview covering my development environment, the server, users’ devices, and third parties like AWS, Google, and PayPal. The two below it zoom in on the server and client parts of that overview, respectively.

All three are vector graphics, no less! I generated the detailed server and client architecture diagrams automatically with an npm package called dependency-cruise, and made the overview myself in Figma. Figma’s auto layout let me draw the nested elements neatly, but I wasn’t sure what to do about the arrows: vanilla Figma doesn’t automatically update an arrow’s endpoints when the elements it connects move. Then I installed a plugin called Arrow Auto, and it worked like a charm. Figma rules.

The automatically generated server and client architecture diagrams look a bit intimidating, but they’re not as hard to make as they look. You make server requests and client pages for the features you need, split things into separate components when they need to be reused, search Google for a library when you suspect one already does what you need, and so on. Before you know it, you end up with this. The arrows overlap so much that it’s hard to follow any one of them, so I’d suggest just looking at what components there are and which external libraries I used (the red boxes).