TELUS - ReactJS Prortotype Challenge

Challenge Objectives

• Build the prototype for Telus using ReactJS.

 

Project Background

• TELUS is a national telecommunications company in Canada that provides a wide range of telecommunications products and services including internet access, voice, entertainment, healthcare, video, and IPTV television.

• The source will be data files: CSV, TSV, XLS, or XLSX 

• The data can contain more than 10.000 rows of information. In order to serve larger datasets while maintaining responsiveness, the solution should split data into chunks and display an efficient number of rows at a time to ensure responsive interaction within the tool. 

• The validation process is to verify the validity of the data and only involves downvoting, upvoting, and adding comments or observations per row.

• Multiple users work at the same time on the same data source.

 

Technology Stack

• React.js latest

• HTML5

• Javascript

• CSS

 

User Roles

There are two roles in this application.

• Data Validator

• Admin

 

Internationalization

User can switch between English and French on the UI. In the prototype, you can provide mockup translation for French. 

 

API Integration

Although the API is not ready yet, you need to implement local controllers/services to fetch the data showing in the app from local JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable. This is evaluated as a major requirement.

 

General UI Requirements

• You are expected to build the prototype following the provided design unless otherwise specified.

• ReactJS must be used, and browser compatibility requirements must be covered.

• The UI should be fluid and generally responsive to different screen sizes (desktop only, but need to support smaller size laptop screens). 

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.

• Do NOT use global z-indexes.

• No errors with production build.

• Must pass standard lint and NPM audit.

• A loading indicator must be shown when simulating API calls to the backend.

• The data to be displayed must come from local JSON files and cannot be hardcoded.

• The pages should clearly indicate invalid input as shown in the design.

• Must follow ReactJS best coding practices. Use hooks and functional components. 

• These will be considered as major requirements.

 

Screen Requirements

Below is the list of screens that are supposed to be implemented in the challenge. Please cross-compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification/confirmation.

https://marvelapp.com/prototype/50h0a5b/screens (all screens are in scope). 

 

Login (01_1_Login)

 

Please implement login for the two mentioned roles above. Please implement validation on this page (wrong credentials for example).

• EN / FR in header - switch to the corresponding language, this is common for all screens. 

• Login button - goes to the dashboard

• Email ID should be validated as per standard email regex

 

Everything else on the page can be static.

Dashboard (02_1_Dashboard - 02_2_Dashboard)

 

It’s the dashboard for the currently logged-in data validation user. 

• Header:

  • Notifications - click it goes to the Notifications screen. The number of unread notifications is displayed. 

• Top Banner:

  • “You have a task due in 12h” -  The task can be due in the next couple hours or minutes, click it goes to the task details screen. 

  • The task counts of corresponding statuses are displayed here. 

• Main Area

  • Search icon - click it to expand it into a search input, and user can enter text to filter the tasks by name

  • Click “All”, “In Progress”, “Ready for Review” and “Reviewed”, the grid is updated to load tasks of corresponding status. 

  • File format icons - deadlinks

  • Grid / List mode icons - only Grid mode is needed for now

  • Load More button - load the next page of tasks

  • Task Grid Item

    • Reviewed items are completed

    • For in-progress item, shows the validation progress

    • For both in-progress and ready-to-review items, show the due date, and if it’s > 7 days (make it configurable), show the date in MM/dd/yy hh:mm a format, otherwise, show how many days/hours/minutes left. Show it in red if it’s due in next 2 days (make it configurable). 

  • Click any task goes to the task details screen

 

Task Details (03_1_Data-Validation - 03_13_Data-Validation)

 

This is the page where data validation user can validate the data in the task. 

• Back button - goes to the dashboard

• Keyboard Shortcuts - shows the Keyboard shortcuts panel

• Left panel - it can be collapsed. 

• The table on the right shows the rows to be validated. 

  • Both table data and table columns are dynamic, they should be loaded from the JSON file. 

  • User can click the “All”, “Voted” and “Unvoted” buttons above the table to show corresponding rows in the table. 

  • User can select many rows or select all rows on the current page, and then do bulk upvote and downvote. 

  • User can reorder the columns and show/hide specific columns. The column settings should be saved locally for the task (in local storage). 

  • User can open the comments panel for a specific row and add new comment

  • User can upvote or downvote a specific row

  • User can apply filter to each column 

  • After the user validates all the rows, show a popup to guide user to validate the other in-progress tasks

 

Notifications (04_1_Notifications)

 

This page lists all the notifications for the currently logged-in user. 

• Click Load More to load the next page. 

• The unread notification is highlighted, user can click it to mark it as read

• Click the view-details of the notification goes to the task details screen

Dashboard for Admin (06_1, 07_1 - 07_5)

 

It’s the dashboard page admin. 

• Upload File Button

  • Click it to open the upload file dialog, it’s used to create a new task

• Table Area

• Search icon - click it to expand it into a search input, and user can enter text to filter the tasks by name

• Click “All”, “Not Assigned”, “Assigned” and “Done”, the grid is updated to load tasks of corresponding status. 

• File format icons - deadlinks

• Grid / List mode icons - only Grid mode is needed for now

• Load More button - load the next page of tasks

• Click any task goes to the task details screen

• Hover the mouse over the task shows the Delete icon, click it to show the Delete confirmation icon

 

Task Details Screen for Admin (05_1 - 05_5)

Admin can assign the task to various data validators on this screen. 

• Admin can click “All”, “Assigned” and “Unassigned” buttons to filter the data validators. 

• For assigned data validator, the validation progress is also displayed

• Admin can assign task to one or more data validators at the same time with a deadline 

• Show filter - deadlink for now

HTML Requirements

• HTML should be valid HTML5 compliant.

• Provide comments on the page elements to give a 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.

 

Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all CSS so developers can follow the code.

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

• Ensure that there are no lint errors.

• All CSS naming should not have any conflicts.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Use CSS3 Media Queries to load different styles for each page and don't build different pages for different devices / layout.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.

• Make sure npm run build works without any errors.

 

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 or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our 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), Edge (Chromium based), Firefox

Mac: Safari (latest), Chrome (latest)

 

Documentation

Register to download the following documents we provided in the forum:

• Design Source File (in Sketch format)

 

What To Submit

• Code that covers all the requirements.

• A detailed README file including information on how to set up, run and verify your application.

Final Submission Guidelines

See above