Register
Submit a solution
The challenge is finished.

Challenge Overview

 

CHALLENGE OBJECTIVES

  • Build part 2 of the Account & Loans prototype

 

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) eventually. But in this challenge, we only need to consider portrait mode on phone screens.

 

SCREEN REQUIREMENTS

This challenge will implement the rest of the screens from the given marvel app design except for the ones showing accounts and below sections as merged (screen 9 for example). Here are some notes on some of the screens:

  • The number of screens seems huge but there are a lot of repeating screens and a majority of them were already implemented.

  • Update existing Account and Loans screens to match the design, which includes but is not limited to the following (compared with the design please and ask for clarification in the forum if anything is not clear):

    • The Manage Alerts menu should be moved from the main sidebar menu to the My Profile submenu

    • The Account Type filter should have these options (screen 33) and open accounts should show open accounts only (same for the other two):

      • Open accounts

      • Loan accounts

      • Closed accounts

    • The quick action icon needs to be implemented (scroll to the bottom of screen 8 and you’ll see a floating icon at the bottom right corner). Please note depending on the account/screen you are on, the actions can be different, for example:

      • Screen 13 / 14

      • Screen 19 / 20

      • Screen 25 / 26

      • Screen 31 / 32

      • Screen 38 / 39

      • Screen 59 / 60

      • Screen 65 / 66

      • Screen 70 / 71

      • Screen 75 / 76

      • Screen 80 / 81

      • Screen 87 / 88

      • Screen 95 / 96

      • Screen 102 / 103

      • Screen 123 / 124

      • Screen 131 / 132

  • Clicking Help & Support on the menu will go to screen 6, note based on the user type the title will be different. Also please keep the current “Copy Push Notification FCM Token” feature on this updated screen

  • Implement the Individual / Business account switch, the business screens start from 82 to 132. Please note that most of the screens for these two roles are the same, differences include:

    • Some sections are in different orders

    • Business account has Relationship Manager (screen 87) instead of Contact Us

  • Manage Card

    • From the Accounts and Loans page, go to the Cards tab, tap on any of the card will go to screen 133 which is the central place to manage cards

    • Screens 133 to 136 should be implemented

  • Edit mode

    • Clicking Edit mode on screen 5 will go to screen 140

    • Clicking the settings icon on an account will go to screen 141, which in turn covers screen 142 and 143

    • Clicking the menu icon to the right of the Dashboard Settings title on screen 140 will go to screen 144, which also leads to screen 145. Note please remove the Dashboard preview menu from screen 144.

    • Screen 147 shows different account options from screen 141, which in turn covers screens 148 to 151. Screen 147 should be shown for closed accounts, but Initiate Account Closure should be moved to screen 141 instead for open accounts.

  • This challenge will complete all the screens in the design except for the merged screens mentioned above.

 

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.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30148019