Challenge Overview
CHALLENGE OBJECTIVES
-
Build the UI for the interoffice messaging feature.
PROJECT BACKGROUND
-
We are building a mobile app that allows patients to schedule and participate in teleconsultations on their mobile device, and a web app that allows doctors / admins / secretaries to view teleconsult schedules and participate in teleconsults from a desktop device.
-
In this phase we are planning to add a lot more features to the web app and update the mobile app with some new features.
TECHNOLOGY STACK
-
ReactJS
-
Redux
-
HTML5
-
Javascript
-
REST
-
JSON
CODE BASE
You need to work with the provided code base which is a functional web app integrated with backend. You are supposed to implement new pages for all the web app roles but NOT break any existing functions. This is considered a major requirement in the scorecard during review.
CODE QUALITY
You must take code quality into consideration, for example: you should create components for reusable UI / features instead of copying and pasting the same code everywhere. This is considered a major requirement in the scorecard during review.
API INTEGRATION
For the new pages, please make sure you don’t hardcode any data, instead please create local json files and use these as data sources for the new pages. You should create local services to get data from the JSON files and properly implement state management.
SCREEN REQUIREMENTS
Entry
Please add a new message icon to the top right corner of all pages as shown in design. The iconn needs to have a red dot when there are unread messages. And clicking it will show the popup menu with more actions.
Please note this feature is available to all the web app roles.
Messages List
The interoffice messages system is like a simplified version of emails, once you land on the messages screen you’ll see menu items like Inbox, Pending (drafts), Sent, Deleted, Archived, etc:
-
The Selected menu is not needed, please ignore that (and don’t implement that in the prototype)
-
Search messages
-
Select messages for deletion / archive
-
Click a message to view details
-
Click the 3-dot menu icon to Reply / Forward / Archive / Delete the message
-
Sort messages
-
Filter messages by priority level (1 - 9, 1 being the highest priority)
-
The table should support pagination
Note the newest messages should be shown on top.
Message Details
-
The details page will show all the details of the message, including sender, patient, recipients, attachments, and the body
-
From this page the user can go to the previous or next message
-
From this page the user can reply, forward, archive or delete the message
New Message
-
The user can compose a new message from the menu
-
On this page the user can specify the recipient (required), cc/bcc (optional), patient (optional), priority level (1-9, with 1 being the highest level; required, and defaults to level 9), subject (required) and body (required)
-
The body must support rich formatting, consider using a library like https://github.com/froala/react-froala-wysiwyg
-
The user must be able to attach documents to the message
-
The user can send, discard or save the message as draft
-
If the user tries to leave the page without saving the changes in any way, a warning should be shown to let the user confirm
-
Auto completion must be supported for fields like to, cc/bcc, patient
-
Alternatively the user should be able to pick from a list (either individuals or groups)
-
The list should support searching
Groups
-
The user can manage groups on this page, which includes creating new group, editing existing group, and deleting existing group
GENERAL REQUIREMENTS
-
Must use ReactJS and follow the provided design.
-
The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since the page can scroll).
-
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)
-
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
-
ES6 syntax is preferred, as Babel has been set up 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.
-
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.
-
You’re free to choose between CSS & SCSS but 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 ES6 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
Final Submission Guidelines
-
Full code that covers all the requirements.
-
A detailed README file including information on how to setup and run your application.