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.
Note to reviewers
- It will have shorter review timeline and the maximum review payment is $150.
- The internalization, code best practice, and responsiveness are also major for this challenge.
Note to the developers, will offer $300 to the winner if the submission is above score 90 and have no major issues.
The following screens are in scope:
-
Login and Registration
-
Employee Dashboard
-
Employee Profile
-
Employee Requests
Login Pages (00-00 -> 00-02 pngs)
-
User can login as Internal or Contactor (External) user type.
-
The internal user can have Employee, Requesting Manager or Line Manager role, and external user will always have Employee role
-
Please create a test user for each user role / type to demonstrate the flow
-
After login. show the dashboard
Registration Pages (01-00 -> 01-02 pngs)
-
All inputs are required
-
Steps:
-
step-1: Personal Information
-
should allow user to browse a photo
-
-
step-2: Employee Information
-
step-3: Line Manager Information
-
step-4: Expertise
-
step-5: Educations - should allow user to add / remove the education level.
-
-
Registration complete - Change “Go to dashboard” to “Go to Login”
Forgot Password Pages (01-03 -> 01-07 pngs)
-
User can request forgot-password email on these pages
-
“Chat support” is a deadlink
Employee Dashboard Pages (02-00A -> 02-03 pngs)
-
The dashboard for the employee
-
Please create a separate API and JSON payload for each widget
-
It has following widgets, and user can turn them on/off in the settings
-
Profile Preview
-
Skill Improvement
-
it has a horizontal scrollbar if there are more items
-
-
Most Wanted Skills
-
view-all is deadlink
-
mini bar chart - show 6 bars always
-
-
Projects
-
view-all - nav to on-progress tab of projects page
-
-
Latest Ratings - user can use left or right arrow to move to previous or next rating
-
Skill Coach
-
Activities
-
view-all - deadlink
-
-
-
widgets toggle - let’s take a simple approach for now
-
if all widgets in a specific column are hidden, move all widgets on the right to the left.
-
if a single widget in a specific column is hidden, move all widgets in this column up to align at the top
-
Employee Profile Pages (03-00 -> 03-09 pngs)
-
Rename “Skills” as “Skills and Capabilities”, and remove “Capabilities” tab.
-
Please have 1 API for the profile widget section, and have separate APIs for the skills, trainings and certifications
-
It has following sections:
-
Profile
-
Internal Employee text - Display Contractor if the user is logged in as contractor. Display Requesting Manager or Line Manager depending upon user’s role as well.
-
Edit Profile - deadlink
-
-
Skills
-
The list on the right shows the skills the current user has. And the user is able to add, edit, delete or search skills
-
The … options menu has following actions:
-
Edit Skill - remove it
-
Edit Training - deadlink
-
Edit Certification - deadlink
-
Delete Skill - remove the skill
-
-
Search Skill to Add
-
When user types, show the search results in the popover modal
-
Then user can move the mouse over it to show skill’s detailed description.
-
Then user can click it to select it.
-
Finally user clicks the “Add Skill” button to add it.
-
View More Results - deadlink
-
-
User can select a skill in the skills list on the right, and then it’s displayed on the left
-
Add or Edit Skill
-
Show "Set Rating" always, and when clicked, the up/down arrows keys are displayed for the rating, and the "Set Rating" is changed to "Save Rating" and "Cancel" options. "Save Rating" is disabled initially, and after user changes the rating, it’s enabled, and user needs to click “Save Rating” to confirm the change.
-
Add Training - go to trainings tab
-
Add Certification - go to certification tab
-
-
-
-
Trainings
-
The list on the right shows the trainings the current user has taken.
-
User is able to add, edit, delete or search trainings
-
Search button - rename to “Add Training”, and it works in the same way as the Skills.
-
User can select a training in the list on the right, and then it’s displayed on the left
-
The … options menu has following actions:
-
Edit Training - show a similar modal as the add-certification modal
-
Delete Training - remove the training
-
-
-
Certifications
-
The list on the right shows the certifications the current user has
-
User is able to add, edit or delete certifications
-
Add Certification - show the add-certification modal to allow user to add a certification
-
User can select a certification in the list on the right, and then it’s displayed on the left
-
The … options menu has following actions:
-
Edit Certification - show a similar modal as the add-certification modal
-
Delete Certification - remove the certification
-
-
-
Available Traninings and Certifications
-
sign up - deadlink
-
Project Training and Certification modal
-
Send Project - just close the modal
-
-
Employee Project Pages (04-00 -> 04-02 pngs)
-
It shows the projects that the employee has access
-
Please have a sperate API for each widget, and have an API for the projects
-
The project overview and latest rating widgets are showing on the right.
-
It has 4 tabs:
-
All projects
-
On progress - only show projects that are on progress
-
pending approval - only show projects that are pending approval (by line manager)
-
completed - only show projects that are completed
-
On each tab, user can scroll down to load next page
-
-
It has 3 modes:
-
Grid mode
-
List mode
-
Filter mode - show the filter on the left side
-
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.
-
ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
-
Use .jsx 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.
-
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 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
-
The UI should be responsive, we will add support for Mobile and Tablets later.
Final Submission Guidelines
Submission Deliverable
-
Full code that covers all the requirements.
-
A detailed README file including information on how to setup and run your application.