96h Ognomy Phase 2 Mobile App Dark Theme Support

CHALLENGE OBJECTIVES

• Update an existing React Native mobile app to support the dark theme.
• This challenge is UI only, the code base was already fully integrated with the backend, you just need to update the UI and make sure no existing functionality is 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.
 
The base code fully works on iOS, and on Android only the part that involves video call is not working (to be done in the near future).
 
DETAILED REQUIREMENTS
The only requirement of this challenge is to provide a dark theme for all screens in the app:

• We have provided design for a few key screens and color coding for the dark theme, you need to consistently apply these to all screens in the base code.
• The app should automatically switch its theme based on the system settings (i.e. if system theme is light, then app theme is light; if system theme is dark then app theme should be dard as well).

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

 
CODE REQUIREMENTS

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