Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

File Tree View UI in React with Option to Create Folders and Files in a Nested Structure — VS Code-Style File Explorer with Dynamic Creation

Prompt

Implement a minimal file-tree UI in React that lets users dynamically create folders and files in an infinitely nested structure. Initial state shows a single 'create src' button. Clicking it creates a root folder named src. Each folder has a + icon that opens a dialog/modal with a name input and a file/folder type dropdown. Clicking + on any folder (including newly created ones) allows creating further nested items. Folders can be collapsed/expanded by clicking their name. Files are leaf nodes (no + icon). Store the tree as a recursive JSON structure in state. Use recursion to locate the correct parent node and append the new child. This was asked in MakeMyTrip's SDE2 machine coding round and PhonePe's and JobTwine's and Flipkart's SDE2 frontend interviews.

Store tree as recursive structure: {id, name, type: 'file' or 'folder', children: []}.
Test Results

File Tree View UI in React with Option to Create Folders and Files in a Nested Structure — VS Code-Style File Explorer with Dynamic Creation

Implement a minimal file-tree UI in React that lets users dynamically create folders and files in an infinitely nested structure. Initial state shows a single 'create src' button. Clicking it creates a root folder named src. Each folder has a + icon that opens a dialog/modal with a name input and a file/folder type dropdown. Clicking + on any folder (including newly created ones) allows creating further nested items. Folders can be collapsed/expanded by clicking their name. Files are leaf nodes (no + icon). Store the tree as a recursive JSON structure in state. Use recursion to locate the correct parent node and append the new child. This was asked in MakeMyTrip's SDE2 machine coding round and PhonePe's and JobTwine's and Flipkart's SDE2 frontend interviews.