Skip to content
[ ARKIV ] Docs

Running the App & Next Steps

This guide targets the Tiramisu testnet. Check Networks for current testnets and faucets.

You built both the backend and the frontend. Now run them together.

1. Run the Backend

Section titled “1. Run the Backend”

If the backend is not active yet, start it in your terminal. This service must run continuously to publish new data.

Terminal window
node --env-file .env index.js

2. Serve the Frontend

Section titled “2. Serve the Frontend”

Browser security policy (CORS) blocks you from opening index.html directly from your file system. Serve it with a local web server instead. The easiest way is with npx.

In the arkiv-dashboard/frontend directory, run:

Terminal window
npx serve

This command starts a local server and gives you a URL, usually http://localhost:3000.

3. View Your Dashboard

Section titled “3. View Your Dashboard”

Open the URL from the previous step in your web browser.

The dashboard appears. It can take up to 60 seconds for the first data points to appear, because the backend needs time to fetch and publish them. After that, the dashboard updates automatically with new data from Arkiv.

Summary

Section titled “Summary”

You built a full-stack application with Web3 guarantees.

  • You created a Node.js backend that acts as a data publisher, and it writes real-time information as entities to Arkiv.
  • You built a vanilla JS frontend that acts as a data consumer, and it queries Arkiv with a public client and shows the results.
  • You learned the fundamentals of the Arkiv SDK: createWalletClient for writing, createPublicClient for reading, and the query builder for filtering data.

Full Source Code

Section titled “Full Source Code”

The complete source code for this tutorial is on GitHub: https://github.com/Arkiv-Network/learn-arkiv/tree/main/tutorial-source-code/fullstack-tutorial

Next Steps

Section titled “Next Steps”

This project is a good starting point. Here are some ideas to extend it:

  • Add more tokens. Modify the backend and frontend to support more cryptocurrencies.
  • Show more data. The CoinGecko API gives a wealth of data. You can add trading volume or 7-day price changes.
  • Build more complex queries. Experiment with the query builder of Arkiv to filter data by time range or other parameters.
  • Deploy it. Deploy the frontend to a static hosting service like Vercel or Netlify so anyone can view your dashboard.