I’ve decided to build this Phoenix LiveView course around a Cryptocurrency dashboard example because Cryptocurrency Exchanges are a fantastic, often public, source of realtime data. Don’t be scared if you don’t know anything about cryptocurrencies or exchanges, I’m going to explain everything we need to start playing with this data.
Our goal is to build a real-time dashboard with Phoenix LiveView, which shows the price in USD and EUR of different cryptocurrencies, traded on different exchanges.
You can play with the demo app at this link: coins.poeticoding.com.
What is a Cryptocurrency Exchange?
There are many exchanges, like Coinbase Pro, Bitstamp etc. They are online platforms where people (or bots) exchange what is called Fiat money ($ USD, € EUR etc.) with Crypto currencies (Bitcoin, Ethereum, Litecoin etc.).
On these exchanges it’s also possible to exchange a cryptocurrency with another cryptocurrency (ex. Ethereum with Bitcoin).
Most of these exchanges have a public WebSocket API that we can use to receive a different set of events.
Trade Events
In our case, we are just interested to receive real-time trades. Why trades? A trade is what we need to infer the price of an asset in a specific moment.
So, for example, on Coinbase Pro, a trade happening for the “Bitcoin – USD $” crypto product, looks like this:
{
"product_id": "BTC-USD",
"price": "9419.3",
"time": "2020-06-22T11:22:56.264200Z",
...
}
It means that on the 22nd of June 2020 at 11:22:56 UTC, 1 Bitcoin was traded at the price of 9419.3 USD.
In this JSON message that represents a trade, we have everything we need for our dashboard: price, time and currency pair.
Currency Pairs
The "BTC-USD" string is a currency pair, which is used to uniquely identify the exchanged currencies. Coinbase calls it product_id, but across most of the exchanges this is called currency pair.
In Coinbase the pairs are defined with strings like "BTC-USD" (Bitcoin – USD), "ETH-USD" (Ethereum – USD), "BTC-EUR" (Bitcoin – Euro), while on Bitstamp the pairs are downcase strings without the "-": "btcusd", "ethusd", "btceur".
When connecting to an Exchange Websocket API, we use these currency pairs to subscribe to the events of the currencies we want.
Updating the dashboard
Everytime our application receives a trade message from an exchange, it will update the LiveView Crypto Dashboard showing the updated price and time.
It’s now time to build our app, starting with the application’s design!
