We need to create a frontend that will interact with the backend server and allow users to submit transactions and view submitted transactions.

The app should render three screens:

The Bank login screen

The Transfer screen

The View Transactions screen

The user logs in using the Bank login screen. They can either log in as Acme Inc or Apex Corp, by clicking on the Acme Inc. button or the Apex Corp button.

After logging in, they land on the Transfer screen. Here, they can initiate a new transfer request by filling in the details of the remittance, including the receiver's name, account number, bank and address, and the transaction amount and currency. They also need to upload the compliance documents, which include the invoice document, BOE/BOL, and any other document they want.

On clicking on Submit, a new remittance transfer request is initiated and sent to the backend server for processing. After the backend confirms the success of the transaction, the user is notified of the Tx Status on the screen.

On clicking on View Transactions, the app fetches all of the user's transactions from the database and renders it on the screen. The user can view all incoming or outgoing transactions. By default, all incoming transactions are shown. The user can view all transaction details, including the compliance documents. The screen renders a separate link to view each document. On clicking on the link, the document is downloaded from the server's local storage.

The following are the main members of our app:

• There's main App.js file.
• There's following React components:
• AppLogin.js
• Transfer.js
• ViewTransactions.js

Let's start building the app.

You can download the entire app code at the GitHub repository, at this link: https://github.com/PacktPublishing/Blockchain-Development-for-Finance-Projects/tree/master/Chapter%204/CorpRemApp/src.