Polkadash: a VueJS Dashboard Starter Kit for your Substrate Chain

Polkadash is a blank-slate dashboard for you to build your UI on. Let’s learn about setting it up.

The dashboard is VueJS-based and comes with a connection changer built-in so you can switch Substrate chain endpoints at will.

A demo component, BlockNumber, is included to prove that the connection works. Connecting to an endpoint of any Substrate-based chain will show the correct block number in the BlockNumber tab.

The dashboard works on all operating systems and browsers and is mobile-friendly. You want to have NodeJS version 10+ installed (preferably via NVM), and you also need Yarn installed globally.

git clone https://github.com/swader/polkadash
cd polkadash
mv src/config.example.js src/config.js
yarn serve --port 8081

This will host the app on localhost:8081:

DotLeap Dashboard

To start the app on another port, change the --port value. To change the default endpoint to connect to, change the value in config.js.

The starter kit is very much a work in progress, a living piece of code, so it’s very receptive to pull requests for improvements. Add demo components, improve styling, or resolve some of the outstanding issues. There might even be some bounties for them!

For tutorials on how to build on top of this starter kit, see the Polkadash tag.

Remember to subscribe to our newsletter to be kept up to date on new posts and to be kept in the loop about Web 3.0 developments.

Related posts