Vue-Job-Description.md

Your Task

What we want to see

• Code Quality
• How you write tests
• How you structure your commits
• How you communicate during the task

Background

We want to display a flow chart to the end user of a fictional project planning tool. The end user plans various projects in this software. To give him an overview of a project, the software shows a flowchart of the project stages.

Eventually, the user should be able to manipulate the stages directly in the component (move) but this is out of scope.

Mount point:

<div id="flowchart" data-project="{…}" …></div>

Example Project

Stage 1) Requirements Engineering
- User Story Mapping
- System Integration

Stage 2 ) Design
- UX
- UI
- Software Architecture

Stage 3) Implementation
- Infrastructure
- Frontend Development
- Backend Development
- Integration

Stage 4) Verification
- User Acceptance Testing

Example JSON

{
	"stages": [
	{
		"id": 1,
		"name": "Stage 1) Requirements Engineering",
		"budget": 9000,
		"tasks": [
			{ "name": "User Story Mapping", "startDate": "2019-01-01", "endDate": "2019-01-10", "budget": 5000 },
			{ "name": "System Integration", "startDate": "2019-01-05", "endDate": "2019-01-10", "budget": 4000 }
		]
	}, {
		"id": 2,
		"name": "Stage 2) Design",
		"budget": 12000,
		"tasks": [
			{ "name": "UX", "startDate": "2019-01-15", "endDate": "2019-01-30", "budget": 3000 },
			{ "name": "UI", "startDate": "2019-02-01", "endDate": "2019-02-10", "budget": 3000 },
			{ "name": "Software Architecture", "startDate": "2019-01-20", "endDate": "2019-01-30", "budget": 6000 }
		]
	}
	]
}

Tasks

• initialize the project with npm
• ignore node_modules folder from the repository
• commit your lockfile
• structure your commits
• create a static html page
• choose your dependencies wisely
• load the json data from the element and render the stages and task timelines.
• display one row per stage and one line per task
• include a description how to build the project and run the tests