binance-trade-stream is a React application that displays trade data for the BNB/BTC trading pair from Binance.
Vite should have started dev server, otherwise: To start development server:
[npm/yarn/pnpm] run dev
Next, open your browser and visit http://localhost:4000/.
[npm/yarn/pnpm] test:watch
or
[npm/yarn/pnpm] test:watch <path-to-file>
binance-trade-stream is a React application that displays trade data for the BNB/BTC trading pair from Binance. Connecting to its WebSocket API and receiving real-time data. The application displays a list of the latest trades. Each trade should display the following information: • Trade ID • Price • Quantity • Time The list updates in real-time as new trades come in from the WebSocket connection.
- Initial scaffolding is a repo of mine that I use for very small personal projects. here. Removed Axios, MSW and React-query.
- All starts on
App.tsxwhere we use react-use-websocket library to connect to Binance's trade Websockets API and retrieve live data. Then, incoming messages get redirected to the useTradeData custom hook, showcasing a state module function (a variant of the context module function pattern). This hooks processes incoming data and internally saves its state. The exposed state is the actual data in the format that the grid will consume it. - About react-use-websocket library: It provides a robust WebSocket integrations to your React Components. The App will rerender every time the the WebSocket receives a message (which will change lastJsonMessage). Right now we are not sending messages but sendMessage could do it, and that is a memoized callback that will pass the message to the current WebSocket. Note that, useWebSocket will manage subscriptions/unsubscriptions internally. useWebSocket will keep track of how many subscribers any given WebSocket has and will automatically free it from memory once there are no subscribers remaining (a subscriber unsubscribes when it either unmounts or changes its socketUrl). So everytime we change its socketUrl, the connection will be automatically freed.
- About react-window: This is the library I use to display a grid with the incoming processed data. Its input data is in the shape of an array of arrays, being each array a particular row, the first row should be the headers as it is in order. This library uses windowing techniques to remove from the DOM before and after rows not visible on the window at any given moment. Allowing resources to be freed from the browser and not block the user actions as the list becomes very big.
- The useTradeData custom hook implements a version of the context-module-function where I have removed the context, for simplicity. This hook exposes an API and keeps important state internal to the component, exposing only the helper functions required to make changes on the state. Those helper functions will be stable, because they are exported and imported on usage, as well as the required dispatch function needed to call these helper fns.
- The formatting done on cell data is representative and obviously not something suitable for a production setting
- Tests on custom hooks made with renderHook helper from @testing-library/react.
- This app does not use providers so this simplifies testing.
- Implement a feature to switch between different trading pairs (e.g., ETH/BTC, LTC/BTC).
- Note: Switching between trading pairs would be very easy, would just need to change the tradingPair state on App.tsx and the connection would itself free itself and make a new one to the latest endpoint. Also implement a button to change that state, of course
- Add a chart to visualize the price changes over time
- Note: Would need to keep price changes on an array instead of overriding incoming messages under same id. Then implement a chart component of course
- Vite: Frontend build tool that serves your source files over native ES modules, with rich features and fast Hot Module Replacement (HMR). Vite is fast because it doesn't bundle your code at all. It leverages the native support for ESM (ECMAScript Modules) of modern browsers. It sends your file directly without being bundled
- @vitejs/plugin-react-swc: This speeds up your Vite dev server with SWC (~20x faster than Babel)
- ESLint and Prettier: For linting and pretty-printing JavaScript code respectively
- Jest and @testing-library/react: for unit testing
- Vitest: Modern testing framework
- MSW: Mock Service Worker (MSW) is an API mocking library for browser and Node.js. See stop mocking fetch. With MSW, you can intercept outgoing requests, observe them, and respond to them using mocked responses. MSW can integrate throughout your entire stack, allowing you to reuse and customize network behavior on demand. Imagine using the same API mocks during development, integration and end-to-end testing, and then in your Storybook or during a live demo.