/finance-test-task

Primary LanguageJavaScript

React Test Task

Requirements

We need you to implement a solution to display price tickers data on the UI in realtime.

Price data is available from a locally running service (see information below). Any additional visualisations to indicate how prices have changed would be a plus. Testing is also an important part to this exercise.

Requirements:

  • application should connect to the locally running service
  • application should render price changes for some tickers in real time

You can get some ideas how your application may look like on the Google Finance page.

As a bonus you can implement (please describe implemented bonus functionality in this file):

  • any additional visual effects to highlight positive or negative changes in the prices
  • the possibility to switch on/off tickers by user
  • the possibility to specify interval time by user
  • the possibility to add/remove ticker from watching group
  • any additional functionality you consider useful

You should use the next technologies:

  • React (preferable with hooks)
  • Redux (with Redux-Thunk or any other Redux middleware you are familiar) or any other state-manager library you want
  • Socket.io - to connect to the service
  • any UI library you want, or you can use just pure CSS
  • Testing Library

We will assess the next parts:

  • workability: how your application works
  • projects structure: how you structure your files
  • code quality: how you write clean, readable code (feel free to install and use ESLint and Prettier)
  • knowledge React and its ecosystem: how you compose and use libraries together
  • testing: how you can test your code

Running the local service

  1. Open a new bash shell
  2. cd server
  3. npm install or yarn install
  4. npm run start or yarn start
  5. You can visit http://localhost:4000 to check that the service is working correctly and inspect the data it produces.

Run your application

  1. Open a new bash shell
  2. cd client
  3. npm install or yarn install
  4. npm run start or yarn start

Run the tests

  1. Open a new bash shell
  2. cd client
  3. npm run test or yarn test

Price Service Usage

URL: http://localhost:4000

Price tickers are real-time via web-sockets.

Example JSON Response from the Price Ticker service

[
  {
    "ticker": "AAPL",
    "exchange": "NASDAQ",
    "price": 279.29,
    "change": 64.52,
    "change_percent": 0.84,
    "dividend": 0.56,
    "yield": 1.34,
    "last_trade_time": "2021-04-30T11:53:21.000Z"
  },
  {"ticker":"GOOGL","exchange":"NASDAQ","price":237.08,"change":154.38,"change_percent":0.10,"dividend":0.46,"yield":1.18,"last_trade_time":"2021-04-30T11:53:21.000Z"},
  {"ticker":"MSFT","exchange":"NASDAQ","price":261.46,"change":161.45,"change_percent":0.41,"dividend":0.18,"yield":0.98,"last_trade_time":"2021-04-30T11:53:21.000Z"},
  {"ticker":"AMZN","exchange":"NASDAQ","price":260.34,"change":128.71,"change_percent":0.60,"dividend":0.07,"yield":0.42,"last_trade_time":"2021-04-30T11:53:21.000Z"},
  {"ticker":"FB","exchange":"NASDAQ","price":266.77,"change":171.92,"change_percent":0.75,"dividend":0.52,"yield":1.31,"last_trade_time":"2021-04-30T11:53:21.000Z"},
  {"ticker":"TSLA","exchange":"NASDAQ","price":272.13,"change":158.76,"change_percent":0.10,"dividend":0.96,"yield":1.00,"last_trade_time":"2021-04-30T11:53:21.000Z"}
]

The tickers we use:

  • AAPL - Apple
  • GOOGL - Alphabet
  • MSFT - Microsoft
  • AMZN - Amazon
  • FB - Facebook
  • TSLA - Tesla

How to complete the task

  1. Clone or fork this repository
  2. Modify content of the folder client
  3. Modify content of the folder server - if you want to complete bonus tasks
  4. Commit and push your code to your repository
  5. Send us link to your repository