jsTree Challenge

Create a web UI with a treeview control (such as jstree) that allows multiple users to connect and see the same structure from different locations

  • Allow each user to create/delete nodes in the tree
  • Live update all connected users with any changes to the tree
  • The treeview should allow for 2 levels – Parent and Child
  • The parent nodes function as random number factories. Each parent factory will have the following properties when created:
    • The name of the factory
    • The random number pool (the pool of numbers from which to choose, e.g. 30 to 200)
  • The child nodes for each factory represent the factory output -> the numbers generated
  • When the parent factory is right clicked, allow an option for the generator to run. The input should be the number of numbers to create (only allow 1 to 15 in the number set).
  • When the numbers are created, have them created as nodes below the factory (and also delete any previous nodes from previous generator runs)
  • Utilize a database so that the information is saved (persistent)
  • We should be able to close your web UI and reconnect with it in the same state
  • Host the finished product on your own system to demonstrate your knowledge of networking and server setup

Example Test

John connects to the supplied URL and creates the first factory. Then Chris connects. Chris should see John's factory. Chris then right clicks the factory and chooses to generate 5 random numbers from the pool. The child nodes are generated with both Chris and John seeing the result.

jsTree Solution

  • Root node 1

My Thoughts

This challenge had pretty basic requirements, I've never used the jsTree library but its pretty straight forward and was pretty easy to pick up.

I added two buttons (not in the requirements). The Reset button will clean up the database to the original state of one pre-generated Factory. The Async button allows the user to turn on/off the short polling, which is turned off by default to reduce the number of async calls to the API.

The only somewhat challenging requirement was the "live updates". I considered several options but ended up going with short polling. I decided on this approach because my production environment (godaddy, i know i know, get off my back) is not currently set up for real time user interaction (using things like Angular or React) and the challenge requested that I host my solution on a live server.

I have been experimenting more with Node.js, Meteor, Angular, and React since its essentially a required skill in todays industry.

I also found it odd that the challenge never requested my source code, rather they only asked for a link to my solution. *shrugs*