Count BApp

Table of Contents

• 1. Environment Setup

• 2. Clone Count BApp

• 3. Directory Structure

• 4. Write Smart Contract

• 5. Frontend Code Overview

  • 5-1. BlockNumber Component

  • 5-2. Auth Component

  • 5-3. Count Component

• 6. Deploy Contract

• 7. Run App

Introduction

intro

This tutorial is intended to give a step by step guide to build a Klaytn BApp. No previous Klaytn experience is needed. We will make a simple web app interacting with a basic smart contract, Count. Any user who has a Klaytn account can increase and decrease the current value as shown in the above gif.

Source Code Complete source code can be found on GitHub at https://github.com/klaytn/countbapp

Intended Audience

Anyone who wants to learn how to build a Blockchain Application on Klaytn. We will build a web application that interacts with smart contracts. To complete this tutorial, the audience is expected to be familiar with the following concepts.

• We assume that you have basic knowledge on React and Redux. This course is not for absolute beginners.

• Basic knowledge and experience in Solidity development are recommended. However, any experienced SW developer should be able to complete the task by following the step-by-step guideline of this tutorial.

Testing Environment

Count BApp is tested in the following environment.

• MacOS Mojave 10.14.5

• Node 10.16.0 (LTS)

• npm 6.9.0

• Python 2.7.10