Modular Markdown Editor

Project Overview

This project began as a personal challenge to push the boundaries of vanilla JavaScript while maintaining a clean, modular architecture. The goal was to build a Markdown editor that remains easy to reason about as it grows, combining dependency injection, a dedicated Composition Root, and immutable state to keep the codebase predictable, decoupled, and fully testable.

Challenges

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.

Process

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.

Tech Decisions

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.

Key Takeaways

This project reinforced that it’s possible to build scalable, maintainable frontend applications without frameworks, provided the architecture is carefully considered. Implementing dependency injection and a Composition Root drastically reduced coupling and improved testability, while immutable state simplified debugging and ensured predictable behavior. The project demonstrates my ability to design robust frontend systems, make thoughtful technical decisions, and deliver a maintainable, production-ready application from start to finish.

Quick Details

• Year 2025
• Industry --
• Role Frontend Engineer
• Category Web Design & Development
• Platform Web
• Duration 1 Week

Technologies Used