48h Ognomy Phase 2 Web Portal - Patients View

CHALLENGE OBJECTIVES

• Implement the Patients View in the existing Ognomy web app and integrate the view with existing backend API.
• Two unique screens are in scope of this challenge.

 
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 to view teleconsult schedules and participate in teleconsults from a desktop device.
• In this phase (phase 2) we are adding new features to both the web app and mobile app.
• For the purpose of this challenge, we are focusing on the implementation of the web app.

 
TECHNOLOGY STACK

• ReactJS Latest (v16)
• Redux
• HTML5
• Javascript
• CSS
• REST
• Node.js
• MongoDB
• Nylas
• Zoom SDK

 
API INTEGRATION
We’ll provide the API that needs to be integrated in this challenge, in summary it will involve the following:

• Get a list of patients, including search, sort and pagination
• View patient details
• List patient forms, including viewing the images
• Update patient forms (approve / reject)

Please note existing features must not be broken in this challenge.
 
DETAILED REQUIREMENTS
You need to build the UI for the following screens and integrate them with the backend API.
 
Patients List
Clicking the Patients icon on the side bar should navigate to this screen (link to design provided in the forum):

• The sidebar on the right side is static.
• Notifications don't need to work.
• Search must work so doctors can quickly find a patient.
• Similar to the Home screen, we also need to show the 9-digit Patient ID for patients even though it's missing from design.
• Should be able to go to the next / previous page of recent patients.
• Should be able to load more patients into the view.
• Should be able to sort patients by Name / ID / Registration time

 
Patient Details
When a patient is clicked, the details view should be shown (link to design provided in the forum):

• Hide the search and notifications icon on this page.
• The right sidebar (notes) section is static.
• Change the title from "Required Items" to the patient's name
• Hide the edit icons
• Personal / Insurance / Payment sections need to show the same info that the app is showing, there could be multiple insurance / credit cards
  • For insurance info, we need to have two links per card showing the front and back images of the card
• Medical Questionnaire section will say "Coming soon" for now
• For the patient form section, the presentation will be different from design since we will have multiple images per Form in the backend, we should have a list of links per Form to show the images for each form
  • There should be an Approve button for each form instead of one for all the forms, clicking the Approve button should change the status to approved.
  • For each form, add another Reject button (in red color), clicking Reject will require the admin to enter a reason and then mark the status as rejected.

 
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
• 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+, Edge Latest, 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.