Building a Directory Tree Visualization App with Next.js 13+

I built a directory tree visualization app using Next.js 13+, allowing users to input directory structures, interact with them, and capture screenshots.

Core Features

• Input Directory Structures via text or file upload.
• Interactive Tree Visualization with expand/collapse functionality.
• Screenshot & Print support for easy documentation.
• Dark/Light Mode for user preference.
• Example Input & Clear for easy formatting and resetting.

Key Components

• InputSection: Handles input parsing.
• DirectoryTree: Renders the interactive tree.
• ThemeProvider: Manages light/dark themes.
• TreeStore (Zustand): Manages directory state.

Tech Stack

• Next.js 13+, TypeScript, Tailwind CSS, shadcn/ui, Zustand (state management), html2canvas (screenshot capture).

Project Structure

• app/ (Next.js files), components/ (UI elements), lib/ (utilities), public/ (static assets), styles/ (global styles).

Next Steps

• Drag and Drop for reordering.
• Dynamic Directory Creation (add/delete files).
• Better Input Validation.

This project enhanced my understanding of Next.js 13 and modern React libraries, and I look forward to improving it further!