Modular Markdown Editor

One of the biggest challenges was designing a complex frontend application without letting it devolve into tangled dependencies or hidden side effects. Vanilla JavaScript projects can quickly become difficult to maintain as they scale, so the challenge was to build a feature-rich editor that is both modular and robust, all while keeping components fully decoupled and testable.

I approached this project by first planning the architecture around a Composition Root that handles all wiring of dependencies, ensuring that individual components never import anything directly. Each view and controller was designed to receive dependencies via constructor injection, keeping them independent and easily testable. The global store was implemented as an immutable object, which allowed predictable state updates and simplified debugging. Views manage the DOM and user events independently, interacting with controllers without introducing tight coupling. Iterating on functionality was straightforward because each piece could be tested in isolation, allowing for clean and maintainable growth of the application.

I intentionally chose vanilla JavaScript to maintain full control over the architecture and minimize dependencies. Dependency injection was used to keep components decoupled and swappable, while the Composition Root centralized all wiring to prevent hidden coupling. Immutable state management ensured that updates were predictable and side effects were avoided. Finally, a clear folder structure separated responsibilities between the composition root, controllers, views, core state, and utilities, making the project easy to navigate and extend.