Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
File Explorer
medium30 min
Build a file explorer that displays an arbitrary-depth folder hierarchy, expands and collapses folders independently, and selects files to show their paths.
Requirements
Render the supplied tree in its original sibling order. Initially every folder is collapsed and no file is selected.
Folder buttons toggle their own expansion. Only descendants of expanded ancestors are visible. Preserve a nested folder’s expansion when an ancestor closes and reopens.
Implement visibleRows recursively in data.js to derive rows with zero-based depth; do not mutate the supplied tree. Empty folders can still toggle.
Clicking a file selects it and displays its full path in the supplied selection output. File clicks never toggle folders.
Use native buttons with aria-expanded only on folders. Indentation follows row.depth; keep the supplied data-node identifiers, labels, and markup.
The complete markup and stylesheet are supplied. No file creation, renaming, editing, deletion, drag and drop, or remote file system is required.
Examples
Example 1
Input: Expand Project, src, and components; select Button.jsx.
Output: The nested file appears and its full path is displayed.
The visible behavior is identical across React, Vue, and Angular.
What the tests check
Initially shows only the three root nodes
Expands a folder and shows direct children
Recurses through multiple levels
Closing and reopening an ancestor preserves nested expansion
Selecting a file shows its full path
Folders expand independently including empty folders
