Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.

TK Dodo is a platform dedicated to sharing insights and resources on software development, technology trends, and career growth. Through articles, interviews, and community engagement, TK Dodo empowers developers to navigate their career paths, stay updated with industry advancements, and cultivate  skills for personal and professional development.

TkDodo

Horizontal codebase structures that group code by type (components, hooks, utils, types) create poor cohesion and make large codebases hard to navigate. The alternative is a vertical structure that groups code by domain or feature — everything related to 'widgets' lives in src/widgets/, regardless of whether it's a component, hook, or utility. This mirrors how product teams are organized and reduces cognitive load. Shared code that spans multiple features becomes its own vertical. To enforce boundaries between verticals, tools like pnpm workspaces, Nx dependency rules, or eslint-plugin-boundaries can define public interfaces and prevent unintended coupling. The tradeoffs include difficulty choosing the right vertical and risk of duplicated implementations across teams.

The Vertical Codebase