File Explorer Interview Tips and Common Questions

File Explorer Interview Tips and Common Questions

Here are tips for building a file explorer in a machine coding interview.

Tips

1. Start with the data structure: define the tree before rendering.
2. Write the recursive function first: get the recursion right, then add UI.
3. Test with a simple tree: 2 levels, then 3 levels, then deep nesting.
4. Add icons and CSS last: functionality first, polish later.
5. Handle empty folders: check if children exist and is non-empty.

Common Follow-Up Questions

"How would you handle lazy loading for large directories?"

Load children on expand (not on initial render). When a folder is expanded, fetch its children from an API. Show a loading indicator while fetching.

"How would you add drag and drop to move files?"

Use the HTML Drag and Drop API. dragstart on file/folder, dragover on folder (preventDefault), drop to move the node to the new parent. Update the tree data structure.

"How would you implement search?"

Recursively search the tree for matching names. Show matching results as a flat list. Highlight the path to each result.

"How would you persist the expanded state?"

Store expanded folder paths in a Set or object. Save to localStorage. On re-render, check if a path is in the Set and expand accordingly.

"How would you handle 10,000 files?"

Virtualization (only render visible nodes), lazy loading (load children on expand), and search/filter to narrow down. Do not render 10,000 DOM nodes at once.

The Takeaway

Tips: start with data structure, write recursion first, test incrementally, add CSS last, handle empty folders. Follow-ups: lazy loading (fetch on expand), drag and drop (move files), search (recursive filter), state persistence (localStorage), and scaling (virtualization). Understand recursion deeply.