How would you design a centralized copy service for consistent UI text?

WHAT THIS TESTS: This question checks whether you understand the difference between presentation and content and can design a lightweight abstraction that keeps user-facing text consistent across an application. Interviewers want to see that you would avoid duplication, choose meaningful identifiers over raw text, and provide an ergonomic API for components without over-engineering the solution.

A GOOD ANSWER COVERS: First, a flat or nested dictionary keyed by semantic identifiers such as button.save or tooltip.userProfile rather than by the display text itself. Second, a thin service or custom hook like useCopy that accepts a key and optional interpolation values and returns the resolved string. Third, distribution through framework-level context or a provider so any component can import the hook instead of importing the raw map directly. Fourth, a single source of truth, often a JSON or TypeScript file, with the option to split by feature or screen once the map exceeds roughly one hundred keys. Fifth, a brief nod to future internationalization by noting that the same structure can later hold locale-specific maps because internationalization and localization are means of adapting to different languages, regional peculiarities and technical requirements of a target locale.

COMMON WRONG ANSWERS: Scattering literal strings inside JSX or HTML templates is the biggest red flag because it guarantees inconsistency. Using the English display text as the lookup key is brittle; changing wording then breaks every reference. Proposing a database and API round-trip for static copy that rarely changes adds latency and complexity without benefit. Building a heavy CMS integration for a simple internal tool is also considered over-engineering.

LIKELY FOLLOW-UPS: How would you handle pluralization or variable interpolation. What changes when you need to support ten locales. How do you allow product or marketing to edit copy without deploying code. Would you store the copy map on the server or client and why.

ONE CONCRETE EXAMPLE: Imagine a React application with a team of five developers. You create a file named copy.ts that exports a const copy object with keys like modal.confirmDelete.title and modal.confirmDelete.body. You write a useCopy hook that reads a CopyContext provided at the root. A DeleteButton component calls useCopy and passes modal.confirmDelete.title to render the label. When the design team rewords the modal, only copy.ts changes, and every component stays in sync automatically.