Requirements to run project(Pavlo Kulesha)

• please create .env.local file into client dir and add VITE_API_HOST key

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.1,
    "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.6,
    "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.1,
    "dividend": 0.96,
    "yield": 1.0,
    "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