Build a Simple Vue.js Interactive Web-Based Cryptocurrency Price Tracker: A Beginner’s Guide

Written by

javascriptdebugged

in

In the rapidly evolving world of cryptocurrencies, staying informed about price fluctuations is crucial for anyone involved, from seasoned investors to curious newcomers. Manually tracking prices across various exchanges can be a tedious and time-consuming task. This is where a real-time cryptocurrency price tracker comes in handy. In this tutorial, we will walk you through building a simple, yet functional, web-based cryptocurrency price tracker using Vue.js. This project will not only provide you with a practical tool but also help you solidify your understanding of Vue.js fundamentals, including components, data binding, and API calls.

Why Build a Cryptocurrency Price Tracker?

Beyond the obvious benefit of real-time price monitoring, building this project offers several advantages:

  • Practical Learning: You’ll gain hands-on experience with core Vue.js concepts.
  • Real-World Application: You’ll create a tool that is genuinely useful.
  • API Integration: You’ll learn how to fetch and display data from external APIs.
  • Component-Based Architecture: You’ll understand how to structure a Vue.js application using reusable components.

Prerequisites

Before we begin, ensure you have the following:

  • Basic HTML, CSS, and JavaScript knowledge: Familiarity with these languages is essential.
  • Node.js and npm (or yarn) installed: These are required for managing project dependencies.
  • A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.

Setting Up the Project

Let’s start by setting up our Vue.js project using the Vue CLI (Command Line Interface). Open your terminal and run the following command:

npm create vue@latest cryptocurrency-tracker

During the setup, you’ll be prompted to choose options. You can generally accept the defaults. When prompted to select a preset, choose “Default (TypeScript, Babel, Router, Vuex, CSS Pre-processors)” or “Manually select features” and choose the necessary options based on your preferences. After the project is created, navigate into the project directory:

cd cryptocurrency-tracker

Now, install the necessary dependencies:

npm install

Project Structure

Once the project is set up, your project structure should look something like this:

cryptocurrency-tracker/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.vue
│   ├── components/
│   │   └── ...
│   ├── main.js
│   └── ...
├── package.json
├── ...

We will primarily be working within the src directory. Specifically, we’ll focus on:

  • App.vue: The main component, which will serve as the entry point for our application.
  • components/: Where we’ll create our custom components, such as the price display component.

Fetching Cryptocurrency Data

To get real-time cryptocurrency prices, we’ll use a public API. There are several free APIs available. For this tutorial, we will use the CoinGecko API, which offers a free and reliable service. You can explore their API documentation at https://www.coingecko.com/en/api/documentation.

We’ll use the fetch API in JavaScript to make requests to the CoinGecko API. Specifically, we’ll use the API endpoint to get the current prices of cryptocurrencies. Create a new file named CryptoPrice.vue in the components directory. This component will be responsible for fetching and displaying the cryptocurrency prices.

<template>
  <div class="crypto-price-container">
    <h3>{{ crypto.name }}</h3>
    <p>Price: {{ crypto.current_price }} {{ crypto.symbol.toUpperCase() }}</p>
    <p v-if="crypto.price_change_percentage_24h" :class="{'positive': crypto.price_change_percentage_24h > 0, 'negative': crypto.price_change_percentage_24h < 0}">
      24h Change: {{ crypto.price_change_percentage_24h.toFixed(2) }}%
    </p>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
export default {
  name: 'CryptoPrice',
  props: {
    crypto: {
      type: Object,
      required: true
    }
  },
  mounted() {
    // You can add any initialization logic here.
  }
}
</script>

<style scoped>
.crypto-price-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.positive {
  color: green;
}

.negative {
  color: red;
}
</style>

Explanation:

  • Template: Displays the cryptocurrency name, current price, and 24-hour price change.
  • Props: Receives a crypto object as a prop, containing the cryptocurrency data.
  • Style: Adds basic styling for better readability.

Next, modify App.vue to fetch and display the cryptocurrency data:

<template>
  <div id="app">
    <h1>Cryptocurrency Price Tracker</h1>
    <div v-if="cryptos.length > 0">
      <CryptoPrice v-for="crypto in cryptos" :key="crypto.id" :crypto="crypto" />
    </div>
    <div v-else>
      <p>Loading cryptocurrency prices...</p>
    </div>
  </div>
</template>

<script>
import CryptoPrice from './components/CryptoPrice.vue';

export default {
  name: 'App',
  components: {
    CryptoPrice
  },
  data() {
    return {
      cryptos: []
    }
  },
  mounted() {
    this.fetchCryptoPrices();
    // Refresh the prices every 10 seconds (adjust as needed)
    setInterval(this.fetchCryptoPrices, 10000);
  },
  methods: {
    async fetchCryptoPrices() {
      try {
        const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2Cethereum%2Cdogecoin&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=24h');
        const data = await response.json();
        this.cryptos = data;
      } catch (error) {
        console.error('Error fetching crypto prices:', error);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Explanation:

  • Import CryptoPrice: Imports the CryptoPrice component.
  • Data: Initializes an empty array cryptos to store the fetched cryptocurrency data.
  • mounted(): Calls fetchCryptoPrices() when the component is mounted and sets an interval to refresh the prices every 10 seconds.
  • fetchCryptoPrices(): Uses the fetch API to retrieve cryptocurrency data from the CoinGecko API. It then updates the cryptos data. The API endpoint used is for fetching the current prices of Bitcoin, Ethereum, and Dogecoin (you can easily change the IDs in the API endpoint to fetch other cryptocurrencies).
  • Template: Iterates through the cryptos array and renders a CryptoPrice component for each cryptocurrency.

Running the Application

To run your application, use the following command in your terminal:

npm run serve

This command starts a development server, and you can view your application in your browser at the address provided in the terminal (usually http://localhost:8080/). You should see the cryptocurrency prices updating every 10 seconds.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it’s because your browser is blocking requests to the API. This is a security feature. You can resolve this by using a proxy server. A simple solution for development is to use a CORS proxy. There are several online CORS proxies available. You would then prepend the proxy’s URL to the API request URL in your code. For production, you should implement a proper backend server to handle API requests.
  • Incorrect API Endpoint: Double-check the API endpoint and ensure it’s correct. Typos can easily lead to errors.
  • Data Not Displaying: Ensure that the data is being fetched correctly. Use console.log(data) inside your fetchCryptoPrices() method to inspect the data being returned by the API.
  • Component Not Rendering: Verify that you have correctly imported and registered the component in App.vue.

Enhancements and Next Steps

This is a basic price tracker, and there are many ways to enhance it:

  • Add more cryptocurrencies: Modify the API request to include more cryptocurrencies.
  • Implement a search feature: Allow users to search for specific cryptocurrencies.
  • Add historical data: Display price charts and historical data using a charting library like Chart.js.
  • Implement user authentication: Allow users to save their favorite cryptocurrencies and customize their experience.
  • Improve styling: Enhance the visual appeal of the application using CSS frameworks like Bootstrap or Tailwind CSS.
  • Error Handling: Implement more robust error handling to display user-friendly error messages if the API fails.

Summary / Key Takeaways

In this tutorial, you’ve successfully built a basic cryptocurrency price tracker using Vue.js. You’ve learned how to set up a Vue.js project, fetch data from an external API, and display it in a user-friendly format. This project provides a solid foundation for building more complex web applications. Remember to always validate and sanitize your inputs when working with external APIs and user data. The ability to fetch and display dynamic data is a fundamental skill in web development, and this project provides a clear and practical example of how to achieve this with Vue.js. By understanding these concepts, you are well on your way to building more sophisticated and interactive web applications.

FAQ

Q: Can I use a different API?
A: Yes, you can. Simply replace the API endpoint in the fetchCryptoPrices() method with the endpoint of your chosen API and adjust the data parsing accordingly. Make sure to consult the API’s documentation.

Q: How do I add more cryptocurrencies?
A: Modify the ids parameter in the API request URL to include the IDs of the cryptocurrencies you want to track. You can find the IDs on the CoinGecko website or API documentation.

Q: How can I style the application?
A: You can use CSS directly in the <style> blocks of your Vue components or use a CSS framework like Bootstrap or Tailwind CSS to streamline the styling process.

Q: How do I handle API errors?
A: Use a try...catch block around your API request in the fetchCryptoPrices() method. Inside the catch block, log the error to the console and/or display a user-friendly error message in the application.

Building this cryptocurrency price tracker is just the beginning. The skills you’ve acquired, such as making API calls, handling data, and structuring a Vue.js application, are transferable to a wide range of web development projects. Continue to experiment, explore new features, and refine your skills. The world of web development is vast and exciting, and with each project, you’ll grow more confident and capable.

More posts