> For the complete documentation index, see [llms.txt](https://gameluk.gitbook.io/gameluk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gameluk.gitbook.io/gameluk/develop/get-started/counter-smart-contract-tutorial/frontend-tutorial.md).

# Frontend Tutorial

In this tutorial, we'll go over how to:

* Set up your frontend project
* Connect to a Gameluk wallet
* Query and display the current count
* Execute the counter smart contract's `increment` function

### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

* Node.js
* Yarn or NPM
* A supported chrome based wallet extension
  * [Compass](https://chrome.google.com/webstore/detail/compass-wallet-for-sei/anokgmphncpekkhclmingpimjmcooifb)
  * [Fin](https://chrome.google.com/webstore/detail/fin-wallet-for-sei/dbgnhckhnppddckangcjbkjnlddbjkna)

### Creating a React project

To create a project from scratch we recommend using the typescript template from Vite, which makes development and debugging much easier.

```
yarn create vite my-counter-frontend --template react-ts
```

This will create a new folder with a React project that uses typescript. Open this folder in your favorite IDE.

### Install dependencies

From a terminal at the root of this project install the required project dependencies including **@gameluk-js/core** and **@gameluk-js/react** as well as some node polyfill libraries.

```
yarn && yarn add @gameluk-js/core @gameluk-js/react
```

or

```
npm install && npm install @gameluk-js/core @gameluk-js/react
```

### Update boilerplate UI

Replace your `App.tsx` file with the following code to set up a GamelukWalletProvider context, define your chain info, and set connection URLs.

{% tabs %}
{% tab title="Typescript" %}
import { GamelukWalletProvider } from '@gameluk-js/react'; import './App.css'; import Home from './Home.tsx';

function App() { return ( // Set up GamelukWalletProvider for easy wallet connection and to use hooks in @gameluk-js/react \<GamelukWalletProvider chainConfiguration={{ chainId: 'atlantic-2', restUrl: '<https://rest.atlantic-2.gameluknetwork.io>', rpcUrl: '<https://rpc.atlantic-2.gameluknetwork.io>' }} wallets={\['compass', 'fin']}> ); }

export default App;
{% endtab %}

{% tab title="Javascript" %}

{% endtab %}
{% endtabs %}