Odyssey OLB ReactJS Responsive Prototype - Security & Dashboard 1

CHALLENGE OBJECTIVES

• Build the UI prototype for the security and dashboard modules using React JS.

• 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

• ReactJS 16

• Redux

• Bootstrap

• HTML5

• CSS3

• Material UI for icons / form validator / etc.

• Axios for API integration

• Typescript

• JSON

• Router

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.

SCREEN SUPPORT

The web app will need to be fully responsive, which means it needs to work on desktop, tablet, and mobile phone screens.

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

The desktop prototype must work on screens with 1280 width and above.

SCREEN REQUIREMENTS

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

• Login, Information, and Registration Screens

  • Please follow the “D - 01” screens to implement the following:

    • Login

    • Important Information popups

    • Registration screens

  • All the details from the design must be implemented, including but not limited to the ones mentioned below:

    • Validation logic and errors

    • The rotating banners in screens “D - 01 - 4” to “D - 01 - 6”

• Registration Screen

  • Please follow the “D - 02” screens to implement the login flow

  • The user will land on the dashboard screen after logging in successfully

• Reset Passcode

  • Please follow the “D - 03” screens to implement the reset passcode flow

  • The “I’m not a robot” captcha should be implemented

  • 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

• Account Locked

  • Please follow the “D - 04” screens to implement the account locked flow

• Service Error

  • Please follow the “D - 05” screens to implement the service error screen

• Customer Dashboard Screen

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

    • Just implement whatever is shown on this screen, and none of the buttons / icons needs to be clickable except for logout which will log the user out

    • Use images for the Finance manager section for now instead of dynamic charts

• Other screens

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

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.

• This prototype must be fully responsive, meaning it should work on desktop, tablet, and mobile browsers.

• Show loading spinners when populating data from API / local JSON to UI

• Searching/filtering should work whenever applicable.

• Pagination should work whenever applicable.

• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

• Implement validation errors (for example, login error as shown in design)

• No linting errors

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

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.

• Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.

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

• Windows: IE 11+, Edge, Chrome latest, Firefox latest

• Mac: Safari Latest, Chrome Latest, Firefox Latest

• Tablet and mobile: Safari / Chrome on iOS and Chrome on Android

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