Skip to content

Prerequisites & Project Setup

Before we start writing code, let’s ensure you have the necessary tools and set up our project structure.

Make sure you have the following installed on your system:

  • Node.js: A recent version, specifically v20.6.0 or higher. We will use new features like the --env-file flag for loading environment variables.
  • A Text Editor: A code editor like VS Code is highly recommended.
  • An Arkiv Testnet Private Key: To create entities (write data) on the Arkiv blockchain, you need a wallet. We’ll be using the public Kaolin testnet, so no real funds are at risk.

If you don’t have a private key, you can easily generate a new one by running this command in your terminal:

Terminal window
node -e "console.log('0x' + require('crypto').randomBytes(32).toString('hex'))"

Important: Copy the output and save it somewhere safe. Never share your private keys with anyone.

Now, let’s create our project directory and install the required libraries.

Open your terminal and run the following commands:

  1. Create and enter the project folder:

    Terminal window
    mkdir arkiv-dashboard
    cd arkiv-dashboard
  2. Initialize a Node.js project: This creates a package.json file.

    Terminal window
    npm init --init-type=module -y
  3. Install dependencies: We need the Arkiv SDK for blockchain interaction and axios to fetch data from the CoinGecko API.

    Terminal window
    npm install @arkiv-network/sdk axios
  4. Create project files: We will need a backend directory for our data-fetching script, and a frontend directory for the dashboard.

    Terminal window
    mkdir backend frontend
    touch backend/index.js backend/.env
    touch frontend/index.html frontend/style.css frontend/script.js frontend/charts.js
  5. Add your private key: Open the backend/.env file and add the private key you generated earlier.

    backend/.env
    PRIVATE_KEY=0xYOUR_PRIVATE_KEY_HERE

Your project structure should now look like this:

  • Directoryarkiv-dashboard/
    • Directorybackend/
      • .env
      • index.js
    • Directoryfrontend/
      • index.html
      • charts.js
      • script.js
      • style.css
    • Directorynode_modules/
    • package.json
    • package-lock.json

Your project is now set up and ready. In the next section, we’ll build the backend service.