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

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.

Demo

Mockup

• File Menu Explorer

• In-place rename functionality

• Name & Icon highlight on hover

Submission

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