96h Ognomy MVP Web Portal Integration Challenge

CHALLENGE OBJECTIVES

• Integrate the prototype with backend API to make our Ognomy Telemed web portal functional.

 
PROJECT BACKGROUND

• We are building an MVP of a mobile app that allows patients to schedule and participate in teleconsultations on their mobile device, and of a web app that allows doctors to view teleconsult schedules and participate in teleconsults from a desktop device.
• This MVP is the 1st phase of a bigger project, both the mobile app and the web app have a much bigger scope to be done later.
• For the purpose of this challenge, we are focusing on the integration of the web app.

 
TECHNOLOGY STACK

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

 
API INTEGRATION
Right now the prototype is using local json data files, we need to get rid of these and integration the prototype with our backend API so it becomes fully functional.
 
There’s currently no way to create physicians from the UI, so they need to be inserted directly into the database.
 
SCREEN REQUIREMENTS
The following screens from the prototype must all be integrated with the API.
 
Login
This needs to be integrated with the login api and only physicians (providers) can login to the web portal.
 
View scheduled appointments

• After successful login, the user (physician) is redirected to this page. It needs to call the backend api to retrieve the appointments that belong to the user.
• Both upcoming and past appointments need to be shown.
• 5 minutes prior to an appointment, the video call icon will become enabled (disabled by default) and clicking it will lead to the Teleconsult screen described below.
• Ignore the Patients and Calendar icons on the left sidebar (i.e. these two are static icons for now and should be grayed out by default)
• The rightmost sidebar is also static for now (already implemented)
• Search and notifications on top right corner don’t need to work for now

 
Teleconsult

• For this page we only need to focus on the integration with Zoom SDK. Right now it hardcodes the logic to join an existing meeting. But instead we need to start a meeting on this page automatically and update the meeting id and password into the appointment through the backend API so that the mobile app will be able to pull the meeting id and password and join automatically. Please check https://marketplace.zoom.us/docs/sdk/native-sdks/web for details.
• The zoom meeting feature must be fully working.
• The Questionnaire section will stay as is and no integration is needed.
• The rightmost sidebar and all the icons at the bottom are static for now.

 
GENERAL REQUIREMENTS

• Must use ReactJS and follow the UI in prototype.
• 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 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 per prototype
• Show loading spinners when populating data from API / local JSON to UI
• Implement validation errors (for example: login error as shown in the prototype)
• 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 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.
• 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.