Odyssey MB ReactNative Prototype - Security & Dashboard 1

CHALLENGE OBJECTIVES

• Build the mobile app prototype for the security and dashboard modules using ReactNative.

• Please note this is just part 1 of the prototype and we have a lot more to come soon.

PROJECT BACKGROUND

• We believe that our customers have more important things to do than wrestle with complex products or spend valuable time administering their banking arrangements. We recognize that professional and personal lives often overlap and our mission is to help empower our customers to achieve their ambitions by serving all their banking needs.

• Banking customers are looking for a bank that can help them make their deal happen in an efficient, secure, fast, and flexible way as much as it can.

• We understand different people want different things from "Relationship management"

• We expect a counter-trend of “committed” relationships as customers react to digitization in our services.

• Our goal in this project is to create strong direct relationships with our customers. We want to provide everything - a blended bank, preferential banking for their family, and open to non-banking services via our digital app (Responsive Web App and Mobile Hybrid App)

TECHNOLOGY STACK

• React Native

• Redux

• Bootstrap

• HTML5

• CSS3

• Material UI for icons / form validator / etc.

• Axios for API integration

• Typescript

• JSON

• Router

• iOS

• Android

CODE QUALITY

You must take code quality into consideration, for example, you should create components for reusable UI / features instead of copying and pasting the same code everywhere. This is considered a major requirement in the scorecard during the review.

API INTEGRATION

We don’t have the API ready yet but please make sure you don’t hardcode any data, instead please create local JSON files and use these as data sources for the new pages. You should create local services to get data from the JSON files and properly implement state management using Redux.

DEVICE SUPPORT

The mobile app will need to support both phone screens (portrait mode only) and tablet screens (landscape mode only).

This challenge will only cover the phone screens but you should keep the requirement of tablet support in mind and make your code as reusable and as easy to extend as possible.

SCREEN REQUIREMENTS

In general, please implement all the screens mentioned below, and make sure you cover all the details from design.

• Introduction Screens

  • When the app is launched for the first time, the introduction screens should be shown, please check the “M - 01” screens for detailed design

  • The user can choose to skip the instruction screens

• Login Screen

  • After the introduction screens (or for existing users who had opened the app before), the login screen is shown, see M - 02 - 1.png for detailed design

• Registration Screen

  • Please check all the “M - 02” screens for the detailed flow of registration

  • All the “M - 02” screens are in scope

  • All the details including validation rules and validation errors must be properly implemented

• Set up Biometrics Screen

  • For the first time successful login, we need to ask the user to set up additional login methods which include:

    • Face ID

    • Touch ID

    • Secure PIN

  • Please note all biometric related UI and screens should only be shown if the device supports the capability (for example touch id or face id)

  • Please follow the “M - 03” and “M - 04” screens to implement the biometrics screens

  • The user can choose to Skip setting up such login methods

  • The cases of failed or successful login must be implemented

  • Please ignore the screens “M - 03 - 9B” and “M - 03 - 9C” since we are going to use the device built-in Face ID. Similarly, ignore screens “M - 04 - 6B.png” and “M - 04 - 6C.png” since we’ll the device built-in Touch ID

  • After a successful login, the user will land on the dashboard screen: “M - 03 - 11.png”

    • Please note the user always lands on the dashboard screen after login (either by username / password, Touch ID, Face ID, or Secure PIN)

    • Please note a toast message is shown after certain operations (like login) and that should be implemented, the toast message should automatically disappear after a few seconds

• Set up Secure PIN Screen

  • Please follow the “M - 05” screens to implement the secure PIN set up flow

• Recurring Login Screen

  • For recurring users they’ll see a slightly different login screen compared to first time users, see “M - 06 - 2.png” for details

  • The “M - 06” screens only demonstrated the Face ID based login, but you should implement both Touch ID and Secure PIN login as well:

    • Touch ID login will be very similar to Face ID, except it will show the fingerprint logo instead

    • Secure PIN login will ask the user to enter the secure digits (using the similar ones you implemented above for setting up Secure PIN

  • Please note that depending on which of the options were set up, at most one of these options will show. And if the user didn’t set up any of the options, the default login screen should be shown (M - 02 - 2A.png)

• Reset Passcode

  • Please check the “M - 07” screens to implement the reset passcode flow

  • Make sure you properly implement the passcode rules (including the strong passcode rules, and passcode matching)

  • Make sure you implement the toast of successful resetting passcode

• Customer Dashboard Screen

  • Please implement a basic version of the dashboard for now: M - 06 - 8.png

    • Make sure the Most active accounts, Quick actions, and Relationship manager sections can be collapsed or expanded

    • Make sure the Recent transactions section is scrollable to show more rows

• Other screens

  • Any other screens not mentioned above are out of the scope of this challenge

GENERAL REQUIREMENTS

• Please check the document ReactNative-ApplicationStructuring-110920-1646.pdf carefully and follow the guidelines and requirements in the document.

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

• You are expected to create a detailed README file including information on how to set up, run, and verify your application.

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up 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 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

• Licenses to be followed in development:

  • Apache License 2.0

  • MIT License

  • Common Development and Distribution License

  • Eclipse Public License version 2.0

• 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

• iOS 10+ (iPhones in portrait mode only)

• Android 5+ (phones in portrait mode only)

Final Submission Guidelines

FINAL DELIVERABLES

• Full code that covers all the requirements.

• A detailed README file including information on how to set up, run, and verify your application.