How to build a File Explorer? Atlassian Frontend Machine Coding Round Question | JavaScript Interview Question | React.js

@Devtools Tech

In this question, you need to build a fully functional File Explorer. It is a commonly asked question for intermediate level. We have seen this question asked in the interview process of companies like Google, Cars24, Atlassian, and many more.

Functional Specifications

  • Can be used to create folders, sub-folders, and files.
  • The files menu should be collapsible. The Icon should change based on the Menu's state.
  • Files & Folders should have proper icons.
  • Folder state could be open or close. Icon should be based on the Folder's state.
  • A folder's content could be sub-folders/files. The contents should only be visible whenever a folder is in open state.
  • Each node (file/folder) should be properly indented based on the depth/level.
  • One should be only able to add a new file/folder to an existing folder.
  • One should be able to delete any file or folder.
  • One should be able to rename any file or folder. Show an in-place input for renaming.
  • If the newly created file name is empty then it should be deleted automatically.
  • If a rename operation is performed on an existing file and the name provided is empty then we should showcase an error.
  • Highlight the node name on hover.
  • Node controls should be only visible on hover.
  • Try to use all the best practices and organise your code into reusable components/functions.



  • File Menu Explorer

Mockup 1

  • In-place rename functionality

In-place rename functionality

  • Name & Icon highlight on hover

Name & Icon Highlight

Mockup 1

Mockup 2


Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on Twitter or LinkedIn.