Uphold's Frontend Engineer Assessment

This app is my take on Uphold's Frontend Engineer Assessment Challenge (January 2022).

The user, should be able to see an input amount displayed according to the exchange rates for the different currencies supported by Uphold.

Index

• Usage
• Technologies
• Acceptance criteria
• Technical specs
• Extra features
• Demo
• License

Usage

To install all packages use the command:

yarn

To run the development server use:

yarn dev

Technologies

• I used Vite to create the React app instead of CRA because of its incredible speed.
• I also used TypeScript instead of JavaScript because I prefer statically-typed languages.
• For the styling, I used Tailwind CSS instead of plain CSS due to its faster styling process.
• For the versioning system, I used the Conventional Commits protocol to better organize my commits. I also used Husky to add pre-commit lints and checks.

Acceptance criteria

• TC01: The user input amount should be USD by default.
• TC02: Should be able to change between currencies.
• TC03: Should update the values for every currency on user interaction using a debounce mechanism.
• TC04: Should have all the values cached upon the first request.
• TC05: Should make a new API call in the background, re-populating the cached value, when changing between currencies.

Technical specs

To solve this problem the developer:

• MUST use React.
• MUST use ES6.
• MUST list at least 10 different currencies.
• MUST use the Uphold Javascript SDK.
• MAY have proper linting tools.
• MAY use the uphold design system.
• MAY handle CORS without having to rely on the browser extension.
• MAY list all available currencies dynamically.
• MAY implement unit tests.
• MAY implement E2E tests.

Extra features

• Mobile friendly responsive design.
• The currency input only accepts numbers and decimal separators.
• The exchange rates are formatted with a thousands separator.
• The currency input sticks to the top of the page on scroll for the user's convenience.
• Only 10 currencies are shown initially, although the user can expand the list to see all of them.
• The exchange rates are cached to local storage so that they are saved between sessions.
• Sort the currencies from most to least used.

Demo

I also attempted to host this app on Netlify to make it easier to present. Although, on the production build the Uphold's SDK was crashing. With that being said, the app is still being hosted on uphold-pmorim.netlify.app.

License

MIT @ Pedro Morim