BuildShip - Interactive flowchart

Overview

BuildShip is a no-code platform for visually creating and managing backend systems. When I joined, the product was already functional and actively used. As is common with rapidly growing products, the pace of development meant the codebase had grown quickly without a strong architectural foundation, which made it harder to evolve as new features were added.

The Problem

The editor delivered value to users, but its internal structure reflected the speed at which it had been built. Some areas lacked clear separation of concerns, logic was often coupled, and established patterns had not yet emerged. This made the system more challenging to extend and maintain, with even small changes sometimes requiring extra caution to avoid side effects.

What I Built

I proposed migrating the system to React Flow, a purpose-built library for building node-based editors. To make the most of it, I built a layer of abstraction that allowed us to define nodes and edges declaratively—enabling flexibility and consistency throughout the codebase.

Next, I tackled the layout issues by writing a custom node positioning algorithm. This system calculated node placement based on their dimensions and connections, automatically positioning nodes based on their relationships in a clear and structured layout. It resolved occasional overlapping issues that had previously affected the editor and significantly simplified the codebase by removing ad-hoc positioning logic scattered throughout the system.

I also implemented a Model-View-Controller (MVC) architecture around the editor. The model handled graph state, the view rendered with React Flow, and the controller managed user interactions like drag-and-drop. This clean separation made the code easier to understand, extend, and maintain.

Results

The migration resulted in a more stable, maintainable, and extensible editor. Layout issues were fully resolved, and the new architecture replaced scattered logic with a clear, modular structure. The editor became a solid foundation that could support future growth and more advanced features.

Takeaway

This project taught me how to make strategic technical decisions and build foundational systems under pressure. It reinforced the importance of abstraction, separation of concerns, and architectural clarity when scaling real-world applications.