The toolkit for creating a mind map has the following capabilities:
Ability to move the entire tree in multiple directions. Creating new nodes without limitations. Renaming nodes. When the rename button is pressed, the tree becomes unmovable. Clicking the cross icon will keep the old name. It is possible to confirm the change by pressing the enter key on the keyboard or by clicking the checkmark. Ability to delete unnecessary nodes, including all their children, recursively, starting from the root. Ability to zoom in or out on the tree using corresponding buttons or a selector. Ability to center the entire tree on the screen with the press of a single button. In this case, the Zustand state manager was used. In the given context of the test task, this technology may seem unnecessary, but I used it so that the code wouldn't become too tangled due to the large number of props that would be passed by the parent component.
Client: React.js, TypeScript, Styled-components, React-icons and Zustand
Clone the project
git clone https://github.com/byht1/mind_map.gitGo to the project directory
cd mind_mapInstall dependencies
yarnStart the server
yarn devor
yarn startThe test task was very interesting. It was a new experience for me since I hadn't worked on similar projects before.
