Welcome to the George Front-End Team coding exercise!

Your task will be to create a small one page application that displays all the currencies from the bank and their respective exchange rate.

Specification

The page should have a header and a search bar at the top.

When the user is scrolling the page, the header should scroll off the page, but the search bar should stick to the top and stay there.

Below the header and the search bar should be a list of all currencies.

Each currency list item should contain:

  • Flag of the country
  • Name of the country
  • Currency of the country
  • Exchange rate of that currency
  • The currencies should be searchable. The list should update according to the search results.

The search term should also be present in the URL hash and deep linking should work accordingly.

Resources

  • Data source:
    • The data is available also on this endpoint: here
    • The data is also available in the attached fx.json.
  • Wire-frame: See attached wire-frame.jpg
  • Flags: See attached flags.zip

Tech-stack

Please create the application with ReactJS. Feel free to create your application using Create React App if you'd like. Redux or hooks can optionally be used, but are not required. For testing we recommend Jest. You may write the application in JavaScript or TypeScript. Feel free to use any other library you need for this task.

The application source code should be in production ready state. Implement it the best way you can. The application should look nice ;)

Good luck and have fun!