Challenge Overview
Note - This challenge has a shorter submission phase (96 hours), review phase (24 hours) and appeals phase (12 hours).
The Role-Based Curriculum App (RBC App) is a tool created to automate the processes of role-based curriculum checklist management. The Role-Based Curriculum App is utilized to track the overall proficiency and capabilities of associates to perform role-based tasks.
We’ve recently completed the wireframe challenge for this application. You can see the wireframe challenge spec here to understand the application better. While we did not have a formal design for this app, we have prepared a detailed style guide which should be applied to the wireframes to build out the pages for this app.
The style guide was used in the last challenge which aimed at building the mentor and trainee related pages based on the provided wireframes.
The code from the last challenge is in our frontend Gitlab project & uses the following technologies
- Angular 4.0
- Angular CLI 1.5.0
- Twitter Bootstrap 4
- RXJS 5.5.2
As part of this challenge, we want to implement AngularJS pages for
-
Wireframe screens for admin role and
-
make some fixes to existing pages for mentor & trainee role
Provided Artefacts
- Wireframes
- Style Guide
- Angular Frontend Project
Scope
-
In this challenge, you need to implement the following Angular pages for the corresponding wireframe screens for admin role
Please note the wireframe is interactive, so here we will list the pages in scope with some notes, if you have any questions please post in the forums. Most of the components used on these pages are already built in the previous challenge - you should be able to reuse them:
-
Login (Common for Trainee, Mentor, Admin)
-
Admin Checklist Management
-
Admin Checklist Details (Active)
-
Admin Checklist Details (Inactive)
-
Admin - Add Checklist
-
Admin - Edit Checklist
-
Admin - Copy Checklist
-
-
Admin Heatmap Customization
-
Admin - Preview Heatmap
-
-
Admin User Management
-
Admin - User Details (Active)
-
Admin - User Details (Inactive)
-
Admin - Add User
-
Admin - Edit User
-
-
Admin Team Management
-
Admin - Team Details (Active)
-
Admin - Team Details (Inactive)
-
Admin - Add Team
-
Admin - Edit Team
-
-
Admin Score Management
-
Admin Edit Score
-
-
Admin Score Responses Customization
-
Admin Import
-
Admin View as Alias
-
Admin Impersonation
-
-
Admin Word Search Results
B) The client had made some changes to the wireframes for mentor and trainee roles. So, we need to update the pages for these roles based on the changes by client. A slide deck is attached in the forums with the list of these changes that need to be made.
GENERAL REQUIREMENTS:
- Use JSON files for mock data, it will be replaced with API at a later stage. See the existing JSON files
- You are expected to use the existing project from our Gitlab repo as the baseline code
- You must use Bootstrap framework.
- Use the provided angular app scripts and folder structure in this challenge. Note that the skeleton structures refers to Angular 5 but you are required to use Angular 4
- Update the README file for how to build, configure, and deploy the app.
- Most of the pages consist of tables, tabs, and forms, you can find similar design styling for these in the existing prototype/design, simply reuse the styling, if there is a style that you cannot easily produce please post in forums and we will give you support.
- User login, and all pages data must be loaded from mocked JSON data files.
- The flow/navigation between pages must be implemented.
- Use NPM or Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- Use SCSS for CSS Pre-Processor
- Follow wireframe, if buttons don't have any action, they should be dead link, otherwise, follow the flow as in the wireframe for that button.
CLIENT PRIORITIES (THE ITEMS THAT ARE CONSIDERED HIGHEST PROTOTYPE PRIORITIES)
- Creating quality and efficient AngularJS 4.0 app that works in all the requested browsers.
- Matching the provided wireframes (as close as possible) across the required browsers.
- Best Practice AngularJS 4.0 code
CODE REQUIREMENTS
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
SCSS (CSS3)
- Provide comments on the SCSS code. We need SCSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION so developers can follow the code.
- All naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
JAVASCRIPT
- Angular 4.0 is a must, don't use JQuery.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Final Submission Guidelines
- Zipped Source Code- Deployment guide with configuration & deployment instructions
- Demo video (unlisted on YouTube)