Document file system structure and React implementation

Added a detailed implementation of a file system using a recursive React component. Included key technical considerations for state management and performance.

Author: ps0305

Coding Interview Prep/fileSystem.md

@@ -0,0 +1,65 @@
+1. Data Structure
+First, define your file system as a nested array of objects:
+
+```js
+const fileSystem = {
+  name: "root",
+  isFolder: true,
+  children: [
+    {
+      name: "src",
+      isFolder: true,
+      children: [
+        { name: "App.js", isFolder: false },
+        { name: "index.css", isFolder: false }
+      ]
+    },
+    { name: "package.json", isFolder: false }
+  ]
+};
+```
+2. The Implementation
+We will use a recursive component approach.
+
+```js
+import React, { useState } from 'react';
+
+const FileExplorerItem = ({ node }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = () => {
+    if (node.isFolder) setIsOpen(!isOpen);
+  };
+
+  return (
+    <div style={{ marginLeft: "20px", cursor: "pointer" }}>
+      <div onClick={handleToggle}>
+        {node.isFolder ? (isOpen ? "📂" : "📁") : "📄"} {node.name}
+      </div>
+      
+      {node.isFolder && isOpen && (
+        <div>
+          {node.children.map((child, index) => (
+            <FileExplorerItem key={index} node={child} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default function App() {
+  return (
+    <div>
+      <h3>Project Explorer</h3>
+      <FileExplorerItem node={fileSystem} />
+    </div>
+  );
+}```
+
+### Key Technical Considerations
+* Recursive Components: The FileExplorerItem component calls itself if the node isFolder is true. This is the standard way to handle trees of arbitrary depth.
+
+* State Management: Each folder maintains its own isOpen state independently.
+
+* Performance: For very large file systems, consider adding React.memo to the FileExplorerItem component to prevent unnecessary re-renders when a sibling folder is toggled.