Skill Tree


The goal was to create a skill tree based off JSON data that show relationships to each other. The purpose of the skill tree was to develop an engaging tool that developers within the workplace could use to see possible areas to enhance their skills and also allow fellow colleagues to view their set of skills.

Libraries Used

These are the following libraries I used to create the skill tree.

  • React – Creating real time functionality


Intuitive User Interface

The skills that the user can interact with are highlighted with a white glow. When the user clicks on a skill that skill is highlighted and the next available skills will light up. When the next skill is clicked it will show a white line between the new skill and the previous. The user can also hover over skills to get a description of what that skill is.


This was a quick project which I am really impressed with the outcome, was a good way to get myself into react and understanding components. In the future I might add in back end capability for users to create an account and store their skill tree to share with others.

A demo of the skill tree can be found on github.