# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archive-docs.klaytn.foundation/content/dapp/tutorials/count-dapp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.