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
Atlassian, and many more.
- 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
- In-place rename functionality
- Name & Icon highlight on hover
Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on Twitter or LinkedIn.