Asset Tree View Application

This project implements a dynamic Tree View Application for visualizing a company's assets, components, and locations. The hierarchy is represented through a tree structure, providing features like search, filtering by sensor types, and critical sensor status. Built with Vite and React and styled using Material-UI, this application is optimized for deployment on Vercel.

• Proof of functionaliy - Video

Table of Contents

• Getting Started
• Features
• API-Endpoints
• Improvements
• Prerequisites
• License

Getting Started

To get started with this template, follow these steps:

1. Clone the repository:

   git clone https://github.com/lucianowayand/component-tree.git

2. Install dependencies:

   cd component-tree
   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

Features

The core feature of this application is a Tree View that represents a company's asset hierarchy. This includes components, assets, and locations, displayed in a dynamic tree structure.

• Dynamic Tree Structure: Display the hierarchy of locations, sub-locations, assets, sub-assets, and components.
• Component Representation: Icons are used to differentiate between locations, assets, and components.
• Sensor Information: Components display additional details such as vibration or energy sensor types and their operational status (operating or alert).
• Modular: Built with reusable React components.
• Responsive UI: Ensures a smooth experience across devices.

API Endpoints

The application fetches data from a mock API, using the following endpoints:

1. /companies: Retrieves all companies.
2. /companies/:companyId/locations: Returns all locations and sub-locations of a specific company.
3. /companies/:companyId/assets: Returns all assets, sub-assets, and components of a specific company.

Improvements

Given more time, I would improve the following aspects of the project:

1. Performance, using a debounce feature on the filter so we wouldn't rebuild the filtered tree every time we type
2. UX, sometimes the listing re-renders for no reason, given more time I would find why and fix that.
3. UI, as of now we are display the raw properties of the selected object

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher)
• npm or yarn
• Vercel CLI (optional but recommended for easy deployment)

License

This project is licensed under the MIT License - see the LICENSE file for details.