Challenge Overview
CHALLENGE OBJECTIVES
PROJECT BACKGROUND
TECHNOLOGY STACK
API INTEGRATION
Existing screens in the base code were already integrated with the API and these must NOT be broken, otherwise it will be considered a major requirement issue in the scorecard.
API for the new screens is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from local 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 in the near future.
You must not hardcode any test data into the code.
BASE CODE
We’ll provide the base code which implemented an MVP version of the app, in the base code the following features are already working and please make sure they are not broken by introducing the new screens:
SCREEN REQUIREMENTS
The following screens from the design are in scope of this challenge. We’ll provide the design source file and the marvelapp password in the forum.
Me Screens
Appointment Screens
GENERAL REQUIREMENTS
CODE REQUIREMENTS
JAVASCRIPT REQUIREMENTS
LICENSES & ATTRIBUTION
OS REQUIREMENTS
- Add some new screens to the existing Ognomy mobile app.
- This challenge is UI only, there’s no need to integrate with backend API. But existing screens were already integrated and these must not be broken.
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.
- We have finished phase 1 (MVP) of the project and in phase 2 we are going to add more screens and features to the app.
TECHNOLOGY STACK
- React Native
- Redux
- HTML5
- Javascript
- CSS
- REST
- iOS
- Android
API INTEGRATION
Existing screens in the base code were already integrated with the API and these must NOT be broken, otherwise it will be considered a major requirement issue in the scorecard.
API for the new screens is not ready yet, you need to implement all actions/services required to fetch the data showing in the app from local 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 in the near future.
You must not hardcode any test data into the code.
BASE CODE
We’ll provide the base code which implemented an MVP version of the app, in the base code the following features are already working and please make sure they are not broken by introducing the new screens:
- Sign up (iOS / Android)
- Login (iOS / Android)
- Schedule an appointment (iOS / Android)
- Join a meeting (via Zoom SDK / iOS only)
SCREEN REQUIREMENTS
The following screens from the design are in scope of this challenge. We’ll provide the design source file and the marvelapp password in the forum.
Me Screens
- My Info
- Tap “Edit Info”, the edit screen needs should show up
- The edit screen needs needs to be implemented
- Updated info should be shown on the My Info screen on save
- Insurance Info
- Tapping the edit icon should show the Edit Insurance Info screen with data pre-populated, and this screen needs to be implemented. The design only shows a few fields, but we need all the following fields:
- Insurance carrier - text input, cannot be empty after trimming leading and trailing spaces
- Plan number - text input, cannot be empty after trimming leading and trailing spaces
- Insured's name - text input, cannot be empty after trimming leading and trailing spaces
- Insured's identification number - text input, cannot be empty after trimming leading and trailing spaces
- Effective date of coverage - date picker
- Patient's name - text input, cannot be empty after trimming leading and trailing spaces
- Patient's relationship to the insured - dropdown with values: Parent, Child, Spouse, Other
- Patient's date of birth - date picker
- Tapping the delete icon should delete the insurance info
- Tapping “Enter New Card” should show the Add Insurance Info screen with no pre-populated data, same requirements as the Edit Insurance Info screen. New info should be shown on the Insurance Info screen on save.
- Tapping the edit icon should show the Edit Insurance Info screen with data pre-populated, and this screen needs to be implemented. The design only shows a few fields, but we need all the following fields:
- Payment Info
- Tapping the edit icon should show the Edit Credit Card screen with pre-populated data.
- Tapping the delete icon should delete the card info
- Tapping “Enter New Card” should show the Add Credit Card screen with no pre-populated data. New info should be shown on the Insurance Info screen on save. The following two screens show cases of invalid card number and valid number:
- Invalid Card
- Valid Card
- Please note the design used wrong title of “Edit”, that needs to be fixed in code.
- Tapping Payment History button will show the Payment History screen which needs to be implemented in this challenge
- Remove the share icon on this screen for now
- Tapping “Request Prescription” brings up 03F
- ‘Request’ items: these buttons should be replaced with "Coming Soon" and a note to call 1-800-123-4567. We should make the phone number a hotlink to the actual phone app to call out.
- “Help” should bring up screen 06
- Tapping “My Progress” will navigate to screen 02A which needs to be implemented in this challenge. Please note that tapping “My Progress” from the home screen should also enter this My Progress screen. The following screens from design are all in scope but most of them are basically the same screen with different data:
- Screen 02A
- Screen 02B
- Screen 02C
- Screen 02D
- Screen 02E
- Screen 02F
- Screen 02G
- Remove the Share your achievement button for now.
- Screen 02H
Appointment Screens
- Screen 22
- After user logins in, if we find out the user had never scheduled any appointment before, this screen should be shown
- Screen 14: this screen already exists but needs some updates
- Right now we have a “Join Call” button which is hardly noticeable and requires users to go back to home screen and re-enter to activate. We need to remove the button, and make the whole card a hot link showing in a different color so it’s obvious to the users
- The screen needs to auto check whether appointments is ready instead of requiring the users to back to home screen and re-enter
- Right now clicking the button will directly join the meeting, we need to change that so when clicked, it shows the waiting room screen instead, we’ll implement this screen with a few changes:
- Remove the “WHILE YOUR ARE WAITING” section at the bottom
- Add a “Submit Payment” button which leads to the payment popup and a message below the button that says “You must complete the payment before you can join the call”. On the popup:
- Tapping “Use Credit Card On File” will simply show a loading indicator to simulate the payment process
- Tapping “Enter new payment information” will navigate the user to the Payment Info screen on Me screen
- When payment is submitted, hide the “Submit Payment” button and the message, and show a “Enter Call” button instead, and tapping this button will join the meeting
- Screen 30A
- After the meeting ends, show this screen some changes to design (see this). The message should be “Thank you for your visit, we hope you enjoyed your teleconsult experience. The office will be in contact with you regarding next steps.” The Continue button at the bottom that will go to Screen 30C
- On screen 30C, remove the summary texts from the top and chat components from the bottom of the screen, see this.
- Clicking the help icon on top right corner of screen 30C shows Screen 30D
GENERAL REQUIREMENTS
- Must follow the provided design unless changes are explicitly mentioned above.
- The UI must work on all mainstream screen sizes (both iOS and Android).
- Show loading spinners when populating data from API / local JSON to UI
- Implement validation errors (for example: invalid input on login / signup screen)
- 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.
- Please include a brief description of your solution for how Sheepa tracks progress from screen 16.
CODE REQUIREMENTS
- ES6 syntax is preferred, as Babel has been setup to handle transpiling the syntax to the current JavaScript standard.
- Follow the existing coding convention and standards in the base code.
- Ensure that there are no lint errors.
- 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.
OS REQUIREMENTS
- iOS 13+ (iPhones in portrait mode only)
- Android 8+ (phones in portrait mode only)
Final Submission Guidelines
- Full code that covers all the requirements.
- A detailed README file including information on how to setup and run your application.