This is a React-based application for visualizing and managing hierarchical data such as company assets and locations. This project demonstrates efficient tree structure rendering and filtering functionality with a focus on clean architecture and performance.
Originally was a technical challenge for a frontend position at Tractian, where an API should be consumed by the frontend and display locations, assets and components from available companies in a treeview. Requirements included: no UI components library should be used and the user should be able to filter the tree nodes based on certain aspects.
A user wants to inspect their company assets and check for possible mechanical and electrical failures in machine components. Each component is monitored by a sensor that uploads real time data to a server that analyzes the machine vibrations to determine if the component is healthy or about to fail.
A company may or may not have locations. A location can have sublocations (if the location is too big, the company may choose to split in multiple sectors). The assets of a company may or may not be associated with a location (or sublocation). Components may or may not be associated with a location (or sublocation) or an asset.
There should be a way visualize this in a treeview, being able to display a component current state, if a component node is selected. Also the user has to be able to filter the TreeView by name, sensor type and status.
- Interactive TreeView for hierarchical data.
- Filter functionality to search and highlight nodes.
- Mock api with
json-server(dumped the mock API responses in case the original server shuts down). - Styled with TailwindCSS for fast and responsive design.
- Built with TypeScript for type safety.
- Handling and Caching client api calls with React Query.
- Applying virtualization to mitigate performance issues when displaying large amounts of data.
- Custom tree building, filtering and flattening algorithms.
- Clone this repository
- Install project dependencies:
pnpm install- Set up a json-server mock api with:
pnpm run api- Create a
.env.localfile inside the project's root folder with the following content:
VITE_API_URL="http://localhost:9999"- In another terminal, run:
pnpm run dev- Open the app in your browser at http://localhost:3000.
- Select one of the 3 companies available at the top right.
- Use the TreeView to explore the hierarchical structure.
- Apply filters or interact with the nodes to see dynamic updates.
- React
- TypeScript
- TailwindCSS
- Vite
Since the data is all cluttered up, we need a way to handle the case when a node should be inserted, but its parent is not yet part of the treeview. For that, I opted for using a Map data structure to keep the reference of parent nodes that are not yet in the treeview and their child nodes.
For abstraction purposes, I call this auxiliary data structure "the Orphanage", to represent the relation of child nodes and the parent nodes that are supposed to adopt them as they are inserted in the treeview.
When a node is successfully inserted, every child registered in the Orphanage is "adopted", now repeating the operation recursively for each child, forming the subtree of the recently inserted node.
Here's a visual representation of the algorithm:
