Blockchains are hard to understand, so let’s visualize their inner workings by building a front-end application in Angular. I’ll show you how to visualize blocks on the chain and the transactions inside them. We’ll also make a UI to create new transactions and to mine new blocks.
All of this is based on the Javascript blockchain implementation that we made in the previous 4 parts: SavjeeCoin!
☞ Live demo of what we’re going to build in this video:
☞ Parts in this tutorial:
00:00 Introduction – What we’re going to build
03:06 Installing dependencies & creating project
06:00 Creating a nice header
08:10 Implementing the Blockchain service
13:44 Visualizing blocks on the chain: create BlockchainViewer & BlockView component
21:52 Visualizing transactions with TransactionsTable component
29:13 Making a settings page (to configure difficulty & mining reward)
33:56 Creating new transactions with CreateTransaction page
41:50 Creating the “Pending transactions” page
47:20 Full demo: creating transactions, mining blocks and seeing them on the chain
☞ Previous parts
Part 1 – Creating blockchain –
Part 2 – Proof-of-Work –
Part 3 – Mining rewards –
Part 4 – Signing transactions –
☞ Source code is available on GitHub:
Feel free to fork, modify & improve it. Pull requests are appreciated!
☞ Follow me on
Twitter:
Facebook:
Blog:
GitHub: