Description

Add in the currency conversions rates table with a dropdown to select the base currency. Changing the selected base currency should update the table and display the exchange rates for the other available currencies relative to the selected base currency.

Note, this table works independently of the currency conversion panel above this feature and should not be impacted by interactions with that feature.

Two APIs are available to be able to complete this:

• /rates
• /currencies

Acceptance Criteria

Given... The application is running
And... The rates request is functioning
And... The currencies request is functioning
When... I select a base currency from the dropdown
Then... The the table below updates with the exchange rates relative to the base currency selected

Assets

Description

Given that I have the ability to select a currency from a dropdown and see the exchange rates for other currencies I want to refresh the rates every 30 seconds to make sure the data is correct. When the data is refreshed I want a visual indicator informing me what happened with the rate. If the rate goes up I want the price to flash green. If the rate goes down I want the price to flash red.

Two APIs are available to be able to complete this:

• /rates
• /currencies

AC's

When... I select a currency from the dropdown

Then... The the list below should update with the other currencies and their exchange rate
Then... After 30 seconds the list should refresh with updates exchange rates
And... If the exchange rate has gone up the price should flash green
And... If the exchange rate has gone down the price should flash red

Assets

Description

Add the ability to swap the currencies between to/from, so that a user can quickly swap between the two values.

Note: This is an extension of the functionality implemented in #1.

Acceptance Criteria

Given... The application is running
And... The currencies request is functioning
And... There has been no conversion yet made
When... I select a button to swap the to/from values
Then... The currency and rate values in the in the inputs are swapped

Given... The application is running
And... The currencies request is functioning
And... There has been a conversion made and the conversion result is outputted into the UI
When... I select a button to swap the to/from values
Then... The currency and rate values in the in the inputs are swapped
And... The conversion result panel should be highlighted indicating the result is no longer valid and "Convert" button should be pressed again

Assets

Before conversion result:

After conversion result, before swapping currencies

After conversion result, after swapping currencies

Hello! I've got an upcoming technical interview and was checking everything runs smoothly before the session. I did find an issue and here's the report.

Environment

• Node.js: 17.x, 18.x (LTS)

Steps to reproduce

1. Run yarn start.

Expected behaviour

The project compiles successfully.

Actual behaviour

The project fails to compile. The error in the output from yarn start is:

Failed to compile.

ERROR in ./src/assets/logo.svg

Module build failed (from ./node_modules/file-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at getHashDigest (/Redacted/cleo-frontend-interview/node_modules/loader-utils/lib/getHashDigest.js:46:34)
    at /Redacted/cleo-frontend-interview/node_modules/loader-utils/lib/interpolateName.js:113:11
    at String.replace (<anonymous>)
    at interpolateName (/Redacted/cleo-frontend-interview/node_modules/loader-utils/lib/interpolateName.js:110:8)
    at Object.loader (/Redacted/cleo-frontend-interview/node_modules/file-loader/dist/index.js:29:48)

On Node.js 16, the project compiles successfully.

⚠️ Note for prioritisation

Node.js 16 is over 2 years old and reaches end-of-life on 2023-09-11. There will likely be more users on Node.js versions >= 17.

Investigation

The error comes from loader-utils. yarn why shows 2.0.0 is being used:

$ yarn why loader-utils
yarn why v1.22.19
[...]
=> Found "[email protected]"
info Has been hoisted to "loader-utils"
info Reasons this module exists
   - Hoisted from "react-scripts#@pmmmwh#react-refresh-webpack-plugin#loader-utils"
   - Hoisted from "react-scripts#@svgr#webpack#loader-utils"
   - Hoisted from "react-scripts#babel-loader#loader-utils"
   - Hoisted from "react-scripts#file-loader#loader-utils"
   - Hoisted from "react-scripts#resolve-url-loader#loader-utils"
   - Hoisted from "react-scripts#resolve-url-loader#adjust-sourcemap-loader#loader-utils"
info Disk size without dependencies: "84KB"
info Disk size with unique dependencies: "528KB"
info Disk size with transitive dependencies: "632KB"
info Number of shared dependencies: 4
[...]

The hashType passed into crypto.createHash is likely the start of the problem, see [email protected]/lib/getHashDigest.js:46:34.

Node.js 17 updated from OpenSSL 1.x to OpenSSL 3.0 (see Node.js 17 release notes). OpenSSL 3.0 deprecated some hashing algorithms (see OpenSSL 3.0 Migration Guide and list of legacy of algorithms). [email protected] is likely using MD4 (its default should no algorithm be specified) or some other algorithm that's been deprecated in OpenSSL 3.0 so when it is run in an environment with Node.js >= 17 the reported error is thrown.

Resolution

The recommended resolution is to:

Upgrade to loader-utils@^2.0.1

loader-utils fixes this issue in 2.0.1 (changelog, PR). ^2.0.1 is within the existing acceptable dependency range of ^2.0.0 so I don't foresee any problems. My own testing yielded no side effects.

Alternative resolutions

Configure Node.js to use OpenSSL legacy provider

If loader-utils can't be upgraded for some reason then Node.js can be configured to use the OpenSSL legacy provider. The OpenSSL legacy provider allows usage of legacy algorithms. Node.js can be configured to use this through the --openssl-legacy-provider option (Node.js documentation). This can be done by providing the option in the start script as react-scripts will forward the option to Node.js (reference):

package.json

  "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts start --openssl-legacy-provider",

There's no significant risk here as the hashing algorithms are only generating file hashes. However, upgrading the dependency should be the preferred option.

Configure a Node.js version

For users that use a Node.js version manager (e.g. fnm), configuring the relevant configuration file (e.g. .node-version) will ensure a Node.js version without problems is used. The risk here is not everyone uses a Node.js version manager; and even for those that do, the configuration file is not a standard (many support .node-version but some, like nvm, do not (reference)). However, this option could be done anyway, in combination with one of the above, to improve the chance of running the project in a consistent environment.

Additional notes

It may be worth notifying folks who have recently cloned the repo of this issue so that they can either resolve themselves or pull if the issue is resolved here.

Description

When a user converts an amount of currency we want to save that as a snapshot so that we have the historical conversions. When a user comes back to their history such as in a new session we want to load the history. This can be saved locally (local storage).

Acceptance Criteria

Given... The application is running
When... I successfully convert a currency
Then... I want that conversion to be saved, including the amount, from currency, to currency, rate and date
And... When I come back to the app, I can see my historical conversions

Assets

Description

Add the ability to complete the conversion of one currency to another for a specific amount.

The API already exists for this and can be accessed at: /convert

Acceptance Criteria

Given... The application is running
And... The convert API request is functioning
When... I add in a valid currency code as the "From" value
And... I add in a valid currency code as the "To" value
And... I add in a valid amount
Then... The currency conversion button should become enabled
And... When clicked, the /convert API should be called with the entered values
And... The result outputted into the UI

Stretch Goal

Add handling of non-valid currency codes to the UI to make clear that the currency code submitted is not supported.

Assets

Before conversion:

After conversion:

Description

When the API is not functioning and I try to make an API request, the UI does not present an error.

Steps to Reproduce

• Run the app without starting the API
• Try to make an API request (e.g. by converting a currency to another)
• There is no indication that something went wrong

Expected Behaviour

When running the app and trying to perform an action that depends on the API, there should be a graceful handling of this scenario should the API be unusable.

We don't have any designs for this right now, so use your creative license to add something for now.

Description

Add more visual feedback to the user in various scenarios.

Note: This is an extension of the functionality implemented in #1.

Acceptance Criteria

When the input is not focused

Given... That I have have not focused on the input component
Then... There should be a placeholder message indicating the expected value

When input is focused

Given... That I have have focused on the input component
Then... The input border should turn blue

When input is invalid

Given... That I have have focused on the input component
When... I have entered an invalid value
Then... The input border should turn red
And... There should be an error message show underneath the input
And... The input border should turn blue when the input is refocused

When input is valid

Given... That I have have focused on the input component
When... I have entered an valid value
Then... The input border should turn green