Node Unwinder
Problem statement
Node Unwinder is a data-transformation challenge disguised as a UI problem. You're given a deeply nested JavaScript object (a tree) and must flatten it into a list — displaying each node's path and value — while providing an interactive interface for the user to explore the structure.
Build a component that takes an arbitrarily nested object as input, recursively traverses it, and renders every leaf node with its full dot-notation path (e.g., user.address.city → "London"). Non-leaf nodes should be collapsible, acting as section headers for their children.
This tests recursive algorithms, dynamic key traversal, and your ability to represent complex tree state in a React component. It's especially common in dev-tool, JSON viewer, and configuration editor interviews.
Requirements & constraints
- Render all leaf nodes with their full dot-notation path
- Non-leaf nodes are collapsible section headers
- Supports arbitrary nesting depth
- Handle all primitive value types: string, number, boolean, null
- Arrays should be indexed (e.g., items[0].name)
- Expand/collapse toggles each subtree independently
How to approach Node Unwinder
The strategy an interviewer expects you to reach for.
Why This Question Exists Node Unwinder tests recursive tree traversal, dynamic object key access, and the clean separation of data vs UI state — all in one component. It appears in dev-tool, config editor, and JSON viewer interviews at companies like Vercel, Linear, and Notion.
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.