Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shadyashraf174/tree_app
A React-based application for managing hierarchical tree structures. Users can add, delete, edit, and reset nodes in the tree.
https://github.com/shadyashraf174/tree_app
css frontend-development hierarchical-structures javascript jest jsx node-operations react react-testing-library state-management-in-react tree-management
Last synced: 4 days ago
JSON representation
A React-based application for managing hierarchical tree structures. Users can add, delete, edit, and reset nodes in the tree.
- Host: GitHub
- URL: https://github.com/shadyashraf174/tree_app
- Owner: shadyashraf174
- Created: 2025-02-16T19:19:43.000Z (4 days ago)
- Default Branch: main
- Last Pushed: 2025-02-16T19:27:06.000Z (4 days ago)
- Last Synced: 2025-02-16T20:26:58.429Z (4 days ago)
- Topics: css, frontend-development, hierarchical-structures, javascript, jest, jsx, node-operations, react, react-testing-library, state-management-in-react, tree-management
- Language: JavaScript
- Homepage:
- Size: 155 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tree Management Application
This is a React-based Tree Management Application that allows users to:
- Add new nodes to the tree.
- Delete existing nodes.
- Edit the names of nodes.
- Reset the tree to its initial state.
The application is built using React and follows a modular structure for better maintainability and scalability.
---
## Table of Contents
1. [Features](#features)
2. [Project Structure](#project-structure)
3. [Setup Instructions](#setup-instructions)
4. [Usage](#usage)
5. [Diagrams](#diagrams)
- [Class Diagram](#class-diagram)
- [Use Case Diagram](#use-case-diagram)
6. [Testing](#testing)
---
## Features
- **Add Node**: Add a new node as a child of the selected node.
- **Delete Node**: Delete a node (except the root node).
- **Edit Node**: Edit the name of a node.
- **Reset Tree**: Reset the tree to its initial state.
- **Interactive UI**: Intuitive buttons for adding, deleting, editing, and resetting nodes.
---
## Project Structure
```
src/
├── components/
│ ├── TreeNode.js
│ └── TreeView.js
├── hooks/
│ └── useTree.js
├── tests/
│ ├── App.test.js
│ └── TreeNode.test.js
├── utils/
│ ├── treeData.js
│ ├── addNode.js
│ ├── deleteNode.js
| ├── resetTree.js
│ └── editNode.js
├── App.js
├── index.js
└── styles.css
```
---
## Setup Instructions
### Clone the Repository
```bash
git clone https://github.com/shadyashraf174/tree_app.git
cd tree-management-app
```
### Install Dependencies
```bash
npm install
```
### Run the Application
```bash
npm start
```
The application will open at [http://localhost:3000](http://localhost:3000).
---
## Usage
- **Add a Node**: Select a node by clicking on it, then click the "Add" button to add a new child node.
- **Delete a Node**: Select a node by clicking on it, then click the "Remove" button to delete the node.
- **Edit a Node**: Select a node by clicking on it, then click the "Edit" button, update the name, and click "Save".
- **Reset the Tree**: Click the "Reset" button to reset the tree to its initial state.
---
## Diagrams
### Class Diagram
The class diagram represents the structure of the application, including components, hooks, and utility functions.
---
### Use Case Diagram
The use case diagram represents the interactions between the user and the system.
---
## Testing
The application is tested using React Testing Library and Jest. To run the tests:
```bash
npm test
```
### Test Cases
- **App Component**:
- Renders the tree with initial nodes.
- Adds a new node when the "Add" button is clicked.
- Deletes a node when the "Remove" button is clicked.
- Edits a node when the "Edit" button is clicked.
- Resets the tree to its initial state when the "Reset" button is clicked.
- **TreeNode Component**:
- Renders the node name.
- Calls `onSelect` when a node is clicked.
- Enters edit mode when `editingNodeId` matches the node ID.
- Calls `onSaveEdit` when the "Save" button is clicked.
- Cancels editing when the "Cancel" button is clicked.
---
---
---