Odyssey MB ReactNative Prototype 3 - Account Dashboard 1

 

CHALLENGE OBJECTIVES

• Build the mobile app prototype for the account dashboard using ReactNative.

• Note this is just part 1 of the module, there’s more coming shortly.

 

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). For tablet support, you can reference the desktop web app design.

 

NOTE this is the MAJOR requirement of this challenge.

 

SCREEN REQUIREMENTS

• Menu & Header

  • Please update the existing menu pane to match with the new design, please note this menu can be expanded or collapsed (see mobile screen 4)

  • There should be a switch between individual and business accounts, this challenge will focus on the individual account but make sure the switch is implemented

  • The current Support menu should be renamed to Help and Support as shown in the new design, but keep the screen it opens unchanged.

  • Please update the header to match the new design, but features like notifications, logout, and so on should be kept

  • Implement the profile screen as per mobile screen 5

  • The Home page will be the current dashboard page

• Accounts & Loans (mobile screens 2 - 19, desktop screens 2 - 16)

  • There should be 3 filters right below the header: All accounts, Loan accounts and Closed accounts, these should filter what accounts to show below

  • Users should be able to scroll through different accounts horizontally, same for the cards

  • The sections should be expandable / collapsable

  • Based on the account type and status (Closed / Open), the sections shown below can be different. Make sure this logic is implemented based on JSON data

  • Closed accounts are shown with a darker background color, and the currently selected account has a different border

  • The chart on mobile screen 15 / desktop screen 15 should be functioning

• 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

• 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

• Full code that covers all the requirements.

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