Digital Wallet - Consumer App - Frontend Part I - New user login, registration, profile setup

Challenge Summary

Welcome to everyone! The goal of this challenge is to create the frontend app from a given design using React Native for both iOS and Android platforms.

Project Overview

The project will develop a mobile app for our client in which users can easily transfer and receive money, buy airtime, or make payments using your mobile phone instantly, anywhere, anytime, and earn cashback. This is a consumer app, where any user can download, register, and use it.

In these series of challenges to build the frontend for react native, we are starting from New user login and registrations related screens. In the future, we will continue to add other features.

After this challenge, we will integrate this feature with API and start building other remaining screens in the follow-up challenges.

Technology Stack

React Native, iOS 9.3+, Android 4.1+

Browser Requirements

Native application for both iOS and Android

Assets

The design file is shared on the forum

Individual Requirements

Implement the screens related to

• Splash Screen
• Non Registered user 
  • This includes registering with mobile number, Facebook, Google, and Apple
    • Through Header enrichment: in case of the device using the app has the phone number (Login page, phone number validation through OTP, Profile Info)
    • Through WIFI/ without mobile number: in case of the device doesn’t have the phone number(Login with a phone number, and social accounts> Facebook, Google, Apple and linking mobile number with social account)
  • Profile setup: this includes filling KYC detail and capturing active selfie
  • PIN creation: which will allow to login in the application
• Registered user login
  • Login
    • Through Header enrichment: in case of the device using the app has the phone number
    • Through WIFI/ without mobile number: device doesn’t have the phone number and using WIFI
  • Forgot PIN: allow the user to recover their PIN
• Terms & condition screen
• Home screen: only basic skeleton is the scope of this challenge

The details of the screen with the business flow is shared on the forum. If there is any confusion let's clarify on the forum.

General Requirements

• Use React Native best practices
• Divide the components into meaningful components that can be reusable
• Setup the “gitlab-ci.yml” to lint, and build the android app
• Set code convection using the linting library
• Translation on Myanmar and English should be supported 
• All data should come from a mock API or JSON file.
• Performance must be taken carefully, as there will be lots of screens
• Only use third-party libraries that are accepted by Topcoder

Final Submission Guidelines

Submit the zip containing

• Full source code with detailed readme to setup, deployment.
• A video URL of the demo on both iOS and Android. Please share the video from Google drive.