In this step-by-step series, learn how to research, design and build a dashboard to monitor cryptocurrency trades.
Project overview
In this series, we will be building a dashboard to monitor cryptocurrency trades. In this part of the series, we will do research to decide what features the app needs to have and design a prototype so we know what we will be building. In the rest of the series, we will be building the app feature by feature. Cryptocurrencies, such as Bitcoin, are a special kind of electronic payment system. Just like the stock market, there are exchanges where you can trade different coins. As a cryptocurrency investor, you want an easy way to analyze the market so that you can make better trades. Coming up, we will get the requirements for this project and define the features based on the information given.
Want to learn more about the technology that supports cryptocurrency? Check out this great Blockchain Overview on Altcoin Magazine written by Simeon Georgiev.
Requirements
You want to see a list of all the currency pairs and select them to get more data. A currency pair (ETC/BTC) has a base currency (ETC) and a quote currency (BTC) used to price the base currency. There are a few currencies that a currency can be quoted for and you would like to toggle between the data for those options. You want to be able to select a currency pair and see its trade history. You need to be able to see if it has been rising in price or falling over time so you can know when to buy and when to sell. Studying price movements in a market is known as technical analysis and you can learn more about it on Investopedia. Next, you will need a way to visualize the price movements so you can easily spot trends. The trend is a pattern. It can be upward, downward, or sideways. Finally, to jazz up the app we want to be able to change the theme.
Now, we will consider the technologies and tools to build these features. This impacts our workflow and how we will break down our tasks. There are two parts to the app we are concerned with, the view and the data. We don’t want to create the components from scratch so we will need a UI toolkit that has components for displaying and visualizing data. That is why we will be using Kendo UI. The Kendo UI toolkit has grids and charts among other components and a JavaScript API so we can program the data into these components. There are several public APIs with trading data for cryptocurrencies. We will use Cryptopia’s API because it has the endpoints that correspond to the kind of data we want to retrieve. Next, we will translate our features into the Kendo UI components and API endpoints we will need to use.
Cryptocurrency Trading Pair List
The first feature is to display a list of the currencies. A grid is ideal for this because we will have lots of data to show and we want the user to be able to sort the data by different parameters. The parameters we will show for each currency pair is the current price, the highest and lowest price, and the volume. Volume is the number of trades that have taken place over a period of time. We also need to show the trading pair in different currencies. The currencies we will quote the base currency in are BTC (Bitcoin), USDT (Tether), and LTC (LiteCoin). A tab strip with each of these currencies as its labels will be placed above the grid. Selecting a tab will update the grid with the relevant market data. We can use this API endpoint from Cryptopia to get a list of the trade pairs:
https://www.cryptopia.co.nz/api/GetMarkets/base_marketWhere base_market is replaced with BTC, USDT, or LTC.
Market History for a Trade Pair
The next feature is to visualize the data for each trade pair with a chart. We want a chart to see what the closing prices were for a trading pair over a given time. A line chart is best for this use case. The x-axis will represent the time and the y-axis will represent the closing price. When you hover over the line you will see a label with the price. The Cryptopia API lets us specify time histories in one-hour increments. The default is 24 hours. This shows the trading history from 24 hours in the past to the current time. This is the API endpoint we will use to get the trading history for a particular trading pair:
https://www.cryptopia.co.nz/api/GetMarketHistory/trading_pair/timeThe trading_pair parameter would be replaced with BTC_USDT for the BTC/USDT trade pair for example. Time would be replaced with a number in hours. We will give the user the option to select the depth of the history by providing a button group with predefined times. There will also be a date time picker so you can explicitly choose how far back in time you want to see. Last, we will use a splitter so we can toggle the views for the grid and chart and create a custom theme for our design.
Summary
Our cryptocurrency dashboard will show a list of the trading pairs and a chart with the history of closing prices for each trading pair. We will use the Splitter, Grid, TabStrip, LineChart, ButtonGroup, and DateTimePicker components from the Kendo UI toolkit. We will use Cryptopia’s public API for the data. The first task that we completed today was doing research and planning. The next tasks are the following:
- Begin coding app
- Configure the data source for the grid and chart
- Implement the grid
- Implement the chart
- Add a custom theme
For the next task, we will code the least complex components. This includes the Splitter, TabStrip, ButtonGroup, and DateTimePicker. The purpose of this is to have the structure of the layout in place and complete a large chunk of the project quickly. The Grid and LineChart are more complex and we will need these components to get them fully functional.
Stay tuned for the next post, coming out soon.