This challenge aims to explore how different UI frameworks/libraries/architectures handle some complexities often present in larger apps (*), while at the same time only requiring the implementation of a reasonably small, self contained, and almost useful app. (* e.g. many parts of the app dealing with the same data, enforcing constraints)
The challenge is to build a competence tracker for the HR department of a small company. The task is outlined as a list of successive steps, to allow coherent partial implementations. The steps are:
-
Display an employee. The employee has a name. This is the employee view. The UI for the following steps can be implemented in it unless otherwise indicated.
-
Allow editing an employee's name.
-
Keep track of years of experience (non-negative integer). Allow editing this.
-
Allow adding and removing competences for an employee. A competence is represented by a string, max length 42 characters (as defined by your framework's best practices or you). Display competences as a list in the employee view.
-
Keep track of years of experience for each competence. Require positive interger, default to one. Allow editing through a number input field.
-
Do not allow more years of experience in a competence than the employee's overall years of experience. Do not allow adding new competences if that would break this constraint.
-
Do not allow higher total of experience for an employee's competences than MAX_SIMULTANEOUS_COMPETENCES times the employee's overall years of experience. This constraint is referred to as the simultaneous competences constraint in what follows. Set MAX_SIMULTANEOUS_COMPETENCES = 3.
-
Create an employee list view. Display the employee in it as a list item. Allow navigation between the employee list view and the employee view.
-
From the employee list view, allow adding a new employee, in a view that resembles the employee view, but requires an explicit save at the end. Default name to empty and years of experience to zero until edited. Require that name is made non-empty before saving.
-
Allow cancelling in the add new employee view.
-
In the employees list, for each employee, display the three competences with the most experience (or fewer if the employee doesn't have three competences listed)
-
In the employee view, allow incrementing / decrementing years of experience for a competence with plus and minus buttons in addition to the number input field.
-
When adding a new competence, display an autofill option based on competences added to other employees but not present for this one.
-
Create an admin view, which displays MAX_SIMULTANEOUS_COMPETENCES.
-
Make MAX_SIMULTANEOUS_COMPETENCES editable in the admin view. Display an informational note on the employee view and an indicator (icon or similar) in the employee list view for each employee whose competences now break the simultaneous competences constraint. For these users, disallow increasing competence experience, decreasing overall experience, and adding new competences, but allow decreasing competence experience, removing competences, and increasing overall experience.
-
In the admin view, display a list of employees whose competence record breaks the simultaneous competences constraint. Allow navigating to the employee view of these employees from the admin view.
-
In the employee list view, allow searching by parts of employee name and competence.
-
In the search in the employee list view, display an autofill based on input and existing competences.
-
Create an audit view, accessible from the admin view, that lists all name changes done in the system
-
Whenever an input field has input focus and contains a value that won't be successfully saved according to the rules above, display a validation error below it, describing the problem. If focus leaves the field in this situation, the value should revert back to what it was before the field gained focus.
- Implement authentication, only allowing the admin view access to some users.