Progression-radar NPM

Progression radar

Progression Radar is a simple visualisation tool for career and learning paths.

Live demo: https://progression-radar.netlify.com

Motivation

Progression radar is designed as a tool for visualizing the progression in different areas related to a career growth plan or career path or a learning path.

Inspired in the deprecated Medium's snowflake tool, it shows your progress in the levels within the areas you configure.
Also, you can compare your progress and levels with the ones that are required by other configured roles.

The app doesn't require a database or a backend; all the status data will be passed thought a url query parameter.

Status

This project is still in wip; there is no release yet.

Getting started

Installation

The first step is clone this repository and install all the dependencies.
You will need git and yarn intalled in your computer. You can see how to install yarn in the yarn website.

Then, you are ready to clone and install the dependencies:

git clone git@github.com:asiermarques/progression-radar.git
cd progression-radar

yarn install

To start to use the app, you need to copy the configuration data files.

cp ./src/data/categories.yml.dist ./src/data/categories.yml
cp ./src/data/roles.yml.dist ./src/data/roles.yml

And then, start the development server.

yarn start

Customize your path

Configure the categories

The categories represent the areas in your path, i.e.: communication, software engineering. All the categories are configured in the ./src/data/categories.yaml file.

Every category will be an entry of a YAML array with these fields specified on it:

field	description
key	a unique and short identifier for the category
name	the name for the category
description	a brief description of the category
kpis	an array of KPIs or skills for the category

KPIs

Each category has a list of KPIs. A KPI is a skill, behavior, or concept that you need to master to reach a level in a specific category.

Each KPI will be an entry of the kpis category field and will have these fields specified on it:

field	description
summary	a title of a brief description of the KPI
description	an extended description of the KPI. Markdown is supported
tags	a simple array of tags for this KPI
level	a numeric level for this skill

Example

# categories.yaml
- 
  key: ps
  name: Problem-solving
  description: Shares the right amount of information with the right people, at the right time, and listens effectively
  kpis: 
    - 
      summary: Communicates effectively to close stakeholders when called upon, and incorporates constructive feedback
      description:  >
        **Example behaviors:**

        * Communicates project status clearly and effectively

        * Collaborates with others with empathy

        * Asks for help at the appropriate juncture  


        **Example tasks:** 

        * Updated The Watch before running a backfill

        * Updated project status changes in Asana promptly
        
        * Gave thoughtful check-in and check-out comments

      tags: ["tech", "management"]
      level: 1

Configure the roles

A role is a step in your ladder. You will grow from one role to another, reaching specific levels in each category.
All the roles are configured in the ./src/data/roles.yaml file.

Every role will be an entry of a YAML array with this fields specified on it:

field	description
key	a unique and short identifier for the role
name	the name for the role, i.e., Senior Backend Engineer
levels	represent the levels that the role requires for the configured categories. It is an object with key-value fields. The key is for a category's key and the value is for that category level, i.e.: { ps: 1, comm: 3, ...}

Example

# roles.yaml
-
  key:  aswe
  name: Associate Software Engineer
  levels: { comm: 1, ps: 1, rs: 1, des: 1, fin: 1, data: 1, front: 1, back: 1, infra: 1 }

The status info passed by url

The information to visualize the progress of a person is passed by an url query parameter named state.

This param expect a json object with the following fields:

field	description
name	the person's name
levels	represent the levels that the person has reached for the configured categories. It is an object with key-value fields. The key is for a category's key and the value is for that category level, i.e.: { ps: 1, comm: 3, ...}
roleKey	the person's current role
tags	a simple array of tags that this person is interested about
compareTo	optional: a role that will be used for a level comparison

Example

/?state={name: "John Connor", levels: { comm: 2, ps: 1, rs: 2, des: 1, res: 1, fin: 1, data: 1, front: 1, back: 1, infra: 1 }, roleKey: "aswe", tags: ["tech"], compareTo:  "swe"}