Sahara - Digital Capability App Part2 UI Prototype Challenge

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.  

 

 Note to the developers, will offer $300 to the winner if the submission is above score 90 and have no major issues. And final fix is in scope in order to claim the bonus. 

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 prototype code.

 

SCREEN REQUIREMENTS

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

 

Important:

• The prototype must support internationalization, and please use meaningful keys in the translation file. 

• The prototype must be responsive, and we will provide desktop, tablet and phone designs respectively. Make sure when user adjusts the width of the browser, UI is adjusted accordingly, and when the UI can no longer fits into the width of the browser, make breakpoint changes. Horizontally scrollbar should NEVER be displayed at any point. 

• Bug fixes - you also need to do some bug fixes first

 

The following screens are in scope:

• Project Detail Page

• Requesting Manager Dashboard

• Dashboard Search

• Manager Projects Page

• Manager New/Edit Project Page

 

Project Detail Page (04-03 -> 04-07 pngs)

• It shows the project detail page, click the project from the other pages will navigate to this detail page

• Please have an API for the project details, and use the same JSON data as the projects page. 

• The project overview is shown on the left

• The project detail has 5 tabs:

  • Project Brief

    • Please show a Google Map to show the location

    • For the related skills, don’t show the “x” 

  • Project Timeline

    • Hover the mouse over the bar to show both start and end dates

  • Team Members

    • Send Email - deadlink

    • Message - deadlink

    • Related Skill - click the download arrow to show all user’s skills in a dropdown list

  • Agreement

    • User can accept or reject the agreements

    • Make sure the data in modals match the current project data.

  • Support Documents

    • Shows a list documents, the icons are related to document types. 

 

Requesting Manager Dashboard (06-00 -> 06-03 pngs)

• The dashboard for the requesting manager

• there should be 3 apis, one for skills overview, one for the skills data, and another one for the requests

• It has 4 tabs as below:

  • Internal Employees

  • External Employees

  • Add a new “ALL EMPLOYEES” tab - which has the same layout as internal or external employees, except that it shows all employees

  • Rename “OVERALL” to “OVERALL METRICS” tab

  • On each tab, user can scroll down to load next page

 

• It has 2 modes

  • Grid mode

  • List mode - follow the same style as the list mode of projects page

• settings - allows user to toggle two widgets:

  • Skills Overview

  • Projects

• Skill item - use as search base - use the skill data as search criteria and show the skill-set search result page

• Projects widget - view all - go to the projects page, the data should be loaded from the projects JSON. 

• Skills Overview widget 

• Notifications - you can show this as overlay

 

Dashboard Search (07-01 -> 07-08 pngs)

• Search employees by skills set, create an API to search employees

• Advanced Search panel - you can show this as overlay

• On the search results page, manager can add employee to specific project  

 

Manager Projects Page (08-00  png)

• Projects Overview widget

  • create an API to load project overview

• Projects list

  • create an API to load projects

  • + icon - deadlink

  • It has two modes: Grid and List, and when in list mode, put the create-new-project above the table. 

  • Manager can click any project to edit the project. 

  • User can add new project, the new project should be added into the projects JSON

  • User can scroll down to load more projects

• Project Assistant Widget

  • create an API to load suggested employees

 

Manager New/Edit Project Page (08-01 - 08-07):

• The changes should be saved to projects JSON

• Project Brief Step

• Project Timeline Step

  • Manager can add or remove a task

  • Please add a delete icon at the end of each task

• Team Build Step

  • Rename “Request Team Member” to “ADD TEAM MEMBER”

  • User can click + icon to add recommended team member as team member

• Agreement Step

  • Manager can drag the agreement template and drop in agreement to open it 

  • Manager can approve the project

• Support Documents Step

  • Manager can upload multiple support documents

  • Manager can remove any support document

  • Submit Project Request - it will POST the projects to add or update the project

  • After the project is submitted, show the Line Manager Approval modal to send emails to line managers. 

 

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 .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, and create smaller compoents. 

 

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