Frontend

Dead Code in a Shipped Frontend

A production frontend contained a 472-line interactive signage board that no route mounts, a carefully built image component with no importers, and three declared dependencies never imported. None of it breaks the build, which is exactly why it survived.

· The RECNOS Engineering Team

The largest component in the repo is unreachable

A 472-line client component implements a full signage playlist: a state machine over a campaign array, category filtering with index wrapping, preloading of the next creative, a two-layer crossfade between an active and a pre-buffered layer, and an operator drawer that appends new campaigns to local state.

It is imported by exactly one section component, which is itself imported by nothing. The whole subsystem is unreachable from every route in the application.

This matters for how the project gets described. A write-up based on the file tree would call this a digital signage control plane. Based on the routing graph, it is an interactive demo that no user can reach.

Real interaction, mock content

The distinction between working code and real data is the one that gets lost. The playlist logic genuinely works — the crossfade, the preloading, the filtering all function client-side.

The content does not. Campaigns are seeded from a constant explicitly named `SAMPLE_CAMPAIGNS`, the brands are fictional, and the images are remote stock URLs. Labels like "Operator CMS" and "Live Dispatch" are text over local array state: there is no CMS, no backend, no scheduling, and no device registry. Reloading the page discards any campaign an operator adds.

A carefully built component with no callers

One image component is memo-wrapped, defaults its quality, defaults to lazy loading, falls back to a placeholder on error, and automatically marks external URLs as unoptimized to bypass the image optimiser. It is a thoughtful piece of work.

It has no importers outside itself. Every image in the application goes through `next/image` directly, and the wrapper's fallback and quality defaults are simply not in the render path.

Unused code is not free even when it is correct. It appears in review, it is counted as coverage, and it misleads anyone assessing what the product does.

Dependencies declared and never imported

Three runtime dependencies are declared and imported nowhere in the source. One of them is still listed in a build-tool chunking configuration, which means the build expects a package the code never uses.

There is also a single undeclared import: a component imports from a bare package that is not in the dependency list and resolves only because another declared package depends on it transitively. That works until the transitive dependency changes, at which point the build breaks for a reason unrelated to the change.

  • A document-generation library: declared, zero imports
  • A sticky-element library: declared, zero imports
  • An autocomplete library: declared, zero imports, still referenced in build config
  • A bare router import: used, undeclared, resolving transitively

A hardcoded timezone label

The signage clock formats the current time with an `en-US` locale and appends the string " IST". It does not convert to India time. It displays the viewer's local time with a timezone label that is wrong for almost every viewer.

This is a one-line bug, but it is the kind that survives precisely because the surrounding feature is unreachable. Nobody sees the clock, so nobody reports it. The fix belongs with the decision about whether the subsystem ships at all.

Why this accumulates

None of this fails a build or a type check. Unused files compile, unused dependencies install, and unreachable components still type-check. That is why the state persists — there is no signal that anything is wrong.

The countermeasure is a check rather than a cleanup. An import-graph assertion that every component has at least one caller, and a dependency check that every declared package is imported, both turn silent accumulation into a failing build. A one-off deletion fixes today; the check fixes the pattern.

The project this came from