React Folder & File Tree

An interactive demo showing how to model a file system–like folder & file tree in React using a simple tree data structure. Built with React + TypeScript + Vite. You can add folders/files, rename nodes inline, nest children, expand/collapse folders, and inspect the live JSON tree.

Key goals:

• Demonstrate a minimal tree model (folder/file nodes).
• Provide a UI that lets you create, rename, nest, and delete nodes.
• Show the underlying data in a Tree Inspector for learning/debugging.

Table of Contents

• Demo
• Features
• Tech stack
• Getting started
  • Prerequisites
  • Install
  • Run (dev)
  • Build / Preview
• Project structure
• How it works
• Contributing
• License

Demo

Run the app locally and open http://localhost:5173 in your browser.

Live demo (deployed to GitHub Pages):

React Folder Structure

(Note: the site will be live after you run npm run deploy or when your CI workflow publishes the gh-pages branch.)

Features

• Add folders/files at the root or inside any folder.
• Inline rename: click a node label to edit; press Enter or blur to save.
• Expand/Collapse folders via arrow or double-click.
• Delete any node (folder or file).
• Per-node controls (add folder/file, delete) and root controls for quick creation.
• Stats (folder/file counts) and an empty state when no nodes exist.
• Live JSON view of the tree (great for learning/debugging).

Tech stack

• React 19 (functional components + hooks)
• TypeScript
• Vite (dev server + build)
• Tailwind CSS
• ESLint for linting

Getting started

Prerequisites

• Node.js 18+ recommended
• A package manager (pnpm, npm or yarn). The project uses standard npm scripts.

Install

Open a terminal in the project root and run:

npm install

Run (dev)

Start the dev server (Vite):

npm run dev

Open http://localhost:5173

Build & Preview

To produce a production build and preview it locally:

npm run build
npm run preview

Lint

Run ESLint across the project:

npm run lint

Project structure

Feature-based (vertical slices) with a single navigation slice.

Important files and folders:

• src/main.tsx - App bootstrap and React entrypoint
• src/app/App.tsx - Top-level app layout
• src/app/features/fs - Core feature: hooks, UI, and small utilities
  • state/useTree.ts - Hook managing the tree state & actions (add, remove, rename, toggle).
  • state/seed.ts - Initial seed data for the demo.
  • ui/FolderTree.tsx - Top-level panel, stats, and root controls.
  • ui/TreeNode.tsx - Recursive node renderer (expand/collapse, rename, children).
  • ui/NodeControls.tsx - Small control cluster (add folder/file, delete).
  • ui/TreeInspector.tsx - JSON representation of the current tree.

Other repo files:

• vite.config.ts - Vite configuration
• tsconfig*.json - TypeScript configuration
• eslint.config.js - ESLint configuration

How it works

• The tree is an array of nodes; each node is either a folder (with children[] and isOpen) or a file.

• The custom hook useTree(seed) exposes:

  • tree and stats (folders/files count),
  • actions: addFile(parentId?), addFolder(parentId?), remove(id), rename(id, name), toggleOpen(id).

• UI wiring:

  • FolderTree renders global controls and the root list.
  • TreeNode renders each node and recurses for folder children; it handles inline rename and expand/collapse.
  • NodeControls provides per-node create/delete actions
  • TreeInspector prints JSON.stringify(tree, null, 2)

Contributing

Contributions are welcome. If you'd like to contribute:

1. Fork the repository.
2. Create a branch for your feature/fix: git checkout -b feat/change-name
3. Run the app and add tests/docs where helpful.
4. npm run lint and open a PR.

Please follow existing code style, TypeScript typing, and lint rules. Run npm run lint before opening a PR.

License

This project is provided under the MIT License. See the LICENSE file for details.

Copyright © 2025, Kaissar Mouelhi