# Count DApp

## Table of Contents <a href="#table-of-contents" id="table-of-contents"></a>

* [1. Environment Setup](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/1.-environment-setup)
* [2. Clone Count DApp](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/2.-clone-count-dapp)
* [3. Directory Structure](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/3.-directory-structure)
* [4. Write Smart Contract](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/4.-write-smart-contract)
* [5. Frontend Code Overview](https://github.com/klaytn/klaytn-docs/blob/main/docs/dapp/tutorials/count-dapp/5.-frontend-code-overview)
  * [5-1. BlockNumber Component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-1.-blocknumber-component)
  * [5-2. Auth Component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-2.-auth-component)
  * [5-3. Count Component](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/5.-frontend-code-overview/5-3.-count-component)
* [6. Deploy Contract](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/6.-deploy-contract)
* [7. Run App](https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp/7.-run-app)

## Testing Environment <a href="#testing-environment" id="testing-environment"></a>

Count DApp is tested in the following environment.

* MacOS Mojave 10.14.5
* Node 10.16.0 (LTS)
* npm 6.9.0
* Python 2.7.10

## Introduction <a href="#introduction" id="introduction"></a>

![intro](https://2361259531-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo8dCjygb765jszAbMUcT%2Fuploads%2Fgit-blob-bd6d07d79b2f0b3749ad5b97902031b7cf730f37%2Ftutorial-1intro.gif?alt=media\&token=13dd65c9-6a68-415c-9ff1-e17ee779df43)

This tutorial is intended to give a step by step guide to build a Klaytn dApp. 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 <a href="#intended-audience" id="intended-audience"></a>

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](https://reactjs.org/) and [Redux](https://redux.js.org/). 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.