Channel: Simply Explained
Category: Science & Technology
Tags: fundamentalsbasicsdecoratortraininginterfacelongdummiesuibeginnerenglishcoursedependency injectiontutorialtypescriptfreeintroductionclichainuxlearnhowtoblockslessonminingservicestransactionseasyjavascriptscriptuser interfacedifficultyangular7basic tutorialangularangular6angular3blockchainangular2servicebest practicesngfront-endgetting started
Description: 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-frontend ☞ 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 - youtu.be/zVqczFZr124 Part 2 - Proof-of-Work - youtu.be/HneatE69814 Part 3 - Mining rewards - youtu.be/fRV6cGXVQ4I Part 4 - Signing transactions - youtu.be/kWQ84S13-hw ☞ Source code is available on GitHub: github.com/Savjee/savjeecoin-frontend Feel free to fork, modify & improve it. Pull requests are appreciated! ☞ Follow me on Twitter: twitter.com/Savjee Facebook: facebook.com/Savjee Blog: savjee.be GitHub: github.com/Savjee 💌 Newsletter: newsletter.savjee.be (no more than once a month)