Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Overview

  • Build the responsive prototype for Sahara Digital Capability UI

 

Project background

This application will be used by various users “Staffs, Request Manager, Line Manager” - in this challenge we will working on screens for Staffs and Request Manager.

 

User Groups:

Staff: 

  • These are the skilled users who could be internal employees and external employees like vendors, contractors, etc..

  • These users will be able to manage their own skill sets, certifications, and training, they must be able to attach certifications and training.

 

Request Manager:

  • These are the users who will search for skills, teams based on job description and system provides staff matching the required skill set. 

  • The requestor chooses the team.

  • Creates the project under the project name. 

  • Captures the proposed agreement including the capacity required.

  • This will then be sent to the Line Manager for approval.

 

Line Manager:

  • The line manager has access to his staff only for line manager functionality. They must be able to review the employee’s proficiencies add their own proficiencies ratings.

  • The line managers must also be able to approve the project that was created for their employees.  

 

 

Technology Stack

  • ReactJS Latest (v16.12.0)

  • HTML5

  • Javascript

  • SCSS

 

UI Requirements

 

API INTEGRATION

Please use json-server to serve the mock data, and you should design the JSON data properly (e.g. create separate APIs for different groups of data on the UI), so that we can change to use real APIs easily later. 

 

You must not hardcode any test data into the code.

 

SCREEN REQUIREMENTS

We’ll provide design source file and the marvelapp link in the forum.

 

The prototype must support internationalization, and you should allow user to specify translation file for all static texts in front-end. 

 

The following screens are in scope:

  • Leaderboard

  • Rewards

  • Certification

  • Knowledge Repository

  • Line Manager Dashboard and Approve Rating page


Winner is required to merge the code into gitlab repo. 

 

Leaderboard (05-00 png)

  • It shows the leaderboard

  • all view-all are deadlink

  • there are 3 widgets, and there should be an API for each widget

    • Employee Leaderboard

    • Employee Awards

    • Top 5 Business Unit

  • When user changes the dropdown selection, reloads the data

 

Rewards (05-01 png)

  • It shows the rewards

  • Join Challenge - deadlink

  • Set Reminder - deadlink

  • View Past Challenges - deadlink

  • My Rewards - view all - deadlink

  • It has 3 parts, and each should have an API.

    • My Challenges Statistics

    • Main Content - user can scroll down to load more

    • My Rewards

  • When user changes the dropdown selection, reloads the data

 

Certification (09-01 - 09-02 png)

  • It shows the certification

  • It shows data in Grid and List modes

  • User can scroll down to load more data

  • User can filter in filter panel. The selected skills are displayed above the table. 

    • Skill Learn

    • Provider

    • Type Programs

 

Certification Detail (09-03 - 09-04 png)

  • It shows the certification detail

  • The anchors on the left side will scroll the page to specific section. 

    • Make sure each section is in its own component

 

Knowledge Repository (10-01 png)

  • It shows the knowlege repository

  • there are 3 sections on the UI, please create an API for each section

  • The articles, videos and audios are deadlink

  • click the view-all in help topics open the help-topics page

 

Help Topics (10-02 png)

  • It shows help topics

  • The topics and their contents should be loaded from API.

 

Line Manager Dashboard (06-05 pngs)

  • The dashboard for line manager

  • line manager can scroll down to load next page

  • It has 2 modes

    • Grid mode

    • List mode

  • settings - allows user to toggle 3 widgets:

    • Skills Overview

    • Projects

    • Reviews Needed

  • Employee item

    • Line manager can click it to view the employee profile

    • Line manager can add the employee to a team

    • Line manager can review the rating changes

 

Employee Profile Page for Line Manager (06 - 06)

  • The employee profile page displayed for line manager

  • It’s similar as the employee profile page above

  • Line manager can approve or reject the rating change

     

Note that the Line manager should be able to open the Projects page to view the projects and project details, as well as approve the agreement. 
Please update the code to demonstrate the following flows:
  • Request Manager creates a new project. 
  • Request Manager approves the terms in the new project. 
  • Line Manager opens the same project and approves it. 
  • Finally Employee opens the same project and approve or reject it. 
 

GENERAL REQUIREMENTS

  • Must use ReactJS and follow the provided design.

  • Searching / filtering should work whenever applicable.

  • Pagination should work whenever applicable.

  • Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).

  • Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

  • Show loading spinners when populating data from API / local JSON to UI

  • Implement validation errors (for example: login error as shown in design), and restrict user inputs based upon data type (for example, for a year input, user should only be allowed to input numbers). 

  • No linting errors

  • No errors with prod builds

  • You are expected to create a detailed README file including information on how to setup, run and verify your application.

 

CODE REQUIREMENTS

  • Functional component and React Hooks should be used. 

  • CSS Module must be used to ensure there is no conflict

  • ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.

  • Use .js extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.

  • propTypes should be defined for components, and defaultProps should be provided when necessary. You need to define types for the array item and inner objects too. 

  • Do not create a single .scss file for the whole app. Each component should have its own stylesheet file.

  • Ensure that there are no lint errors.

  • You should use SCSS and you need to use flex instead of float.

  • Follow a clean folder structure.

  • Create reusable components.

 

JAVASCRIPT REQUIREMENTS

  • All JavaScript must not have a copyright by a third party. 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.

  • Use typescript and linter for code quality

 

LICENSES & ATTRIBUTION

  • Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.

  • Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

BROWSER REQUIREMENTS

  • Windows: IE 11+, Chrome latest, Firefox latest

  • Mac: Safari Latest, Chrome Latest, Firefox Latest

  • Chrome browser on android phone/tables and Safari browser on iPhone and iPad



 

 



Final Submission Guidelines

Submission Deliverable

  • Patch file

  • Verification Guide

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30116001