Create own real-time crypto-concurrency price monitor web app in 30 Minutes

0
cryptocurrency price monitor web app using react js

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 krakenbitfinex 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.

realtime-crypto-price-coincap
realtime-crypto-price-coincap(http://thenextfact.com)

So let’s get started with the requirement to accomplish our project.

1. Reactjs
2. WebSocket
3. coincap.io API

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.
npm install socket.io-client --save
  • Create component to setup our websocket and to render coin pricings after getting from api(websocket). Import websocket in newly created component.
import openSocket from 'socket.io-client';
  • Connect websocket to coincap.io server websocket to get realtime updates of trading.
var socket = openSocket('https://coincap.io');

Web-socket Channel: ‘trades’ is the channel name by coincap.io server. It will gives us all trade details on real-time basis.

socket.on('trades', function (trade) {
    if (self.coins.indexOf(trade.coin) !== -1) {
    self.setState({
        [trade.coin]: trade.msg.price
    });
    }
})

 

  • Our render method will looks like below:
    render() {
    
        return (
            <div>
            {
                this.props.data.coins.map((item) => (
                    <Paper style={style} zDepth={1} key={item.short}>
                        <div style={styles.paper}>{item.long}<br /><span>({item.short})</span></div><br />
                        <div>Price(USD): <RaisedButton label={this.state[item.short] ? (this.state[item.short]).toFixed(2) : (item.price).toFixed(2)} primary={true} style={styles.button} /></div>
                    </Paper>))
            }
            </div>)
    }

Conclusion:

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.

GITHUB REPO

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.