Was a cool exercise, with a simple concept, but with tricky parts.
The most challenging parts where the flat array to a 3 leveled tree, and the fact that you couldn't use external libs.
(axios would be useful though without taking anything away)
The UI looks like this:
To get started, install the dependencies with npm install.
Run the application with npm start.
Launch application in browser at http://localhost:3000.
We would like you build a simple data explorer as shown in the image below. This is just a wireframe guide to get you started, you may style it in any way you like to improve the design and UX.
The data is a list of application records and is fetchable at /data. Each application has 3 levels of business capabilities. Business capabilities are hierarchical as shown in the image (Business capability 1 -> Business capability 2 -> Business capability 3)
Important: Use the data file provided
The app should -
- Requests the dataset.
- Build a hierarchical navigation tree displaying the different levels of business capabilities. Bonus points if we can expand/collapse the navigation tree.
- Have a range slider to be able to further filter the dataset based on the total spending value
- Present a list of applications from the data set, showing name and total spend. The list depends on the navigation tree and the range filter
Additional notes
- Please spend as much time as you feel necessary to complete the task and show off your skills.
- We will be looking at code/file structure, code quality & best practices, design & user experience.
- Add comments where necessary or to document any assumptions/considerations you may have.
- You shouldn't need to use any external libraries