Front-end Live-coding Session

Introduction

You will need to grab on the requirements and complete the project while ensuring the application to have great engineering and well-design by using API endpoints given at:

API:

http: http://c8036bd8-ea01-4f47-9ff1-dbf8001a0500.mock.pstmn.io
https: https://c8036bd8-ea01-4f47-9ff1-dbf8001a0500.mock.pstmn.io
https: https://react-code-challenge-mock-api.netlify.app

Scenario

Once upon a time... nope! So here, you have been temporarily hired by Opn and assigned to work on the little e-commerce project which the previously assigned front-end developer and designer got the urgent matters to solve, so they will not be able to finish the project on time.

Requirements

The design can click this link Figma and the requirements are below.

Add card validation on Checkout form:
- Must be a valid card number
- Must be Visa / Master card type
- Must be valid expiration date
- Must be valid CVV
Complete the API integration:
- Call the web service for payment submission
Add new UI on Checkout form:
- Display the icon (Visa/Master) based on card number input
- Style “Pay” button of the checkout form according to Figma UI

Getting started

Installation

Change the example.env to .env

$ yarn install

Running the app

# development
$ yarn dev

# build production
$ yarn build

Notes

Figma for UI Design:

Prototype: https://figma.fun/tnuL7b
File: https://figma.fun/OysH5f

Services

Get Product: {{ api_endpoint }}/products
Submit Payment: {{ api_endpoint }}/pay

Example of request

{
    "paymentInfo": {
        "email": "aaa@opn.ooo",
        "cardInfo": {
            "cardNo": "123456778888",
            "cardExpiryDate": "33/21",
            "cardCVV": "124"
        }
    },
    "products": [
        { "id": "1", "quantity": 1 },

        { "id": "2", "quantity": 5 }
    ]
}

Example of response

{
    "requestId": "12344556",
    "result": {
        "errorCode": "0",
        "errorDesc": "Success"
    },
    "paymentInfo": {
        "email": "aaa@opn.ooo",
        "cardInfo": {
            "cardNo": "123456778888",
            "cardExpiryDate": null,
            "cardCVV": null
        }
    }
}

Desire to win the war? Well, to make it a little more fun, please remember that

You cannot:

Change existing behaviors.
Change the API server.
Change from JavaScript/TypeScript to other languages.

Let's rock! 🤘

rotoon/opn-th-front-end-challenges