Ognomy MVP Mobile App React Native UI Challenge

CHALLENGE OBJECTIVES

• Build a minimal UI for the Ognomy mobile app.

 
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 building the UI of the mobile app.

 
TECHNOLOGY STACK

• React Native
• Redux
• HTML5
• Javascript
• CSS
• iOS

 
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.
 
BASE CODE
We have a base project with Zoom integration (PoC) done, we’d like you to use that as a base to build the screens in scope. Please do whatever cleanup (like project renaming to Ognomy) as you see fit but keep the Zoom functionality working.
 
SCREEN REQUIREMENTS
The following screens from the design are in scope of this challenge. We’ll provide design source file and the marvelapp link in the forum.
 
Splash

• It starts from this screen https://marvelapp.com/4bj69jd/screen/59011485
• Then this: https://marvelapp.com/4bj69jd/screen/59011487
• New Patient will trigger the Signup screen
• Existing Patient and Log in will trigger the Login screen
• Ignore Other for now

Signup

• Signup will be done with some adjustments to the design:
  • Step 1: Use https://marvelapp.com/4bj69jd/screen/59104806 as base, remove the two password inputs and change the Create Account button to Send Verification Code button, the button is only enabled after a valid email address is provided
  • Step 2: Show https://marvelapp.com/4bj69jd/screen/63567169 and add a big green button that says Next to the bottom of the screen.
  • Step 3: Show https://marvelapp.com/4bj69jd/screen/59104805 and an input to enter the verification code right below the Email input.
• After user clicks Create Account, navigate to login screen.

 
Login

• Follow this design for login: https://marvelapp.com/4bj69jd/screen/63567174
• Ignore Forgot Password for now.

 
Scheduling w/ Nylas

• On successful login, user will see this screen: https://marvelapp.com/4bj69jd/screen/59011477
  • On this screen all of the icons can be static except for Appointments
• On clicking Appointments, if the user had no sessions before, the following flow should be executed:
  • https://marvelapp.com/4bj69jd/screen/64488980
  • https://marvelapp.com/4bj69jd/screen/64488981
  • https://marvelapp.com/4bj69jd/screen/59011482
  • https://marvelapp.com/4bj69jd/screen/59011475
  • https://marvelapp.com/4bj69jd/screen/59011476
  • https://marvelapp.com/4bj69jd/screen/59104969: note for this screen we don’t need the ADD TO YOUR CALENDAR section.
• If the user had sessions before, show this screen instead:
  • https://marvelapp.com/4bj69jd/screen/59443992
    • The text “No upcoming appointments” should be shown if there’s no upcoming appointments
    • Add a “Schedule an appointment” button at the bottom which when clicked, will navigate to the Schedule screen mentioned above
  • If the meeting is ready (i.e. the host has started it), the user should see a Join Call button to join the call. Since the base code already supports this, let’s just navigate to the current screen in the base code when the button is called, so that we can still test the feature. Please update the existing screen to have a back button to go back to this screen though.

 
Telemedicine consult w/ Zoom

• When the user joins the call (already done in the base code), show the actual Zoom call screen.
• When the call ends, the app will navigate back to the Appointments screen, and the appointment will now show in past appointments.

 
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 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 .js extension for React components; using PascalCase for filenames. E.g., ComponentName/index.js.
• 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.

 
OS REQUIREMENTS

• iOS 13+ / iPhones 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.