Configurable Text Transformer
Problem statement
The Configurable Text Transformer is a controlled pipeline component: the user types text into an input and selects a set of transformations to apply (uppercase, reverse, trim whitespace, remove vowels, etc.), and the output updates live. This tests your understanding of composed pure functions and controlled React state.
Build a component with a text input, a set of toggle-able transformation options (checkboxes or toggle buttons), and a live output panel. Transformations are applied in a fixed order (the pipeline), and the user can enable or disable any combination of them.
The architectural insight is that each transformation is a pure function (string) => string, and the active set of transformations is reduced over the input like a pipeline. This makes adding new transformations trivial — just add a function to the list.
Requirements & constraints
- At least 5 distinct text transformations available
- Transformations applied in a fixed pipeline order
- Output updates live as user types or toggles transforms
- Each transform can be independently enabled/disabled
- Show intermediate steps (optional but impressive)
- Pure functions for each transformation — no side effects
How to approach Configurable Text Transformer
The strategy an interviewer expects you to reach for.
Why This Question Exists The Text Transformer tests function composition — a foundational FP concept that interviewers use to assess whether candidates think in terms of reusable, composable units rather than imperative step-by-step code. A developer who hard-codes a chain of if (uppercase) str = str.toUpperCase() conditions will struggle to add new transformations later.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.