# Create a Web Dapp

This document provides an overview of how to quickly get started with your dapp by cloning the React SDK sample application.

## Overview

The[ **Kinto Wallet SDK**](https://docs.kinto.xyz/kinto-the-modular-exchange/building-on-kinto/kinto-wallet-web-sdk) is a JavaScript library designed to interact with Kinto's Ethereum Layer 2 solution, enabling fast and secure transactions. It has been designed to maximize security and speed and it has no dependencies (except typescript) and it does not include any UI or web3 framework.\
\
The [**Sample Counter App**](https://github.com/KintoXYZ/react-sdk-sample) demonstrates how to integrate and use the Kinto Wallet SDK in a real-world React application, in this case a counter contract that Kinto users can increase.

## Clone the Sample App

### Prerequisites

Before using the sample app, ensure you have:

1. **Kinto Wallet**: Create an account at [Kinto Onboarding](https://engen.kinto.xyz/onboarding).
2. **Developer Account**: Set up your developer account and application at [Kinto Developers](https://engen.kinto.xyz/developers).
3. **Set the App Address**: Use your main contract address as the app address in the app.

### Set Up

To get started with the sample app:

1. **Clone the Repository**

```bash
git clone https://github.com/KintoXYZ/react-sdk-sample
```

2. **Navigate to the Project Directory**

```bash
cd react-sdk-sample
```

3. **Install Dependencies**

```bash
yarn install
```

4. **Create the certificate**

You need to create a certificate to run the application locally under https

```bash
brew install mkcert
mkcert -install
mkcert dev.kinto.xyz localhost 127.0.0.1 ::1

// You should see something like this
The certificate is at "./dev.kinto.xyz+3.pem" and the key at "./dev.kinto.xyz+3-key.pem" ✅
```

5. **Set up local DNS**

Modify your `etc/hosts` file to set up a local redirection from localhost to dev.kinto.xyz

```bash
sudo nano /etc/hosts

// Add the following line and save the file
127.0.0.1       dev.kinto.xyz
```

6. **Start the Application**

```bash
yarn start
```

### Customization

The Application should be up and running and you should see something like this:

<figure><img src="https://3204478300-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkwGpOqIolO3lPoyd0ZL8%2Fuploads%2FDNZs3Ae2BmSV0p8iiYZz%2FScreenshot%202024-08-11%20at%208.58.51%E2%80%AFAM.png?alt=media&#x26;token=47b1bdf5-f907-4d10-95d7-76023035608c" alt=""><figcaption><p>You can increase a counter <span data-gb-custom-inline data-tag="emoji" data-code="1f9e0">🧠</span></p></figcaption></figure>

### Development

**Change the appAddress**

in `App.tsx` change the `counterAddress` to your app address.

Now, you can connect your Kinto Wallet to your application and start sending transactions.&#x20;

Make sure you modify the transaction methods like `increaseCounter` to fit your custom contract.&#x20;