{"id":25426792,"url":"https://github.com/shadyashraf174/tree_app","last_synced_at":"2026-04-09T23:02:41.948Z","repository":{"id":277889405,"uuid":"933827024","full_name":"shadyashraf174/Tree_App","owner":"shadyashraf174","description":"A React-based application for managing hierarchical tree structures. Users can add, delete, edit, and reset nodes in the tree.","archived":false,"fork":false,"pushed_at":"2025-02-16T19:27:06.000Z","size":159,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T20:26:58.429Z","etag":null,"topics":["css","frontend-development","hierarchical-structures","javascript","jest","jsx","node-operations","react","react-testing-library","state-management-in-react","tree-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shadyashraf174.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-16T19:19:43.000Z","updated_at":"2025-02-16T19:39:22.000Z","dependencies_parsed_at":"2025-02-16T20:37:08.268Z","dependency_job_id":null,"html_url":"https://github.com/shadyashraf174/Tree_App","commit_stats":null,"previous_names":["shadyashraf174/tree_app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FTree_App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FTree_App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FTree_App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadyashraf174%2FTree_App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadyashraf174","download_url":"https://codeload.github.com/shadyashraf174/Tree_App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239214050,"owners_count":19601077,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend-development","hierarchical-structures","javascript","jest","jsx","node-operations","react","react-testing-library","state-management-in-react","tree-management"],"created_at":"2025-02-17T00:22:09.925Z","updated_at":"2026-04-09T23:02:41.840Z","avatar_url":"https://github.com/shadyashraf174.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tree Management Application\r\n\r\nThis is a React-based Tree Management Application that allows users to:\r\n\r\n- Add new nodes to the tree.\r\n- Delete existing nodes.\r\n- Edit the names of nodes.\r\n- Reset the tree to its initial state.\r\n\r\nThe application is built using React and follows a modular structure for better maintainability and scalability.\r\n\r\n---\r\n\r\n## Table of Contents\r\n\r\n1. [Features](#features)\r\n\r\n2. [Project Structure](#project-structure)\r\n\r\n3. [Setup Instructions](#setup-instructions)\r\n\r\n4. [Usage](#usage)\r\n\r\n5. [Diagrams](#diagrams)\r\n\r\n- [Class Diagram](#class-diagram)\r\n\r\n- [Use Case Diagram](#use-case-diagram)\r\n\r\n6. [Testing](#testing)\r\n\r\n---\r\n\r\n## Features\r\n\r\n- **Add Node**: Add a new node as a child of the selected node.\r\n\r\n- **Delete Node**: Delete a node (except the root node).\r\n\r\n- **Edit Node**: Edit the name of a node.\r\n\r\n- **Reset Tree**: Reset the tree to its initial state.\r\n\r\n- **Interactive UI**: Intuitive buttons for adding, deleting, editing, and resetting nodes.\r\n\r\n---\r\n\r\n## Project Structure\r\n\r\n```\r\n\r\nsrc/\r\n├── components/\r\n│   ├── TreeNode.js\r\n│   └── TreeView.js\r\n├── hooks/\r\n│   └── useTree.js\r\n├── tests/\r\n│   ├── App.test.js\r\n│   └── TreeNode.test.js\r\n├── utils/\r\n│   ├── treeData.js\r\n│   ├── addNode.js\r\n│   ├── deleteNode.js\r\n|   ├── resetTree.js\r\n│   └── editNode.js\r\n├── App.js\r\n├── index.js\r\n└── styles.css\r\n\r\n```\r\n\r\n---\r\n\r\n## Setup Instructions\r\n\r\n### Clone the Repository\r\n\r\n```bash\r\n\r\ngit clone https://github.com/shadyashraf174/tree_app.git\r\n\r\ncd tree-management-app\r\n\r\n```\r\n\r\n### Install Dependencies\r\n\r\n```bash\r\n\r\nnpm install\r\n\r\n```\r\n\r\n### Run the Application\r\n\r\n```bash\r\n\r\nnpm start\r\n\r\n```\r\n\r\nThe application will open at [http://localhost:3000](http://localhost:3000).\r\n\r\n---\r\n\r\n## Usage\r\n\r\n- **Add a Node**: Select a node by clicking on it, then click the \"Add\" button to add a new child node.\r\n\r\n- **Delete a Node**: Select a node by clicking on it, then click the \"Remove\" button to delete the node.\r\n\r\n- **Edit a Node**: Select a node by clicking on it, then click the \"Edit\" button, update the name, and click \"Save\".\r\n\r\n- **Reset the Tree**: Click the \"Reset\" button to reset the tree to its initial state.\r\n\r\n---\r\n\r\n## Diagrams\r\n\r\n### Class Diagram\r\n\r\nThe class diagram represents the structure of the application, including components, hooks, and utility functions.\r\n\r\n![Class Diagram](https://uml.planttext.com/plantuml/png/XLCzRuCm4DsH-0yUYPhq1p1KYPGCxP2535qTV6sfp85iarQg-jzhGmv3SgARx-Cztti-RwsJndMrJfDIIsl5hct5Jve8yI0Ce0AJhNBnKhm-7ZJKW2vDVjE4cay6uDWe80JwSowQyoUKRiWqM83sKIxUEYnTrU2GjtqML40_grnOPofy9yn1LNS8y3dVmWCAUG4EzB-4pa9GGGgSFyyLB4swCDE7HALXftfSrae_YOizVg1BKwbfwzxVutetCvpnCRr1AjEv5WXVHra32pLWmGMjsPYU-227ISc7QvXD_LYBMndXmky-ngu-Wrb5woRKQbH6x35pSy6TSeOEhkA9ZE95AiuQXZjGxAMJn5sXVs2fJxEjwFl3Fzbidk8NoCCgsLYWnQ8ynQ56PdErYLjSULJF5SVngRZr--y_zny0)\r\n\r\n---\r\n\r\n### Use Case Diagram\r\n\r\nThe use case diagram represents the interactions between the user and the system.\r\n\r\n![Use Case Diagram](https://uml.planttext.com/plantuml/png/TPBDIiKm58JtWRp3S3Vgule0BkIAkjI5V_j3C_O6qXIIKqN4TpTfgRGNkqk6RuOpXtF8Aac7BbWJ-AxG7ictHuNpYOtwFbeZZVO9hvd96ckgBB4DnEubaNYGA2qxHiNpLrPsEtnRWv77Vd-DynldyDWxNk0Ajn8XvI-8_4GiwfgzOw1oXRj9ad_eU-TrnR8A4tcM4QKxCJmnKr7ddXrfLFH8Q6rJ-dlDyD6hbu2o7Js9UFDby6N2HnN-0hAceT4XiUuAo_ANnJnapjQIc4TYLNaBMZJTGfRTjfZ5y1Mfhtbz4_DZpO7HbOFu1G00)\r\n\r\n---\r\n\r\n## Testing\r\n\r\nThe application is tested using React Testing Library and Jest. To run the tests:\r\n\r\n```bash\r\n\r\nnpm test\r\n\r\n```\r\n\r\n### Test Cases\r\n\r\n- **App Component**:\r\n\r\n- Renders the tree with initial nodes.\r\n\r\n- Adds a new node when the \"Add\" button is clicked.\r\n\r\n- Deletes a node when the \"Remove\" button is clicked.\r\n\r\n- Edits a node when the \"Edit\" button is clicked.\r\n\r\n- Resets the tree to its initial state when the \"Reset\" button is clicked.\r\n\r\n- **TreeNode Component**:\r\n\r\n- Renders the node name.\r\n\r\n- Calls `onSelect` when a node is clicked.\r\n\r\n- Enters edit mode when `editingNodeId` matches the node ID.\r\n\r\n- Calls `onSaveEdit` when the \"Save\" button is clicked.\r\n\r\n- Cancels editing when the \"Cancel\" button is clicked.\r\n\r\n---\r\n\r\n![Screenshot 2025-02-17 015707](https://github.com/user-attachments/assets/28b09f48-cdbb-4282-baaa-c47f701d4c9e)\r\n\r\n---\r\n\r\n![Screenshot 2025-02-17 015732](https://github.com/user-attachments/assets/d6205ce5-2ec2-4077-8628-5c46cc37f8ba)\r\n\r\n---\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadyashraf174%2Ftree_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadyashraf174%2Ftree_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadyashraf174%2Ftree_app/lists"}