# File explorer

> Build a recursive file explorer tree view with expandable and collapsible folders, similar to VS Code's sidebar.

- Difficulty: intermediate
- Tags: useState, recursion
- Estimated time: 45 minutes
- Tests: 7
- Requires subscription: yes

## Overview

Build a recursive file explorer tree view with expandable and collapsible folders, similar to VS Code's sidebar.


## Requirements

- Render a tree of files and folders from a given `FileNode[]` data structure.
- Each folder manages its own expand/collapse state independently.
- Folder contents are hidden by default and shown when the folder is clicked.
- Clicking a folder again hides its contents (toggle behavior).
- Support nested folder expansion (folders within folders).
- Files are not clickable — only folders expand/collapse.
- Use indentation to visually represent the depth of each node in the tree.
- Use the provided `ChevronIcon`, `FolderIcon`, and `FileIcon` components from `Components.tsx`.
- Display the title "File explorer" at the top of the page.


## Notes

- Use a recursive React component to render the tree structure.
- Give each node its own `useState` for expand/collapse — this avoids needing a global state object.
- Calculate indentation based on the depth passed to each recursive call.
- When rendering children of an expanded folder, pass `depth + 1` to the recursive `TreeNode`.
- Use the `ChevronIcon`, `FolderIcon`, and `FileIcon` helpers from `Components.tsx` — they handle the visual states.
- Files should render a spacer instead of a chevron so their names align with folder names.
- Add `aria-expanded` to folder buttons for accessibility.


## Tests

01. renders the app title
02. renders root-level files and folders
03. hides folder contents by default
04. shows folder contents when folder is clicked
05. hides folder contents when folder is clicked again
06. supports nested folder expansion
07. allows expanding public folder independently