Welcome to the Simple Storage dApp Documentation

This project builds a simple Decentralized Application (dApp) using React, a JavaScript library for building user interfaces.

The objectives are two fold: (1) This is like a “Hello World” kind of app where one gets hands-on experience in building the very first dApp; (2) building this dApp will bring us through various software components required for a dAPP.

This dApp deploys a smart contract holding a value on a blockchain where users may view and modify it using a client app (a React app).

Introduction

• Application Overview
  • Architecture

Installation Guide

• Get Tools in Place
  • Install Git
  • Install Node
  • Install Truffle
  • Install Ganache
  • Install MetaMask
• Get GitLab Project
  • Project Structure
• Get Blockchain Up and Running
• Connect Wallet to Blockchain
  • Setting Up Metamask
• Get Client App Up and Running
  • Install ReactApp Dependencies
  • Run ReactApp
• Link Client App with Wallet

Smart Contract

• Simple Storage Smart Contract
  • Define License and Solidity version
  • Define Contract with Unsigned Integer Value
  • Getter Function to View “storedData” Value
  • Setter Function to Change “storedData” Value
  • Smart Contract
• Compile and Deploy Smart Contract 🔴
  • Solc Version
  • Compile Smart Contract
  • Migrate Smart Contract
  • Deploy Smart Contract
• Starting New Project with Truffle
  • Project Structure

Web Application Development

• Web Application Development Basics
  • Websites vs Web Applications
  • HTML
  • CSS
  • CSS Framework
  • JavaScript
  • Single Page Application
  • React js
  • App.js

Client App

• React Application 🔴
  • Starting ReactApp
• package.json
  • Set Up ReactApp Dependencies 🔴
• App.js
  • Import Dependencies
  • Initialize Web3 Instance
  • ReactApp States
  • Get Current Value from Smart Contract
  • UseEffect Hook
  • React Form
  • Change Simple Storage Contract Value
  • Module Export
• Client App Rendering 🔴