Building a Cryptocurrency App with Vue.js and CryptoCompare API

With the booming of cryptocurrency world as one of the fastest growing markets since the born of the internet, a new door full with new opportunities has been opened for developers to create apps.

And while the trading volume worldwide on cryptocurrencies will continue to rise, they will be a huge demand for cryptocurrency apps to perform the exchange.

This is why in this tutorial…we’re going to build a cryptocurrency app with one the most growing and performant JavaScript frameworks Vue.js. And for the remote data part, we’re going to use the CryptoCompare API, which is 100% free.

We’ll be able to get information about current prices of cryptocurrencies among other data like (Market cap, Volume and Circulating supply). Also, we’re going to use the API to feed us with the latest news articles from all major crypto news providers that CryptoCompare has integrated with.

Note: No Sing Up process or any API key will be required for this application.

But before we diving in, let’s make a quick review on the tools and the resources we’re going to use in this tutorial. First, let’s start with the JavaScript framework.

What Is Vue.js?

Vue.js is an open source progressive JavaScript framework used to develop interactive web interfaces and single page applications. Very popular one and it can be easily integrated with whiting projects as front-end development.

Vue.js Features

Vue.js framework has many features that make him the best alternative to other frameworks like AngularJS or ReactJS. But we’re going to outline only the core elements and the ones that we’ll be encountering during this tutorial.

Flexibility

Vue.js is offering an official support for a variety of build systems, without any restrictions on how you should structure your application. And many developers are enjoying this freedom.

Complexity

In terms of design and API, Vue is much simpler than AngularJS. It means that, any web developer can easily build a simple application within a day, which isn’t true for Angular.js.

Runtime Performance

Since the speed is a deciding factor when it comes to JavaScript frameworks, Vue is extremely fast. It has a clear tracking-dependency observation system with synchronized queuing ensures changes trigger individualistically. And this isn’t the case with AngularJS.

Vue Directives

Vue comes with collection of built-in directives such as v-if, v-else, v-for and v-model, which are used to perform various actions on the frontend.

Data Binding

This Vue feature helps you assign values, changing CSS classes and manipulating HTML attributes with the help of binding directive called v-bind built-in within the framework.

Vue Template

Vue provides us with HTML-base templates that bind the DOM with the Vue instance data.

Routing

Vue make easy for us to navigate between the pages (components) using its routing library the vue-router.

Comparing Vue.js with other Frameworks

If you ask me to compare this framework with Angular and ReactJS, Vue is the best of both worlds…why? From React, it got props, one-way data flow for components hierarchy, virtual rendering ability, performance and the proper state management of apps.

And from Angular, it got similar templates with good fit syntax, and the two-data binding feature that you can use inside single component when you need to.

By the way, the Vue organization has dedicated a whole page that compares their framework with others like AngularJs and ReactJs, which will definitely help you figure out which framework to use if you had the choice to select one among the three.

What is the CryptoCompare API Service?

CryptoCompare is a global cryptocurrency market data provider, founded in 2014. It provides access to data in real-time with high-quality, reliable market and pricing data on 5,300+ coins and 240,000+ currency pairs for institutional and retail investors.

It has huge among of data that we can use (Price, Historical Data, News and Streaming…) as shown in the image below, but our concern will be only on the price and the news section.

CryptoCompare Data

How We Are Going To Design Our Application?

To speed up the UI construction for this application, we’re going to use a responsive CSS framework called Bulma. And it’s one of my favorite CSS frameworks out there.

Bulma is an open source, responsive, lightweight and stylish CSS framework made by Jeremy Thomas. Easy to learn and use, it’s has readable classes which may be a huge advantage for some developers.

In terms of introduction, that’s all what we need. Now it’s the time to take a look at the app in the next section, and then we’re going to start building it step by step.

How to Edit a PDF | JotForm

Project Overview

In the home page of this application, you’ll be able to view the current trading info (price, volume, open, market cap, circulating supply etc.) for a list of five cryptocurrencies in any other currency that you need. Of course, you can add other coins symbol if you wish. Then, they’ll be another page for display the latest news articles with possibility to read the whole story of any article you’re interested in.

And this is a YouTube video that demonstrates the basic functionality of the project:

Cryptocurrency Application Overview

It is an exacting app, isn’t it? I can almost feel your impatience, so let’s get started.

The complete code source for this tutorial is available on GitHub.

Pre-Requirements

To follow along with this tutorial, you’ll need a development machine with the following requirements.

· Nodejs & npm ( we need its npm package manger to install the Vue-CLI)

· Vue-CLI ( for generating fresh Vue projects)

· Basic understanding of Vue.js.

Once everything is setup, we can proceed.

Setting the Vue.js Project

In this section, we’ll use the Vue CLI to generate a new Vue project. But before we do that, we need to install globally the vue init functionality to scaffold the project with the Vue webpack template which is a build tool for handling assets.

So, open a command line and run the following:

npm install -g @vue/cli-init

Now, let’s use the Vue CLI to start a new project:

vue init webpack vue-crypto-app

During the creation process, you will be presented with a number of query prompts (questions). Answer the question displayed on the screen like so. And make sure to set “yes” for installing the vue-router.

Installing the project dependencies

Note: The Vue CLI will install automatically all the dependencies after creating the project. If that isn’t the case with you, try to type the following command in your console “cd vue-crypto-app && npm install”.

You can start a development server by navigating within the project’s root folder and running the following commands:

cd vue-crypto-app 
npm run dev

The app will open on http://localhost:8080 in your default browser. And you should see the following starter template:

Vue Starter Template

Defining the Vue Main Template

To help the view of the application look nice, we’ll use Bulma CSS Framework to style our application along with Font Awesome 5, which will provides us with icons to use.

They are three ways to get started with Bulma, but for this tutorial we’ll pull-in our CSS Framework from the CDN only. And the place to that is in the index.html file, since he represents the entry point to the front end of this application, and its impact will be across all the components.

Using the CDN to Link the Bulma Stylesheet

Now, open the index.html file and update it with the following code:

Now that the Vue main template is setup, it’s the time to start building the components.

Vue.js a component-based framework, so we need first to split app into individual components (two components in our case), one for displaying the current price and other trading information about our coins, and the second one will keep us update with the latest news on the cryptocurrencies world. So let’s start with the first one.

Building the Home Component

Before adding the home component, we need to remove any file inside the src/components folder (remove the Hello.vue file), than add the Home.vue component.

Installing the HTTP Client Library

Our application needs to be connected to the cryptocurrency API service, that’s why we need an HTTP client library called Axios to handle that.
In the command line run:

npm install axios --save

Unlike Angular which comes equipped with HTTP client library, In Vue.js and ReactJs you need to install the Axios library in order for you to make API calls.

Now, open the src/components/Home.vue and add the following template to it:

Inside the <template> tag we have some html markup. Within this markup, we have a v-for directive in the form of “(value, key, index) in coins”. But why we didn’t use the form “coin in coins”.

Because the source data in this case coins, is an object and not an array. This is why we have to use that form to iterate through the properties of the coins object.

So, in this case:
• key: will represent the coin names.
• value: will represent the data of each coin.
• Index: to display the current coin position.

Next, in the same file and underneath the <template> tag, add the following code:

First, we’ve imported the axios package to connect the app with the CryptoCompare API and bring the full coins data values.
Next, under the export default, we have the data attribute that contain two properties:

• coins: an array property that holds all the data of our coins list.
• errors: an array property for holding any error messages if anything goes wrong.

Then, we’ve added an already built-in function within Vue called created(), which fires up when the component is first loaded. And this is the perfect place to put the axios get request towards the API service.
Inside the created() function, we have an axios.get method which accepts the API endpoint as its first argument.

In this component, we’re going to display the price, the market cap, the volume, the open for the last 24 hours and the circulating supply for the five different currencies listed below:

1.Bitcoin (BTC).
2. Ethereum (ETH).
3. Dash (DASH).
4. Dogecoin (DOGE).
5. Theter (USDT).

You can modify the above URL parameters to include other coins symbol if you wish. But if you have no idea where to get the correct coins symbol, head over to CryptoCompare site and selected some symbol from ones bordered with the red color as described in the image below.

Coins List To Select

Than after axios.get, we used another method called then to set the value of this.coins to the response.data.DISPLAY. The respons.data is going to return two JSON Arrays RAW and DISPLAY. They both return the same values but the only difference is that DISPLAY return values along with their currencies sing like the dollar sing($) and the billion sing(B) which will help us understood more those numbers.

To make things resonate with you, take the above URL parameter and paste it in your browser to analyze the returning data and see the difference between the DISPLAY and RAW objects that we’ve just mentioned. Or you can visit the CryptoCompare API documentation to discover all of the potential endpoints you can designate including price, coins list, historical data, streaming, news…etc.

Now that we’ve completed the Home component, let’s jump strait forward to create the News component, and then you your application well be ready to rock your world.

Building the News component

Having coin prices going up and down without logical explanation or any related events that explain those changes make no sense, this is way we need to create another component that will help us to go beyond those numbers and reach the complete picture…the news component.

Its main functionality is returning the news articles from the providers that CryptoCompare API integrated with and displays them in the application.

In your code editor, navigate to src/components and create a new file called News.vue, then add the following template at the top of it:

Within the <template> tag we simply have some html code, but the important piece I want you to focus on is the v-for directive, which will be responsible for rendering a list of items (news article) whiting the news source array.

The v-for directive requires a special syntax in the form of “item in items”. In this case “item in news”, where the news is the source data array and item is an alias for the array element being iterated on.

The only difference between this v-for directive from one mentioned in the Home component is that this one iterate over an array, but the other one is iterating over and object.

Next, under the <template> tag, let’s add the <script> tag as follows:

It’s almost the same as the Home component <script> tag, but let’s describes bravely what we did here.

As always, to be able to make API calls, we need to import the axios client library as showed in the first line of code.

Next, in the data attribute we have two properties defined as array, news for holding the returned news articles from the API, and the second one is errors…for holding any unexpected errors that might occur during the HTTP request.

Then we used the axios.get request method whiting a passing URL parameter to retrieve the latest news articles from the CryptoCompare API.

Finally, we used the then method to set the this.news to the response.data.Data and display the full data object in the browser console using the log function.

One more thing to finish this component is by adding the <style> tag to it. Just under the <script> tag, add the following CSS code:

This CSS code above will claim that we have clickable titles once the user hovers above them. And by adding the “scoped” attribute to the <style> tag we’re limit the CSS for this component only.

Now that we’ve completed the two components of this app, let’s find out a way to navigate between them.

Adding Navigation with Vue Router

The vue-router plugin should be already installed on your project, if it’s not installed, run the following command from the root folder of your project:

npm install --save vue-router

Now, navigate to src/main.js file, and make sure that the import statements are as follows:

If your file looks similar to the one above, than the vue-router plugin was already setup with webpack by the Vue CLI.

Now, let’s explain the code snippet above.

The first line is importing the Vue. The second line is bringing in a component called App, which serves as the root component for the application. The third one is importing the router that we’ll be explained in the next file (src/router/index.js). The fourth line tells Vue whether or not to show warning messages in the developer console of your browser.

In the finale code block, the Vue new instance is created and it will be mounted to #div in our html code…then it instantiated the App component along with injecting the router configuration.

Now, in src/router/index.js file, update your code with the following:

The first two lines are importing the vue and the vue-router. The third and fourth lines are importing the Home and the News components.

Next, we tell the Vue to use its vue-router plugin.

Finally, the router is configured with two routes. The router uses Vue components as pages.

So, in the above file, we want to render the Home component whenever we navigates to the / route, and rendering the News component whenever we navigates to the /news route.

Now, one more step ahead and we’ll be up and running. In src/App.vue file, update its content with the following code:

Within the <template> tag we just have some simple HTML markup, but they are two important pieces there that need to be covered. The <router-link>, which create html links to the routes we’ve created earlier. Then we got the <router-view> tag. The router uses this tag as a container for rendering different components that belongs to different routes.

The <script> tag contains nothing but a Vue component called App that does nothing.

The <style> tag just contains some nice CSS rules added manually to center our components horizontally.

Testing the Application

This is the section you’ve been waiting for. The moment to serve the application, and make sure that everything is up and running. In the command line within the project root folder run:

npm run dev

This will launch again the app in the browser, and you should see the following outcome:

The Home Component

And once you click on the News button, the app will show this:

The News Component

Pretty awesome, isn’t. Congratulation!

Conclusion

In this tutorial, we’ve used Vue.js Framework and CryptoCompare API to build a crypto currency app for displaying coins prices news articles related to the digital currency world, and the for the design we’ve implemented a CSS Framework called Bulma, to help the view of our application look nice.

I hope that this tutorial was useful and you’ve enjoyed building this Application without being overwhelmed.

Remember, you can upgrade this app by exploring the CryptoCompare API service, and implement more features integrated with the API.

If you have any question or something about this app, feel free to leave your comment and feedback down below.

The complete code source for this tutorial is available on GitHub.

All the best!