- Code Quality
- How you write tests
- How you structure your commits
- How you communicate during the task
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.
<div id="flowchart" data-project="{…}" …></div>
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
{
"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 }
]
}
]
}
- 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