Angular frontend - Blockchain in Javascript (part 5)

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

Feel free to fork, modify & improve it. Pull requests are appreciated!

☞ Follow me on

[AChainofBlocks]

SavJee, you are the Man!! I am so happy you have resumed your regular cadence for creating content. You have truly inspired me to create my own channel and website as well. Please keep up what you are doing, your hard work never goes unnoticed and you are doing a lot of good by spreading these messages!!


Cheers!

[lindadehaan]

Awesome tutorial series, Savjee! Doing this made blockchain so much easier to understand.

[TravisFont]

Happy that you did this in Angular and React! Seriously! And well done.

[haydenamundrud]

This tutorial series is awesome, please add on to it!

[Martin-pbts]

Thanks Savjee. Really appreciated being able to go through the creation of a blockchain app like this.

[Aeturnist]

Thank you very much for your kind effort. Now I have good understanding about how blockchain works.

[MrDenewbie]

The series is great! Rather than how to create the GUI, would like to know how the data is recommended to be persisted.

[PriyanshuShukla]

Just a heads up, if you are getting a blank screen in the web browser upon loading the project, it is due to angular not being able to identify crypto.createHash() function (as seen in the console). The reason being the crypto module needs to be loaded manually in Angular 2+.

[ivelinivanov]

Man, that is awesome. I love your javascript blockchain series. I learned so much from it. I was wondering can you also do a proof-of-stake consensus blockchain implementation and how that would work? Also you keep saying this is for learning purposes only but what if you really want to build your own blockchain and cryptocurrency, how would the node interacting and keeping themselves honest and verifying everything the send would work? I am hoping you make a video on that. I want to build my own cryptocurrency :)

[e-sotopservices]

Damn man you are good. i wish you were my computer science teacher

[ethantun]

Awesome and easy to understand tutorial series.

[sudsierspace]

Impressive tutorial series, very very good content, like in all vids

[franzferdinan]

Awesome videos! Can you make one for adding smart contracts?

[OBeymydreamz]

Can you also showcase a p2p with 3-5 dummy nodes?

[adams]

I haven't watch this video yet but thank you for the 4 previous one. I learned a lot.

[RR-mjey]

How can we deploy it so multiple users can use it? From what I understand, if we were to just deploy it to a server just like any web app, then it wouldn't be considered decentralized anymore right?

[abubakarkhawaja]

at 18:30 i did the exact same code but Nothing is showing on my browser even I changed The Routing Path but sill Nothing All it shows gennisi Block components But Not like It showing On your Screen, And Also When You did {{block.hash}} is there any extension to get it from there?

[stocksandblocks]

I always follow your videos, they are amazing

[williamikennanwosu]

These are great tutorials!! I followed you all the way up to the video from part 1 but you lost me when you downloaded dependencies from github. It didn't work for me. I was getting an npm ERR premature close when using npm install and I didn't know how to resolve it.

[IgorKozarchuk]

When creating a project using "ng new mycoin", I receive an error in terminal "The Schematic workflow failed". Therefore I got another error afterwards "An unhandled exception occurred: Cannot find module when running "ng serve". Any help?