React Tree With Storage

Overview

Persisting changes in a tree view is one of the trickiest challenges in UI development — so I built React Tree With Storage to make it easier.

This is an interactive, hierarchical tree management system built with Next.js, TypeScript, and V0, featuring modern UI, persistence via DexieDB, and full keyboard accessibility.

⚙️ The tree view is built from scratch — no external libraries were used for its logic or behavior.

Features

• 🗂 Hierarchical Tree Structure — Manage nested folders and items
• 🔄 Drag-and-Drop Reordering — Intuitive rearrangement of nodes
• 📝 Inline Editing — Rename items directly in the tree
• 📂 Folder Creation — Add folders and organize your content
• 💾 Persistent Storage — Automatically saves changes to DexieDB
• 🎨 Modern UI — Powered by shadcn/ui and TailwindCSS
• ♿️ Accessibility Support — ARIA-compliant components
• ⌨️ Keyboard Navigation — Navigate and edit without a mouse

Quick Start

git clone https://github.com/mawnir/react-tree-with-storage.git
cd react-tree-with-storage
pnpm install
pnpm dev

Then open http://localhost:3000 in your browser.

Dependencies

Next.js 15+
React 19+
TypeScript 5+
TailwindCSS
shadcn/ui
Lucide React

License

MIT License