USB: RN Supply app UI prototype

Key Information

The challenge is finished.

Challenge Overview

USB Supply Mobile Application is a modern and intuitive iOS and Android mobile application that enables the user to track their deliveries, access bills & view promotions & events.

Note: The review phase for this challenge is 24hrs long.

Tech stack

  • React Native
  • Typescript
  • Expo CLI
  • Minimum iOS: iOS 11
  • Minimum Android: Android 7.0
  • Redux or Context API


  • Splash screen
  • Onboarding
  • Login
  • Registration
  • Forgot Password


Individual Requirements

Using expo CLI (v4.4+), develop a UI prototype application for the screens provided. Expo CLI’s bare(typescript) mode is allowed. The app should be responsive to multiple screen resolutions, and adapt to the notch screens. The input text controls in this app should behave like the react-native-paper theme ref: . There’s no restriction on which library you use for this, it should be MIT licenced that’s the only restriction.

1. Onboarding

Ref: Onboarding flow

1.1 is the first screen that appears on opening the application.

  • The logo on the splash screen should be configured in a config file. The reason is that the app is going to be used by thirteen teams/groups each having their own logo. So only by changing the logo config, the logo image should change. Ref 1.6 to 1.17 screens for different logos. These are going to be splash screens so you may need to save the white background & logo in a single image file.
  • The config file should store configs of all 13 logos & the active logo should appear on opening the app.
  • The welcome text is also different for different teams/groups, notice screens 1.18 to 1.29. So the welcome text should also come for the config file.
  • Document this in readme how to change this config to use a different logo & welcome text. Maybe just changing the activeClientName property somewhere should change the logo & welcome text. It’s up to you, how to implement this in codes.
  • A user should be able to swipe next/prev to go to the next view.
  • Clicking the Skip link should take you to the last view with the “Let’s get started” button (screen 1.5).
  • Clicking “Let’s get started” navigates to the login page.

2. Login

Ref: Login flow

  • The login page initially shows the “Login” button in disabled. When a valid email & password is added the login button becomes active.
  • The “eye” icon on the password field appears when the password field is non-empty.
  • Toggling the “eye” icon should change the icon & make the password text masked & unmasked.
  • Implement validation & error messages.
  • There are multiple validation error scenarios. All these should be implemented.
  • Clicking “Forgot Password” should navigate to the for password page.
  • Implement the UI of Remember me option, the actual functional implementation is out of scope.
  • Clicking “Register” should navigate to the registration page.
  • Clicking “Skip” should navigate to the main onboarding page.
  • “Terms & Condition” Can be a dead link.
  • Clicking the toggle-menu icon opens the sidebar section. Except the login link others links can be dead links.

2.1 Face ID/ Fingerprint ID

  • On successful login, the app should offer the user to enable face ID / fingerprint id.
  • Depending on the feature supported by the device these two options should appear.
  • Ref LocalAuthentication for implementation details.
  • Clicking the “Proceed to Home” should navigate to a placeholder homepage. You can create a blank page with “Home” text & a “Logout” link. For now, the layout of the homepage isn’t important.
  • If biometric ID is enabled & use comes to the login page he/she should see the Login using Fingerprint ID or Login using Face ID section like in screen 2.18

4. Registration

Ref: Registration flow

This page appears on clicking the “Register” button.

  • The toggle-menu icon on the upper left corner can be a dead link.
  • Clicking “Skip” should navigate to the main onboarding page.
  • All fields on this page are mandatory.
  • Use dummy values for drop-down options if they aren’t mentioned in the storyboard.
  • The “Register” button remains disabled until all fields are filled.
  • Implement Validation & Validation errors as shown in the storyboard.
  • The Password field has an “i” icon, taping this show a tool-tip with password details. (Ref to the forgot password flow screen)
  • Clicking Login navigates to the login page.
  • Clicking the “Proceed to Home” should navigate to a placeholder homepage. You can create a blank page with “Home” text & a “Logout” link. For now, the layout of the homepage isn’t important.

5. Forgot Password

Ref: Forgot Password flow

This page appears on clicking the “Forgot Password” button.

  • This allows a user to enter email.
  • Send verification link button stays disabled initially on entering a valid email it gets enabled.
  • Clicking this button shows the next screen in the flow.
  • For now, to demo reset-password flow, on clicking the “Send again” link the app should navigate to the “Reset Password” page.

5.1 Reset Password

This page allows users to reset their password. For now, it appears on clicking the “Send again” link on the reset password page.

  • Implement the flow by following the storyboard.

Submission deliverable

Submit a zip folder containing these:

  • Source code of the react-native app.
  • file containing the instructions to run the app.
  • Instructions to switch logo/client name can be added to
  • Verification doc or video is NOT required.


2021 Topcoder(R) Open


Final Review:

Community Review Board


User Sign-Off


ID: 30183953