gangadhararaoande / AdmitKard-OTP-Verification-Assignment

Write the objective of the assignment yourself

The objective of this assignment is to create a React-based application with a multi-step user registration process. The application should have three main screens:

Login Screen: Allow users to enter their mobile number and generate an OTP for verification.

OTP Verification Screen: Provide a screen for users to enter the OTP sent to their mobile number and verify it. Users should also have the option to resend the OTP or change their phone number.

Success Screen: Display a success message and prompt users to continue with the registration process.

Refer to the image below:

Add UI reference image

Design Files

Add Route Name

Add the design files according

->https://www.figma.com/file/NW3SHq44yjrP0m54WL8Nwo/Login_dev?node-id=0%3A1

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Assignment Completion Instructions

Functionality to be added

The app must have the following functionalities:

The app must have the following functionalities:

Login Screen:

Users should be able to enter their mobile number. Users should be able to generate an OTP. Input validation should ensure the mobile number is 10 digits and contains only numbers. Upon successful input, users should be redirected to the OTP Verification Screen. Display an error message if mobile number input is invalid.

OTP Verification Screen:

Users should be able to enter the OTP received on their mobile. OTP verification should be performed, and users should be redirected to the Success Screen upon successful verification. Users should have the option to resend the OTP. Display an error message if the entered OTP is invalid.

Success Screen:

Display a success message upon successful login or OTP verification. Provide a button to continue to the next step in the registration process.

Assignment Completion Checklist

Click to view

• Along with the below points, add your checklist specific to the assignment

• Read the instructions given in the assignment carefully and list down the Assignment Completion Checklist for the assignment and start working on it

• Basic validations for fields (i.e. mobile number should be 10 digit, only of numbers).

• If OTP is matched then the success screen should be displayed.

• If OTP is not matched then a proper error message should be displayed.

• All kinds of validations to stop users from filling garbage values in the fields.

• The completion Checklist includes the below-mentioned points

  • I have completed all the functionalities asked in the assignment
  • I have used only the resources (Frameworks, Design files, APIs, third-party packages) mentioned in the assignment
  • I have modified the README.md file based on my assignment instructions
  • I have completed the assignment ON TIME

• Note:

  • Ensure that you have marked all the checklist points in your completion checklist before submitting the assignment

Quick Tips

Click to view

• third-party packages list -react-router-dom -react

Important Note

-> mobile number should be 10 digit, -> If OTP is matched then the success screen should be displayed. -> If OTP is not matched then a proper error message should be displayed. -> only numbers are entered in input field

Resources

Data Fetch URLs

• No data fetch required for this assignment.

Image URLs

• https://res.cloudinary.com/dpvr2hwtj/image/upload/v1695660613/Artboard_1_uwtqsw.png
• https://res.cloudinary.com/dpvr2hwtj/image/upload/v1695657966/undraw_confirmed_81ex_ebpdb9.png
• https://res.cloudinary.com/dpvr2hwtj/image/upload/v1695655478/image_1_a7exch.png
• https://res.cloudinary.com/dpvr2hwtj/image/upload/v1695654202/AK_logo_da3kd6.png

Colors

Add the text and background colours to be used in the assignment yourself.

Font-families

• Add the font-families to be used in the assignment yourself.