Blockchain, understanding how it works while creating one

Create a React app to visualize and understand blocks, hashes, and the blockchain, including centralized blockchain, by building a blockchain visualizer and running the app.

Install Chakra UI with npm or yarn, set up the Chakra provider, and adjust index.js to integrate the UI framework, preparing a nicer visual for the blockchain app.

Build a sha256 hash visualizer in React with inputs, a container, and a button. Render data and the resulting hash using Chakra UI components to illustrate the hashing process.

Build a SHA-256 hash visualiser using a React component and Chakra UI, including a data input, labeled sections, and a calculate button to display the hash.

Add useState and useEffect to a sha256 visualiser, manage user input data, and auto-calculate the hash as data changes.

Create a reusable sha-256 hash function in a React app using the crypto library, export it for blockchain integration, and produce a hex digest for future blocks.

Explore how SHA-256 hashes compress large data into a fixed 32-character hex string, guarantee determinism, and remain one-way, then apply this concept to building blocks in the blockchain.

Explore blockchain blocks, including block number, data, and hash, learn how to verify validity and detect tampering, and see why a green block signals a valid block.

Create a single blockchain block by duplicating components, renaming functions, exporting as block, and organizing headers and containers for clean presentation.

Add a block number and a nonce to a block, wire up state and input changes, and update the hash as you build the block in a teaching blockchain example.

Hash the block data by combining the block number, notes, and data to produce a block hash, showing how changes alter the result.

Discover how hash difficulty determines block validity in a bitcoin-like chain by requiring leading zeros, and how changing the nonce or data alters the hash, making blocks invalid.

Mine a block by looping until the hash starts with the required number of zeros, using the block number and data, and return the hashed data.

Explore how a block chain is mined by hashing the block number and data to meet the leading zeros difficulty, verify the nonce, and detect tampering.

Explore how block chain links through hashes, with each block's hash serving as the previous hash for the next, and how a single broken block can disrupt the entire chain.

Create and link blockchain blocks by storing each block's previous hash, forming a blockchain that verifies integrity and helps detect tampering across the chain.

Create a blockchain in your application by building a blockchain component and rendering multiple blocks in a responsive grid. Duplicate blocks to five and prepare to link hashes across blocks.

Mutate a blockchain component's state in React with Immer to pass the chain and its hash between blocks, initializing the chain with blocks containing number, nonce, data, previous, and hash.

Learn to programmatically create blockchain blocks by building functions to map the chain, generate and display blocks, and set layout tweaks while laying groundwork for linking hashes.

Map values to each block on the blockchain by copying a block and assigning its number, hash, and data. Rename fields to avoid crashes and refresh to see updated blocks.

Explore how to pass values from a blockchain block to the chain by updating the block with event data, block number, and field values using a draft-based set chain approach.

Chain blocks in a blockchain by passing the hash to the next block, update the previous hash, and extend the chain from the genesis block to new blocks.

Add the previous hash to the hash block calculation and pass it to the mine function to ensure blocks update and the blockchain stays valid.

Explore how each block links to the previous hash and how altering an early block breaks the chain in a decentralized environment pursuing the longest chain.

Create a navigation bar to move between blockchain sections, including the chain and block views, while learning how the buttons link to the page components.

Create a Chakra UI header navigation by building a flexible nav bar with a header, centered items, padding, a dark background, white text, and menu options like share and blog.

Create menu items and render them with a reusable helper function, then use flexbox and a spacer to align items from left to center while adjusting margins.

Add links to menu items by importing the Link component from React Router, passing the destination and wrapping the menu text with the link to enable routing.

add react-router-dom to your project, configure browser router and switch, and define routes with paths such as /256 and /blockchain so a header appears on all pages.

Explore how a distributed blockchain operates across multiple nodes, observe how changing a block's hash invalidates the chain, and examine the 51 percent attack in a decentralized network.

Create a distributed blockchain by duplicating the existing chain, renaming and exporting the new module, and adding a header link to showcase a second network; future classes cover multi-network simulations.

Simulate a distributed blockchain across multiple computers by handling an array of block chains, mapping blocks to each chain, and passing node indices to ensure correct data flow.

Enhance the distributed blockchain viewer by labeling blocks with indices, adding vertical margins for readability, and passing the index to functions for correct block context in future steps.

Add a blockchain node and update value function to pass the node number back to the distributed component, ensuring updates propagate correctly across the blockchain.

Copy the hash to the previous hash to fix the block chains, revealing how individual chains operate while hinting at a distributed solution to be tackled in the next class.

Compare the last chain hashes across the distributed blockchain to decide the correct chain in a decentralized system, then update the chain value based on the majority hash.

Fix the hash count that lagged one step behind by introducing a new state and a use effect to track the latest block, updating the current value before reading it.

Explore how to identify the hash with the highest count by iterating over object keys, using reduce with an accumulator to compare hash counts, and validating the resulting hash.

Explore how distributed blockchain viewers validate the last block's hash, propagate valid chains across nodes, and why a 51 percent attack risks consensus in the Bitcoin network.

Explore how blockchain transactions transfer value between people. Learn how transactions are hashed into a block and how tampering invalidates the subsequent chain.

Duplicate the blockchain as a base to build a transactions viewer, add a new transactions route and header, and visualize transactions across nodes in the distributed system.

Learn to visualize transactions by creating a transaction block in the blockchain, swapping the generic block for a block designed to carry multiple transactions.

Create a transaction component and transaction list with a styled box, padding, and input groups, including left elements and arrows to depict transfers from me to you.

Display the transactions on the block from our blockchain by building a transaction list and showing each transaction’s id, amount, from, and to.

Implement a function to update transactions on the block by editing a draft and updating fields like id, name, and amount, then propagate changes to the transactions array.

Discover how to update blockchain transactions by computing updated data from transaction values, passing the block number, and auto-refreshing on transaction changes in a single-node context.

Move the transactions into the main blockchain object by turning the transaction list into a data array and distributing it across blocks in the chain.

Fix mined blocks by updating the chain value only when changes occur. Use string equality to compare values and skip unnecessary renders, keeping the blockchain consistent.

Create a dedicated update transaction value function that uses block number, transaction ID, and field data to update a transaction inside the chain.

Fix a data input issue by converting the amount from string to number before sending, so updates stay valid and transactions pass correctly.