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:
savjee.github.io/savjeecoin-f...
☞ 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 - • Creating a blockchain ...
Part 2 - Proof-of-Work - • Implementing Proof-of-...
Part 3 - Mining rewards - • Mining rewards & trans...
Part 4 - Signing transactions - • Signing transactions -...
☞ Source code is available on GitHub: github.com/Savjee/savjeecoin-...
Feel free to fork, modify & improve it. Pull requests are appreciated!
☞ Follow me on
Twitter: / savjee
Facebook: / savjee
Blog: savjee.be
GitHub: github.com/Savjee
💌 Newsletter: newsletter.savjee.be (no more than once a month)

[@lindadehaan]

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

[@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!

[@anastasiaasanova5844]

. яп. . ир6 . ы.. Жы.. . бп

[@TravisFont]

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

[@KanecoV]

Where is the react version? I don't see it on the github page

[@haydenamundrud3419]

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

[@Martin-pb7ts]

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

[@foodfoodiesandmore]

Have you created? How do you deployed it on gh pages? Please help

[@Aeturnist]

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

[@richardchifamba6782]

You are the man SavJee, thumbs up

[@stocksandblocks9661]

I always follow your videos, they are amazing

[@ivelinivanov3414]

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 :)

[@harriskhawar7901]

youre a life saver! thanks!

[@sudsierspace9010]

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

[@adams8249]

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

[@daniellaerachannel]

thanks great tutorial!

[@ethantun5000]

Awesome and easy to understand tutorial series.

[@nguyenthanhtuan3919]

can you help me for some bug plz?

[@MrDenewbie]

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

[@e-sotopservices1898]

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

[@jameshan4026]

Very great video.

[@jiezheng6514]

Thank you for the videos.

[@dhruvilmodi5676]

Did you used this video and your project working? I am facing issues can you help with it

[@annewang4848]

Nice work

[@laoben1231]

Savjee, love your channel! Does Bitcoin open order can be moved to filed order? Thank you!

[@rimurutempest9921]

Good work!

[@_ifly]

just WOW!

[@Mikuso27]

u r Legend!

[@TastaJayaGulo]

Thank you very helpful. Is it possible for your idea to be turned into Proof of Stake so that the use of resources is lighter and costs less?

[@franzferdinan51]

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

[@zarefgamz2515]

bitcoin doesn't have a smart contract (the way he's doing is bitcoin alike)

[@monzermasri4490]

Brilliant

[@PriyanshuShukla7]

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+. This could be fixed by going to node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js and adding node: {crypto: true, stream: true}

[@Theonlykky]

I just want to say thank you so much for providing a solution for this. I have been stucked over a month with this issue and tried googling but couldn't find a solution. Additional infor for those who are having this problem: For line 91 in browser.js, change the node: false to node: {crypto: true, stream: true}.

[@FoTaMaHa]

@@Theonlykky well after adding {crypto: true, stream: true} in to node i still have the same problem (crypto.createHash is not a function). Can anyone help with this issue?

[@amitchatterjee4901]

@@FoTaMaHa @TheOnlyKKY I have the same problem - adding the line did not help the case.

[@amitchatterjee4901]

I ignored the above approach. Noticed that the previous tutorial was using crypto-js - went back to that code and it seems to go past this issue.

[@nikoreva2078]

Thanks a lot for providing this solution! It worked well!

[@ankushkumargaur6541]

Superb 👌👌👌

[@bskrksyp]

Hey Xavier, is it possible to tie this Front End to an actual Blockchain Private Network ? (not RDBMS) , any thoughts on that ? , Great explanation though

[@jiayoongchong2606]

Good n nice video. makes me wonder there are some very smart people out there are always here to fool some noobs willingly exchanged banks' digits for virtual digits ...

[@RR-mj7ey]

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?

[@abubakarkhawaja4762]

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?

[@wellingtra7926]

hello, can I ask you one issue? Is there any way to impact the transaction from outside .

[@MrMarcel43055]

how do you deploy it though, because every time we reload the site, the block got reset?

[@overcomplicatedreally]

Im a noob and want to know the pre reqs you have- though i have the npm extention- the command doesnt work :(

[@ariftumpalleonardosianturi1358]

does this type of blockchain can using a dataset, and can run/shown on multiple device ? need answer please

[@bowenwang]

Comment before watch

[@mikasaackerman2694]

I'm getting an error "not enough balance" when I create transactions? Does anyone know the reason?

[@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 @angular-devkit/build-angular/package.json'" when running "ng serve". Any help?

[@OBeymydreamz]

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

[@soumalyapaul9220]

Hello Mr Savjee this video about frontend application of blockchain ,I'm having a problem ,I'm installing the dependencies from your github repo but still can't make my application working ,so I need help from you..i like your videos very they are very informative and helpful..

[@florencebeukes287]

Can somebody please tell me whether I can test code on blockchain?

[@mineshpurohit5308]

/@types/elliptic/index"' has no default export.ts(1192) plz help me to solve this error

[@piotrkuterba6303]

can you help with error ? Error: src/app/services/blockchain.service.ts:2:28 - error TS7016: Could not find a declaration file for module 'savjeecoin/src/blockchain'. I tired with adding .d.ts file or use noImplicitAny in config file, but not use... i also get at some point "Cannot GET /" on white screen in browser. Is it connected with some angular version differences ?

[@abubakarkhawaja4762]

I get this running ... but why my wallet balance goes in negative figures no check for that?

[@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.

[@letenebrae3164]

I managed to solve this problem by creating a file called 'index.d.ts' in the root of src folder and declare them as modules like 'declare module 'savjeecoin/src/blockchain' ' and fixed some variable types problems. But in the end the routing of the block view component page just stop working when I import these modules...

[@Redeyedsi]

So, how would you add a wallet it to it?

[@nisreentariq2742]

I think u forgot to display the balance of the user. But it still awesome.

[@MakkusuDaily]

If we need to derive the balance of 1 public key, is it that we would need to run through the whole blockchains world from the bottom? I wonder if this is just so quick or it would take much much longer when the blockchains evolve continuously.

[@MakkusuDaily]

btw "Simply Explained" is so evil that it actually drives me to look for being "Fully Explained"! :P Thank you so much for the 5 videos which brought me here and visualized the aaaaabstract idea!

[@JusticeLy]

09:21 I can not perform npm install --save github: [my github] Have any another way to do that ?

[@adams8249]

Had to watch the video twice but I always have this error code "You cannot sign transactions for other wallets!" when I want to create a transaction. I think it has something to do with : " import { Transaction } from 'SavjeeCoin/src/blockchain'; ", because my editor is saying "Could not find a declaration file for module 'SavjeeCoin/src/blockchain'. '/path/to/blockchain' implicitly has an 'any' type. Can i have some help please ? Great video btw !

[@timothybasalo4038]

copy paste your earlier src folder to the new savjee folder. it should be '/src/blockchain' in the import

[@donmbelembe1089]

Nice videos, are you considering adding feature such as multiple nodes ?

[@simplyexplained]

Probably not. I don't want people to think they can actually build their own Blockchain with this.

[@donmbelembe1089]

@@simplyexplained okey, my boss at work asked me to build for him a small blockchain as an exemple so he can understand how it works

[@simplyexplained]

​@@awekeningbro1207 I don't want to create the illusion that you can develop your own blockchain in this way. This series was meant to show the basics concepts behind a blockchain, but it's no way meant to run in production. That being said, I might extend this series in the future with that disclaimer ;)

[@naeco1053]

result is 150 is your wallet is that correct? im confuse you started 100 coin but you have a 100 and 50 transactions and then you have a only -50 right? am i wrong think?

[@hactroclong4420]

I call getPendingTransactions() in PendingTransactions component return null. Someone help me?

[@matiurahmanwaqar6317]

please make more videos on blockchian dev

[@AnhNguyen-qf1cp]

Hi Savjee first of all, thank you for the great videos. I have some question according to this video. I created a Blockchain with the help of your first and second video and modified it to my needs (very easy one). Now I want to great an Angular frontend for my Blockchain. In minute 09:12 in this video you are showing that to are going to install your created Blockchain from github. I did not uploaded my Blockchain source code to github, so my question is how can I integrate my Blockchain into my project now? Where do I have to put my source code in my project in? In which folder? Out of interest, after getting and installing from github, where is the source code of the blockchain is put in? Thank you for your help, best regards

[@yerlibilgin]

You don't have to install it to and pull back from GitHub. Put it aside another folder (assume your angular is under ~/savjee-web and your blockchain code is under ~/savjeecoin, you can cd into savjee-web and call 'ng install --save ../savjeecoin' That's how I did it.

[@mehmetceylan2730]

@@yerlibilgin githubdan çekmedi hata veri blockchaini nasıl import edicez

[@gizemcelik6240]

@@mehmetceylan2730 bende ayni sorunu yasicorum, sonuc bulabildiniz mi acaba?

[@mehmetceylan2730]

@@gizemcelik6240 hatırlamıyorum şu an kusura bakmayın

[@prathameshjoshi9199]

@@yerlibilgin Thanks for the help, but now it says, "Could not install from FILEPATH as it does not contain a package.json file." Please help me from here.

[@Ferelmakina]

Gold

[@lyferp]

CAn you make a vid on how to make an external miner for the blockchain

[@amitchatterjee4901]

Thanks for a great series of tutorials. I have been following along just now. I completed the first four. I have not published my code to github. How can I install the blockchain project? I tried "npm install --save ../BlockChain" but got an error as there is no package.json file in there. Can you please let me know how to proceed from this block point?

[@amitchatterjee4901]

Actually just doing npm init and taking all the defaults seem the have generated the .json file - proceeding for now, let's see ....

[@amitchatterjee4901]

Didn't work - I will ignore my previous work and get the code from github as mentioned int his tutorial

[@prathameshjoshi9199]

Sir, can you please help me with publishing that Blockchain on GitHub, how to do it ?

[@bouchtoutazzeddine5139]

Hello, I'm having errors while importing these two as well: import { Blockchain } from 'savjeecoin/src/blockchain'; import EC from "elliptic"; went to node_modules/savjeecoin/src/blockchain in order to compare the code with the what you've done in the previous videos and hopefully find out where the error comes from, I've noticed that you put "const crypto = require('crypto');" instead of "const crypto = require('crypto-js');", tried to fix it but unfortunately I'm still stuck in the problem. If somebody could find a fix to this error, let me know please.

[@demzosman3640]

Hello, Yeah im having the same issue. were you able to figure it out?

[@foodfoodiesandmore]

I'm getting an error while creating a transaction *local host 4200 says : not enough balance* please anyone???

[@sugamin3987]

In pending Transactions, all blocks are considered valid. At what case will they be false and not added to the chain?

[@simplyexplained]

The signature on the transactions are checked when they are entered into a block. This is what causes them to be rejected.

[@LearnENglishZaban]

this tutorial is awsome but this blockchain run on a node how we can run it on many nodes??

[@tonmoyroy2157]

import { Blockchain } from 'savjeecoin/src/blockchain'; import EC from "elliptic"; These lines did not work in mine. Says=== Could not find a declaration file for module 'savjeecoin/src/blockchain'. .How to fix this please help,

[@deerman6541]

For 'import { Blockchain }', I instead did 'const { Blockchain } = require('(name of your folder)/src/blockchain');' and it came up with no error. And for 'import EC', I did 'import * as EC from "elliptic";' and yet again it came up with no error. Hope it works for you.

[@bigmac5865]

Hi Folks, Any luck ? From time to time I am getting a "Balance of xavier is NaN" in the Blockchain.js !!! I understand it might be to do with the += and balance NOT being assigned a numeric value. Anybody solved this before ?

[@newborn7850]

How is it done in React js pls give link

[@nileenaj3964]

In import [ Blockchain ] from 'Savjee/src/Blockchain' , he is importing from his github account, right?

[@williamikennanwosu]

I am actually stuck here. For me it says it cannot find the module or its corresponding type declarations

[@omkhare1514]

@@dhruvilmodi5676 did you solve this problem lol now I am stuck on this.

[@tanyeemahamed810]

can not run this project in my machine can anyone help me

[@sarazaouch2976]

can you help me please !! in the command ng its not found why

[@kivasho8221]

You have to install npm :)

[@timtim5327]

I have a questions. Why your transaction can go negative? how to prevent my transaction from going negative

[@simplyexplained]

A simple if statement that checks the balance of the sender. This was implemented on GitHub.

[@Luxdown]

First

[@mineshpurohit5308]

got Error when importing EC from "elliptic" plz guys help me

[@SarthakGupta]

Have you installed elliptic from node js?

[@SarthakGupta]

28:30 The Transactions table is not showing up. Why? I had typed word to word same as your code, I checked the console, it is saying-"Cannot read the property length of undefined". transactions is undefined but it was defined in transactions-table component.ts as an array. then why is it undefined? Please help me

[@wojtek3165]

got te same problem

[@sanderhonig2466]

I have been trying to get it working for 3 days now, but I keep getting stuck at the same spot, at 21:00 I don't have any errors in the console, but see no blocks, the rest is working. after some testing, I found out "blockchain-viewer.component.html" is loading, but "block-view.component.html" for some reason isn't. please HELP! When I change in app-routing const routes: Routes = [{ path: "", component: BlockchainViewerComponent, }]; to--- const routes: Routes = [{ path: "", component: BlockViewComponent, }]; ============ only the one I wrote is loading

[@SarthakGupta]

in blockchain-viewer.component.html put this code- Blocks on chain Each card represents a block on the chain.

[@terencemichale]

Hi. Were you able resolve this? My blockchain-viewer.component.html has the code snippet to loop blocks but I only see an empty block.

[@mbulucay]

How did you solved the problem? I am having the same problem?

[@mbulucay]

In my case the problem is in the blockchain.service.ts. I did not include elliptic library truly. The error shows in the browser console

[@gurejalectures]

Keep it up but please don't made your videos private

[@tbrew222]

anyone else get a 'premature close' error when they tried to npm install from github?

[@timothybasalo4038]

just copy your node_modules from the earlier savjee tutorials to the new ones

[@williamikennanwosu]

But there is already a node_modules in the new one

[@sunnyshrestha317]

importing SavjeeCoin/src/blockchain and EC is not working for me

[@williamikennanwosu]

I have the same problem, I'm not sure how to get it working. I'm not even sure why he did it in the first place.

[@williamikennanwosu]

use the relative path to the blockchain file on your own computer. He placed everything in his src folder. I had to go up the directory a bit. For me it was require('../../../../blockchain')

[@as269]

@@williamikennanwosu did you able to reach blockchain functions by this method require?

[@YoutubeMustVideos]

Text is blurred and can't see,same with other videos too😰

[@hugoalejandrorodriguez4765]

Please make a video explaining what program to configure, this based on the fact that I have your program downloaded, however, I get an error, additional when I enter the command git: (master) says that git is not a recognized command, despite Have git installed. Please tell me how to proceed with the mistakes, thank you very much.

[@naeco1053]

okay its just a reward im a supper dupper dump

[@a_m___s_y]

Happy with this series of BlockChain videos. I followed it up to this video. However, I got an error "premature close" when run "npm install github:username/myProject". I found many article about this but still not find the solution. Could anyone know how to fix it? Million Thanks.

[@foodfoodiesandmore]

Have you created this app? How do you deployed it on gh pages

[@prathameshjoshi9199]

How to deploy the build BlockChain of previous 4 videos on Github, please help me with this

[@hooriakhan190]

its best video but I have faced some issue as when I refresh local host to see blocks on chain its show blank screen ??///??

[@harrikah]

Would you possibly redo this in Vue.js ....please

[@kangja9338]

7:36

[@dariuszzelaznicki1047]

import {Blockchain} is wrong !!