How to Build a File Explorer in an Interview

How to Build a File Explorer in an Interview

The file explorer (tree view) is a common machine coding question that tests recursion and nested data. Here is how to build it.

Requirements

• Display a tree of files and folders.
• Folders can expand/collapse.
• Show file/folder icons.
• Nested indentation.
• Handle deeply nested structures.

Plan (5-10 minutes)

1. Data: a tree structure (objects with name, type, children).
2. Rendering: recursive function to render the tree.
3. Events: click to expand/collapse folders.
4. CSS: indentation, icons, hover states.

Data Structure

const fileTree = {
  name: "src",
  type: "folder",
  children: [
    { name: "index.js", type: "file" },
    {
      name: "components",
      type: "folder",
      children: [
        { name: "Header.js", type: "file" },
        { name: "Footer.js", type: "file" },
      ],
    },
    { name: "utils", type: "folder", children: [{ name: "helpers.js", type: "file" }] },
  ],
};

Recursive Rendering

function renderTree(node, depth = 0) {
  const div = document.createElement("div");
  div.className = node.type;
  div.style.paddingLeft = depth * 20 + "px";

  const icon = node.type === "folder" ? "📁" : "📄";
  div.innerHTML = `<span class="icon">${icon}</span> <span>${node.name}</span>`;

  if (node.type === "folder" && node.children) {
    div.style.cursor = "pointer";
    const childrenContainer = document.createElement("div");
    childrenContainer.style.display = "none";

    node.children.forEach((child) => {
      childrenContainer.appendChild(renderTree(child, depth + 1));
    });

    div.addEventListener("click", (e) => {
      e.stopPropagation();
      const isVisible = childrenContainer.style.display !== "none";
      childrenContainer.style.display = isVisible ? "none" : "block";
      div.querySelector(".icon").textContent = isVisible ? "📁" : "📂";
    });

    const wrapper = document.createElement("div");
    wrapper.appendChild(div);
    wrapper.appendChild(childrenContainer);
    return wrapper;
  }

  return div;
}

CSS

.folder { font-weight: bold; cursor: pointer; padding: 4px 0; }
.file { padding: 4px 0; color: #555; }
.folder:hover, .file:hover { background: #e0e0e0; }
.icon { margin-right: 8px; }

Edge Cases

• Empty folders (no children).
• Very deep nesting (performance).
• Files at the root level.
• Toggle state (expand/collapse).

The Takeaway

Build the file explorer with a recursive rendering function. Each folder has a click handler to expand/collapse its children. Use indentation (paddingLeft based on depth) and icons. Handle empty folders and deep nesting. This tests recursion and DOM manipulation.