<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Vladislav Bogatyrev</title>
    <description>The latest articles on DEV Community by Vladislav Bogatyrev (@thevladbog).</description>
    <link>https://dev.to/thevladbog</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3954502%2F32ca1194-a89a-4325-bb13-60d6482a00f6.png</url>
      <title>DEV Community: Vladislav Bogatyrev</title>
      <link>https://dev.to/thevladbog</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/thevladbog"/>
    <language>en</language>
    <item>
      <title>Why We Chose Nx to Untangle a Growing Multi-Tenant Platform</title>
      <dc:creator>Vladislav Bogatyrev</dc:creator>
      <pubDate>Wed, 27 May 2026 14:50:26 +0000</pubDate>
      <link>https://dev.to/thevladbog/why-we-chose-nx-to-untangle-a-growing-multi-tenant-platform-39fe</link>
      <guid>https://dev.to/thevladbog/why-we-chose-nx-to-untangle-a-growing-multi-tenant-platform-39fe</guid>
      <description>&lt;p&gt;So, you're building an internal platform that covers lots of different groups, teams, and places to deploy. The way you set up your code isn't just a minor detail — it's a big decision that gets even bigger over time. Here's how we moved QuokkaQ, a system for managing queues across 14 offices and 36 different queues, from a messy codebase into a neat Nx monorepo, and the cool stuff we learned while doing it.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem: One Codebase, Too Many Directions
&lt;/h2&gt;

&lt;p&gt;QuokkaQ started as a focused product: a single queue management interface backed by a Go service. But internal platforms have a way of growing sideways. Over time, the system expanded to include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A &lt;strong&gt;customer-facing kiosk UI&lt;/strong&gt; (tablet, touch-first)&lt;/li&gt;
&lt;li&gt;An &lt;strong&gt;operator dashboard&lt;/strong&gt; (desktop, data-dense)&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;shared component library&lt;/strong&gt; used by both&lt;/li&gt;
&lt;li&gt;A &lt;strong&gt;Go backend&lt;/strong&gt; with PostgreSQL, Redis, and WebSocket support&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;CI/CD pipelines&lt;/strong&gt; with semantic versioning and Yandex Cloud deployments&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What had started as two repositories became five, with shared code copy-pasted between them. Changes to a shared component meant updating it in multiple places. CI pipelines had drifted out of sync. Releases required coordinating across repos manually. Every deployment felt riskier than it should have.&lt;/p&gt;

&lt;p&gt;We needed a structural reset.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Monorepo, and Why Now
&lt;/h2&gt;

&lt;p&gt;The decision to consolidate into a monorepo wasn't about following a trend — it was about eliminating a specific class of problems:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shared code without shared ownership.&lt;/strong&gt; When the same Button component lives in two repos, it will eventually diverge. Not from malice, but from the natural pressure of deadlines. A monorepo makes sharing the default, not the exception.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fragmented CI.&lt;/strong&gt; Five repos meant five pipeline configurations, each slightly different, each requiring separate maintenance. Bugs in CI setup propagated slowly and silently.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Difficult cross-cutting changes.&lt;/strong&gt; Renaming an API response field meant touching the backend, the kiosk UI, and the dashboard in three separate PRs, coordinated manually. In a monorepo, that's one PR with one review.&lt;/p&gt;

&lt;p&gt;The question wasn't &lt;em&gt;whether&lt;/em&gt; to use a monorepo. It was &lt;em&gt;which tool&lt;/em&gt; to use — and how to migrate without stopping feature development.&lt;/p&gt;




&lt;h2&gt;
  
  
  Evaluating the Landscape
&lt;/h2&gt;

&lt;p&gt;We looked at the major options: &lt;strong&gt;Turborepo&lt;/strong&gt;, &lt;strong&gt;pnpm workspaces with manual scripts&lt;/strong&gt;, and &lt;strong&gt;Nx&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Turborepo was appealing for its simplicity — great for pure JS/TS projects. But QuokkaQ isn't purely JS. We had a Go backend, a React frontend, and aspirations to add a mobile app. We needed something that could model tasks and dependencies across different tech stacks, not just run npm scripts faster.&lt;/p&gt;

&lt;p&gt;Plain pnpm workspaces gave us package sharing but nothing more. We'd have to build our own task graph, caching, and affected-detection logic. That's essentially reinventing what Nx already does.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nx won because it matched how we actually think about the project.&lt;/strong&gt; It models the repository as a graph of projects with explicit dependencies, and it uses that graph to answer the question we kept asking: &lt;em&gt;given this change, what do I actually need to rebuild and retest?&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Migration: What We Did
&lt;/h2&gt;

&lt;p&gt;We didn't do a big-bang migration. We couldn't afford the downtime in a system with real operational queues running 8+ hours a day.&lt;/p&gt;

&lt;p&gt;Instead, we ran a &lt;strong&gt;strangler fig migration&lt;/strong&gt;: create the Nx workspace, move one project at a time, and keep everything deployable throughout.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: Create the Nx workspace alongside existing repos
&lt;/h3&gt;

&lt;p&gt;We initialized a new Nx workspace and started by moving the shared component library first — it had the fewest external dependencies and the most to gain from centralization.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx create-nx-workspace@latest quokkaq &lt;span class="nt"&gt;--preset&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We chose the &lt;code&gt;ts&lt;/code&gt; preset rather than a framework-specific one, because we needed to support React apps, a Node backend, and eventually Go tooling — and we didn't want Nx's generators to assume a single framework.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: Define the project graph explicitly
&lt;/h3&gt;

&lt;p&gt;Nx infers dependencies from imports, but for a migration, we wanted to be explicit. We defined &lt;code&gt;project.json&lt;/code&gt; for each package and declared dependencies manually first, then let inference take over once the structure stabilized.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;apps/kiosk/project.json&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"kiosk"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"targets"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"build"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"executor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"@nx/vite:build"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"dependsOn"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"^build"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"test"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"executor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"@nx/vite:test"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;"dependsOn": ["^build"]&lt;/code&gt; was key — it told Nx that before building the kiosk, it must build all upstream libraries. No more "it worked locally but CI failed because the lib wasn't built" incidents.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 3: Enforce boundaries with module boundary rules
&lt;/h3&gt;

&lt;p&gt;With shared code accessible to everyone, the temptation to take shortcuts is real. We used Nx's &lt;code&gt;@nx/enforce-module-boundaries&lt;/code&gt; ESLint rule to declare which projects could import from which others:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;.eslintrc.json&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"rules"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"@nx/enforce-module-boundaries"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"error"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"depConstraints"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
          &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"sourceTag"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"scope:kiosk"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"onlyDependOnLibsWithTags"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"scope:shared"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"scope:kiosk"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
          &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
          &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"sourceTag"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"scope:dashboard"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
            &lt;/span&gt;&lt;span class="nl"&gt;"onlyDependOnLibsWithTags"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"scope:shared"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"scope:dashboard"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
          &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This meant a developer working on the kiosk couldn't accidentally import dashboard-specific logic, even if it was technically accessible in the monorepo. Violations surfaced immediately in the editor, not in code review.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 4: Nx Affected in CI
&lt;/h3&gt;

&lt;p&gt;This was the change that made the biggest difference to our day-to-day workflow. Before, every CI run built and tested everything. After:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="c1"&gt;# GitHub Actions&lt;/span&gt;
&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Run affected tests&lt;/span&gt;
  &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;npx nx affected --target=test --base=origin/main&lt;/span&gt;

&lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Build affected apps&lt;/span&gt;
  &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;npx nx affected --target=build --base=origin/main&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;On a typical feature branch touching only the operator dashboard, CI went from ~18 minutes to ~4 minutes. The affected graph knew that changes to &lt;code&gt;libs/ui&lt;/code&gt; needed to retest both apps, but a change isolated to &lt;code&gt;apps/dashboard&lt;/code&gt; only needed to retest that app.&lt;/p&gt;




&lt;h2&gt;
  
  
  What We Got
&lt;/h2&gt;

&lt;p&gt;After the migration was complete, the difference was measurable:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CI time&lt;/strong&gt; dropped significantly for most PRs — changes to isolated apps no longer triggered full rebuilds.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Shared component drift&lt;/strong&gt; effectively stopped. There's one &lt;code&gt;Button&lt;/code&gt;, one &lt;code&gt;Queue&lt;/code&gt; type definition, one set of API response interfaces. When we update them, every consumer gets the update immediately and TypeScript tells us if something breaks.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Onboarding&lt;/strong&gt; became easier. New team members had one place to clone, one set of commands to learn, and Nx's project graph visualization (&lt;code&gt;nx graph&lt;/code&gt;) gave them a map of the whole system on day one.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Release coordination&lt;/strong&gt; went from a manual checklist to a structured process. Semantic versioning and changelogs are generated per-project, but triggered from a single pipeline.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Trade-offs We Accepted
&lt;/h2&gt;

&lt;p&gt;Nx is not free. Here's what we paid:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Build configuration complexity.&lt;/strong&gt; Nx adds a layer of configuration on top of whatever tools you're already using. Getting Vite, Jest, and Playwright to play nicely within Nx executors required some upfront investment. The docs help, but expect friction for non-standard setups.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The dependency graph can lie.&lt;/strong&gt; Nx's affected detection is only as good as the dependency declarations. If you forget to declare a dependency — or if you have runtime dependencies that aren't reflected in imports — you'll get false negatives where Nx thinks something isn't affected when it is. We caught a few of these early; now we have a checklist for adding new projects.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nx Cloud is tempting but not free.&lt;/strong&gt; Local Nx caching is genuinely useful and free. Remote caching via Nx Cloud is significantly better for teams, but it's a paid product. We evaluated it and decided to hold off for now, running local caching only.&lt;/p&gt;




&lt;h2&gt;
  
  
  Would We Do It Again?
&lt;/h2&gt;

&lt;p&gt;Yes — and we already have. The patterns we developed for QuokkaQ became the template for how we structure new internal platform work.&lt;/p&gt;

&lt;p&gt;The key insight is that a monorepo isn't a solution to bad architecture. If your code is tangled, moving it into a monorepo makes it more-conveniently tangled. Nx gave us the tools to define and enforce structure, but we still had to do the design work to figure out what the right structure was.&lt;/p&gt;

&lt;p&gt;If you're building a multi-tenant internal platform with shared UI, a Go or Node backend, and plans to expand — the cost of Nx setup is paid back quickly. The affected build detection alone is worth it at scale.&lt;/p&gt;




&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://nx.dev/docs" rel="noopener noreferrer"&gt;Nx documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://nx.dev/nx-api/eslint-plugin/documents/enforce-module-boundaries" rel="noopener noreferrer"&gt;Nx module boundary rules&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://nx.dev/ci/features/affected" rel="noopener noreferrer"&gt;Nx affected&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;em&gt;Building internal platforms at scale? I write about queue systems, developer tooling, and real-time architecture. Follow me on &lt;a href="https://dev.to/thevladbog"&gt;Dev.to&lt;/a&gt; or connect on &lt;a href="https://linkedin.com/in/thevladbog" rel="noopener noreferrer"&gt;LinkedIn&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>nx</category>
      <category>monorepo</category>
      <category>architecture</category>
      <category>typescript</category>
    </item>
  </channel>
</rss>
