Today everyone is aware of cryptocurrencies like bitcoin, etherum, litecoin, ripple etc. These cryptocurrencies are not legal for trading as per lots of countries governments. But still, there are millions of trading done daily. So today we are creating a cryptocurrency price monitor web app using reactjs by fetching real-time trading price. We are using coincap api to monitor these price and this API fetches data from third-party exchange websites like kraken, bitfinex etc.
In this tutorial, we are using Web-socket to fetch real-time trading price details. The channel named ‘trades’ is exposed by coincap.io API and it will give us every trading done on crypto-currencies exchange websites.
So let’s get started with the requirement to accomplish our project.
Let’s get started with the actual implementation of cryptocurrencies price monitor.
- We are not going to waste our time by setting up the reactjs project from scratch. If you would like to know how to setup reactjs basic seed project then follow this link (react material ui)
- install socket.io-client to utilize WebSocket functionality.
- Create component to setup our websocket and to render coin pricings after getting from api(websocket). Import websocket in newly created component.
- Connect websocket to coincap.io server websocket to get realtime updates of trading.
Web-socket Channel: ‘trades’ is the channel name by coincap.io server. It will gives us all trade details on real-time basis.
- Our render method will looks like below:
Finally we have developed a small web app to accomplished our requirement of monitoring real-time crypto pricing. If you are having any sort of trouble understanding reactjs code then below is GitHub repository like which I have created.