Crypto Exchange Order Book web app built with Typescript and React.

giselle-10-11-21.vercel.app

• React / Typescript
• SASS / styled-components
• WebSockets / react-use-websocket
• react-testing-library

• Totals
• Spread
• Sorting of the orderbook
• Depth graph
• Zero size levels are removed from the orderbook
• Grouping Select Box: change between (0.5, 1, 2.5) for XBTUSD market and (0.5, 1, 2.5) for ETHUSD market
• Toggle Feed Button: Switching between markets PI_XBTUSD and PI_ETHUSD
• Kill Feed Button: stops and renew the feed when clicked

To run the app, follow these steps.

1. From project folder:

To install dependencies:

  yarn install

To run the app:

  yarn start

To run the tests:

  yarn test

Some optimization and improvements can be implemented:

• Refactor some types to use generic and better naming
• Implement error handling
• Add transitions animation for toggle and depth graph
• Improve performance for big volume of updates