📁 React Folder Explorer

A simple React application to simulate a file/folder explorer with nested folder structure. Users can dynamically add folders and files into any folder level.

---

🚀 Features

• Expand/Collapse folder structure

• Add new folders and files dynamically

• Visual distinction between folders 📂 and files 📄

• Recursive rendering of nested items

---

📦 Folder Structure

├── public/

├── src/

│ ├── components/

│ │ └── Folder.jsx # Recursive folder component

│ ├── data/

│ │ └── folderData.js # Initial data structure

│ ├── hook/

│ │ └── use-traverse-file.js # Logic to insert files/folders

│ ├── App.css

│ ├── App.jsx

│ └── index.js

---

🧠 How It Works

🔹 The folder structure is stored in a nested object (explorer).

🔹 Folder component recursively renders its child folders/files.

🔹 use-traverse-file custom hook handles adding new files/folders by modifying the tree structure.

---

✨ Future Improvements

😎 Add delete and rename functionality

😎 Save data using localStorage or a backend

😎 Drag and drop to move items

😎 Search functionality