72h Ognomy MVP Web Portal UI Prototype Challenge

CHALLENGE OBJECTIVES

• Build a minimal desktop prototype for the Ognomy Telemed web portal.

 
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 prototype of the web app.

 
TECHNOLOGY STACK

• ReactJS Latest (v16)
• Redux
• HTML5
• Javascript
• CSS

 
API INTEGRATION
Although the API is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from JSON files and storing the data in the Redux store. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
 
You must not hardcode any test data into the code.
 
SCREEN REQUIREMENTS
The following screens from the design are in scope of this challenge. We’ll provide design source file in the forum.
 
Login
This will be a simple login page without user sign up or forget password features. Assume users are pre-registered in the backend and they will use this page to login to the web portal.
 
We’ll simply reuse the design from the mobile app login screen (Design Files / Patient / 01 New Patient / 03D Create Account) and make the following changes:

• Make it larger to work with desktop.
• Remove the Back menu on top left corner
• Remove the texts “We bring the doctor’s office to you” and “Almost there”
• Remove “Forgot Password” at the bottom

 
View scheduled appointments

• After successful login, the user (physician) is redirected to this page: Design Files / Desktop Revised Flow / Physician Flow / 01 Physician - Home
• 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 (but do implement it as shown in design)
• Search and notifications on top right corner don’t need to work for now
• The Upcoming Session section needs to work with dynamic data.
• The Recent Sessions section needs to work with dynamic data. However just the list needs to be dynamically populated, Session Summary doesn’t need to work for now.
• 1 minute prior to a session, the video call icon will become enabled (disabled by default) and clicking it will lead to the Teleconsult screen described below.

 
Teleconsult

• This is the design of the page: Design Files / Desktop Revised Flow / Physician Flow / 04A Consultation Sessions
• The Questionnaire section should be populated dynamically and the user should be able to enter an answer for each question.
• The rightmost sidebar and all the icons at the bottom are static for now.
• The middle section showing the video call should be a real control from Zoom SDK, check https://marketplace.zoom.us/docs/sdk/native-sdks/web for details.

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