March 8, 2023

Crypto Dashboard Project – Build a Cryptocurrency Portfolio Dashboard with a Template

Table of Contents

Are you looking to create your own crypto portfolio dashboard? If so, then you are exactly where you need to be. This tutorial will show you how to use the cryptocurrency dashboard template from Moralis to create a copy of MetaMask’s asset table in no time! If this sounds interesting and you want to build a crypto dashboard project, join us in this tutorial as we cover the process from start to finish! 

If you are eager to jump straight into the code, you can find the complete GitHub repository for the project down below: 

Cryptocurrency Dashboard Template Repository – https://github.com/MoralisWeb3/youtube-tutorials/tree/main/metmask-asset-table

We will utilize the industry-leading Web3 APIs from Moralis to fetch the associated blockchain data and authenticate users. So, if you would like to follow along, remember to sign up with Moralis. You can create an account for free and immediately start leveraging the full power of blockchain technology!  

Scale Your Crypto Portfolio Dashboard Project - Sign Up with Moralis

Overview 

Today’s tutorial will show how to build an asset table similar to the one from MetaMask using the Moralis cryptocurrency dashboard template. What’s more, we’re going to complete this process in three steps:  

  1. Set up a project and create a Moralis account
  2. Use Moralis’ cryptocurrency dashboard template from GitHub
  3. Start the app

After completing the three steps of our tutorial, we dedicate a section to exploring the intricacies of portfolio dashboards. As such, if this is a new concept for you, we recommend starting with the ”What is a Crypto Portfolio Dashboard?” section before jumping into the tutorial! 

Lastly, the article also explores how you can take your crypto dashboard project to the next level. In doing so, we explore the easiest way to integrate other Web3 functionality into your projects to go beyond the asset table.

During our tutorial, you will – among other things – familiarize yourself with the Moralis Authentication API and Web3 Data API. However, these are only two industry-leading blockchain development resources provided by Moralis. In combination with these interfaces, you can also find amazing Web3 development content here on the blog. For example, explore Web3 marketplace development or learn how to build a Web3 Amazon clone.  

What’s more, did you know you can access these fantastic Web3 development tools for free? All you must do is register with Moralis, which only takes a few seconds! 

Build Using a Cryptocurrency Portfolio Dashboard Template

Tutorial: Build a Crypto Portfolio Dashboard 

In the coming sections, we will teach you how to build your own crypto portfolio project using Moralis’ cryptocurrency dashboard template in three straightforward steps. In doing so, we will show you how to set up your own NodeJS application with a backend Express server. The application features a Web3 authentication flow, enabling users to sign in with their MetaMask wallets. Once signed in, the app displays the user’s assets in a neat portfolio table. 

However, before we get into the process of building the crypto portfolio dashboard, we will start with an application demo. This will give you a more profound understanding of what you will be working towards. So, without further ado, let us take a closer look at what you will end up with after completing this crypto dashboard project tutorial!  

Demo – The Moralis Cryptocurrency Dashboard Template 

As mentioned, let us briefly explore the cryptocurrency dashboard template from Moralis. This will give you an idea of what you are working towards, making it easier to visualize and understand the code’s functionality. Nevertheless, here is the crypto portfolio dashboard login page:

Landing Page of a Crypto Portfolio Dashboard

As you can see, this page is relatively simple, only featuring a heading and a ”CONNECT METAMASK” button at the top right. Clicking this button prompts the user’s MetaMask wallet, enabling them to sign in: 

Authentication Functionality for a Cryptocurrency Portfolio Dashboard

Once signed in, the cryptocurrency dashboard template autonomously generates and populates a table featuring all tokens held by the user: 

Asset Table Illustrated for Our Crypto Portfolio Dashboard Project

What’s more, at the top of the crypto portfolio dashboard, you can also find a navigation bar with a drop-down menu and three different tabs: 

This provides additional options, enabling users to toggle between various assets, transactions, and much more!

If you found this interesting and want to create your own crypto dashboard project, join us in the sections below, where we break down the process from start to finish!  

Step 1: Set Up a Project and Create a Moralis Account 

Now, with a better idea of what you are working towards, let us jump straight into the tutorial and cover the first step. To begin with, you initially need to open your preferred integrated development environment (IDE) and create a new project folder. 

We will use Visual Studio Code (VSC) for this tutorial, but you are free to use an IDE of your choice. However, note that the process might occasionally differ if you opt for another alternative. 

Along with a project folder, you also need a Moralis account. As such, if you have not already, sign up with Moralis straight away. You can create an account entirely for free, and it only takes a couple of seconds! That said, why do you need a Moralis account in the first place? The answer to this question is simple: a Moralis API key. With an API key, you can make calls to Moralis’ enterprise-grade Web3 APIs, which is essential for authentication users and querying on-chain data! 

Once you log in to your Moralis account, you will be able to find your key by navigating to the ”Web3 APIs” tab:

Go ahead and copy your key, as you will need it in the next step! 

Step 2: Use Our Cryptocurrency Dashboard Template from GitHub 

For the second step, you must clone Moralis’ cryptocurrency dashboard template from GitHub. As such, click on the link for the repository down below and copy the template to your local device: 

Cryptocurrency Dashboard Template Repository – https://github.com/MoralisWeb3/youtube-tutorials/tree/main/metmask-asset-table

With a local copy of the crypto dashboard project, you also need to make a few configurations to the code. More specifically, you need to configure your environment variables. To do so, start by renaming the ”.env.local.example” file in the ”nextjs_moralis_auth” folder to ”.env.local”.

Next, open this file, and you should find four environment variables:

MORALIS_API_KEY= xxxx
APP_DOMAIN=amazing.finance
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32

First up, you need to add your Moralis API key to the MORALIS_API_KEY variable. From there, visit ”https://generate-secret.now.sh/32” to generate a new value for the NEXTAUTH_SECRET variable and input it into the code. All in all, it should now look something like this: 

MORALIS_API_KEY= JnJn0MWxFNPv4…
APP_DOMAIN=amazing.finance
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= 1cbaf74aa33b40157…

That is it for the required code configurations! You are now ready to start the app, and we will show you how to do so in the final step! 

Step 3: Start the App 

Before starting the app, you need to install the required dependencies. Let us begin with the backend! Open a new terminal by clicking on ”Terminal” at the top, followed by ”New Terminal”: 

Cryptocurrency Dashboard Template in Visual Studio Code

From there, cd into the backend folder and run the following command: 

npm i moralis dotenv cors express

Next, you can go ahead and start the Express server by running the following terminal input command:  

node index.js

That is it for the backend; let us now take a closer look at the frontend. First, cd into the ”nextjs_moralis_auth” folder and install the required dependencies using these two commands: 

npm i moralis @moralisweb3/next next-auth
npm i wagmi ethers@^5

From here, you should now be able to start the app by executing the following terminal command: 

npm run dev

That is it! You have now successfully used the cryptocurrency dashboard template from Moralis to create a copy of the MetaMask portfolio dashboard!

If you want a complete code breakdown, please check out the video below from the Moralis YouTube channel. In this clip, one of our talented software engineers walks you through the entirety of the code, giving you a better understanding of how everything works under the hood: 

What is a Crypto Portfolio Dashboard? 

If you are new to the Web3 development space, chances are you are not familiar with the ins and outs of crypto portfolio dashboards. However, odds are you’ve likely heard of conventional financial dashboards. As you know, those are web-based platforms where you get a complete overview of all your assets and financial accounts. A crypto portfolio dashboard is quite similar to this but for blockchain-based assets!

Cryptocurrency Dashboard Template from Moralis

A crypto portfolio dashboard is a digital platform that can take many shapes and forms. These platforms usually come as websites or mobile applications. The main focus of a portfolio dashboard is to track cryptocurrency accounts and assets. This includes everything from current holdings and historical prices to an account’s transaction history. Consequently, these platforms provide the opportunity to fully manage your assets and plan your finances. 

Here are three reasons why you might want to use a crypto portfolio dashboard: 

  • Financial Overview – Since a crypto portfolio dashboard accumulates all your assets in one place, you gain a complete financial overview of all your holdings. 
  • Tracking Assets – Along with a financial overview, you can generally track assets and transactions through a portfolio interface. This can, for instance, include price developments to see how your assets are progressing over time. 
  • Manage Assets – Many crypto portfolio dashboards also feature functionality to manage your assets. This includes buying, selling, trading, staking, etc., your cryptocurrency assets. 

In this tutorial, we are mainly focusing on the financial overview aspect of crypto portfolio dashboards. However, in the next section, we will point you in the right direction toward going beyond this project to implement functionality such as asset management! 

Take Your Crypto Dashboard Project to the Next Level 

Interacting with a blockchain network and querying on-chain data have – from a traditional perspective – been relatively “taxing” tasks. This, in combination with high entry barriers, has made getting into Web3 development a daunting endeavor. Fortunately, this is no longer the case, thanks to Web3 infrastructure providers such as Moralis! 

Moralis supplies a variety of enterprise-grade Web3 APIs, making Web3 development as seamless as Web2. With these tools, you can effortlessly integrate functionality into your crypto dashboard project, such as asset management and tracking. Moreover, with the Moralis Streams API, you can stream on-chain data into the backend of your crypto dashboard project via Web3 webhooks. As such, you can easily set up notifications, alerting users when something of interest happens! 

Along with industry-leading APIs, you can also use Moralis to find the best faucets to get free testnet tokens for blockchain development. For instance, check out our articles exploring the Optimism Goerli faucet or Goerli testnet faucet

To further explore the accessibility of working with Moralis, we recommend checking out some of our guides on how to build a block explorer or how to build a decentralized autonomous organization

Remember that you can access all these Web3 development resources entirely for free! All you need to do is register with Moralis. In doing so, you can immediately start leveraging the full power of blockchain technology to build Web3 platforms smarter and more efficiently!

Summary – Cryptocurrency Dashboard Template

This article taught you how to build a MetaMask asset table clone using the Moralis cryptocurrency dashboard template. Thanks to this development resource, you were able to create a cryptocurrency portfolio dashboard in three simple steps: 

  1. Set up a project and create a Moralis account
  2. Use Moralis’ cryptocurrency dashboard template from GitHub
  3. Start the app

Along with a complete tutorial on how to build your own crypto dashboard project, the article also explored the intricacies of crypto portfolio dashboards. This section taught you that a crypto portfolio dashboard is a platform where you get a financial overview and can track and manage assets. Furthermore, in the article’s last section, you additionally got to explore how you can take your dashboard to the next level using the Moralis Web3 APIs

If you have followed along so far, you now know how to create your very own crypto portfolio dashboard. From here, it is now up to you to build on this template and implement additional features. If this is your ambition, remember to sign up with Moralis to access a more seamless developer experience! 

If you liked this tutorial, feel free to check out additional blockchain development content here on the Moralis Web3 blog. For example, learn how to build on Aptos or explore the Arbitrum testnet

Market Data API
Build amazing trading and portfolio dapps with this Market Data API. Keep users engaged with up-to-date data!
Market Data API
Related Articles
December 11, 2022

Web3.js vs Ethers.js – The Full 2023 Guide to ETH JavaScript Libraries

October 16, 2023

What is ERC-4337? Full EIP-4337 Guide

February 16, 2023

How to Deploy an NFT Using an NFT Smart Contract Example

December 9, 2022

ERC 1155 NFTs – What is the ERC-1155 Standard?

November 9, 2022

Blockchain Discord Bot – Build a Discord Bot for On-Chain Events

September 12, 2023

How to Get All NFT Tokens Owned by a User Address

December 7, 2022

Python for Ethereum Development – Build a Web3 Ethereum Python App

August 17, 2022

Web3 Identity – The Full Guide to Authentication, Identity, and Web3

February 11, 2023

Exploring the #1 Ethereum Price API to Get Token Prices