- Create a card-style layout for each cryptocurrency with routing for more data<\/strong><\/li>
- Add multiple time segments for users to look at historical pricing for each currency<\/strong><\/li>
- Build a trading bot by creating a Coinbase API account<\/strong><\/li>
- Add pagination support to get more historical pricing data on a user\u2019s request<\/strong><\/li>
- Customize or animate the charts<\/strong><\/li>
- Make the charts real-time by updating the value with websocket data<\/strong><\/li><\/ul>\n\n\n\n
Video Tutorial and Demo<\/h1>\n\n\n\n
If you prefer watching a video to reading, you can also follow along here. The first part of the video also shows what the finished project will look like:https:\/\/cdn.embedly.com\/widgets\/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F5alEc5KuyKg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D5alEc5KuyKg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F5alEc5KuyKg%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube<\/p>\n\n\n\n
Resources<\/h1>\n\n\n\n
- Github repo \u2014 https:\/\/github.com\/renaissancetroll\/reactjs-crypto-api-dashboard<\/a><\/li>
- Coinbase API docs \u2014 https:\/\/docs.pro.coinbase.com\/<\/a><\/li>
- ChartJS docs \u2014 https:\/\/www.chartjs.org\/docs\/latest\/<\/a><\/li><\/ul>\n\n\n\n
Tutorial Summary<\/h1>\n\n\n\n
- Initial project setup<\/li>
- Define application state<\/li>
- Create effect hook for initial render<\/li>
- Create effect hook for currency pair changes<\/li>
- Helper function to format data for chartJS<\/li>
- JSX and CSS styling<\/li><\/ul>\n\n\n\n
Setup<\/h1>\n\n\n\n
This tutorial is built using Create React App as the starting template, but you can follow along using any ReactJS setup you prefer. The only libraries you will use for this tutorial are chartJS and react-chartjs-2, which can be installed using NPM.<\/p>\n\n\n\n
npm install --save chart.js react-chartjs-2<\/code><\/p>\n\n\n\nFor the file structure of the application you can create a
components<\/code> folder and also a genericutils.js<\/code> file that will be used for generic helper functions.<\/p>\n\n\n\nSetting up application state with hooks<\/h1>\n\n\n\n
When you call the API you\u2019ll need to be able to store that data as state. This will be done using React hooks and the values stored will be:<\/p>\n\n\n\n
- currencies- <\/strong>all available currency pairs on Coinbase<\/li>
- pair- <\/strong>current currency pair selected by the user<\/li>
- price-<\/strong> price of the current currency<\/li>
- pastData- <\/strong>historical price data from current currency<\/li><\/ul>\n\n\n\n
We also need to create 3 variables:<\/p>\n\n\n\n
- ws<\/strong>– a useRef hook to create a persistent websocket object<\/li>
- url<\/strong>– a base URL to the coinbase API<\/li>
- first<\/strong>– another useRef hook to prevent an initial render(I\u2019ll cover this in depth later)<\/li><\/ul>\n\n\n\n
The code for all of this will go inside your main App component.https:\/\/codeburst.io\/media\/9aaf3d6152934d5d67fa64b3a561b094<\/p>\n\n\n\n
useEffect hook for initial render<\/h1>\n\n\n\n
Now you need to implement the logic for your app\u2019s initial render when the page loads. In this hook, you will use the websocket reference object created earlier to connect to Coinbase\u2019s websocket data API.<\/p>\n\n\n\n
You will also make an initial API request to get all available currency pairs from Coinbase. These will be used to populate a selector list so users can choose which specific cryptocurrency they want more data about.<\/p>\n\n\n\n
If you have trouble understanding how the code works make sure to read the comments I\u2019ve left above certain lines of code that might help clear up the confusing portions.https:\/\/codeburst.io\/media\/18b92bf6316220b942640c0127e31294<\/p>\n\n\n\n
Important things to note about the above code<\/h2>\n\n\n\n
- The empty array passed as the 2nd argument to useEffect is crucial. This causes the effect hook to only run on the initial render. This is known as the dependency array. If no argument is passed it will run every time state changes in the react app which will cause major problems in many apps.<\/li>
- The API call is made from an async function, you will get an error if you attempt to run a synchronous function inside a React hook.<\/li><\/ol>\n\n\n\n
To verify that the code is working properly you can console.log that data and make sure it\u2019s being formatted properly. In this case, we can see that Coinbase initially returns over 100 currency pairs and that after filtering only for US dollar-based currencies we have less than 40 left and they are sorted alphabetically for better user experience.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/700\/1*W0ir3KOHmdpZhStORsQczg.png\")
<\/figure>\n\n\n\nConnecting to the Real-Time data API with another effect hook<\/h1>\n\n\n\n
Now that you have the currency data you can use it to select which additional data you want to retrieve from the API. To do this you\u2019ll create another effect hook. This will listen for changes to the currently selected currency pair and run every time a new currency is selected by the user.https:\/\/codeburst.io\/media\/0ad7dfd3962a1467ea1e297cec723382<\/p>\n\n\n\n
Again we can verify that our websocket data is working properly by logging the results to the console. You should see a new value get printed nearly every second, sometimes multiple times per second for more popular currencies like Bitcoin.<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/miro.medium.com\/max\/678\/1*oA9A1-N08yLOipPwLlt3UA.png\")
<\/figure>\n\n\n\nFormatting Historical Data<\/h1>\n\n\n\n
To help keep our code clean we are going to create a helper function that will modify the historical data made in the effect hook above and format it so it just needs to be saved directly to state and then passed to the chart component that will display the data.<\/p>\n\n\n\n
This function will be placed in your utils.js file and imported into your main App file.https:\/\/codeburst.io\/media\/46838b33dcbf2b612a09dd1a6bf02044<\/p>\n\n\n\n
JSX and CSS styling<\/h1>\n\n\n\n
The hardest part is out of the way! You\u2019ve retrieved and wrangled the data into a more workable format and now all you need to do is pass that data to your JSX components to display it.<\/p>\n\n\n\n
First, let\u2019s create the Dashboard component which will be imported into our main App component.https:\/\/codeburst.io\/media\/9c3ab39b88ea1d13a9afaa341911156e<\/p>\n\n\n\n
Now let\u2019s create the JSX for the main App component and import our Dashboard component. The final code for the App should look like this:https:\/\/codeburst.io\/media\/dc48d1f03a914b17b6713d2ae1dc31ce<\/p>\n\n\n\n
The final thing we need to do is add some basic CSS styling. If you prefer to use a UI library you can leave this out and style the rest however you want.https:\/\/codeburst.io\/media\/6f4f952b57f49e4c14c60a0413b25d19<\/p>\n\n\n\n
Conclusion<\/h1>\n\n\n\n
That\u2019s it, by this point you should a functioning app that\u2019s pulling in and displaying data from the coinbase API. What you build now is up to you and the sky is the limit.<\/p>\n\n\n\n
Crypto is really hyped area right now with lots of public interest so there is tons of opportunity to create websites and apps that could be monetized in a number of different ways.<\/p>\n","protected":false},"excerpt":{"rendered":"
This tutorial will walk you through how to create a basic cryptocurrency dashboard using ReactJS and the free Coinbase API.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[177,65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2244"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2244"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2244\/revisions"}],"predecessor-version":[{"id":2245,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2244\/revisions\/2245"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- url<\/strong>– a base URL to the coinbase API<\/li>
- pair- <\/strong>current currency pair selected by the user<\/li>
- currencies- <\/strong>all available currency pairs on Coinbase<\/li>
- Coinbase API docs \u2014 https:\/\/docs.pro.coinbase.com\/<\/a><\/li>
- Add multiple time segments for users to look at historical pricing for each currency<\/strong><\/li>