# Frontend

## **Node version**

Node >v16.14.x is supported, although Node v18.x.x is recommended.

A `.nvmrc` has been provided if you use `nvm`. You can use this by:

```
nvm use # in ./frontend
```

## **Framework**

The frontend runs on a Next.js server. If you're new to Next.js but know React.js, getting used to Next.js would be trivial. To get started, modify the component file at `./frontend/src/pages/index`.

To learn more about Next.js, [read their docs](https://nextjs.org/docs).

## **Environment variables**

Before you start, you need to setup the environment variables. Look at the `.env.example` to know what to setup. Env variables required are:

```
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID="" 
```

Note, all env variable names which are supposed to be exposed used in client requests should be prefixed with `NEXT_PUBLIC_`.

## **Connecting wallet**

To connect user wallets, [Web3Modal v3](https://web3modal.com/) has been integrated and pre-configured for you.

Use the provided `useWallet` hook to interact with Web3Modal and wallets. This contains utilities to simplify anything you need related to wallets.

## **Sending transactions to smart contracts**

To send transactions to either a locally deployed smart contract or a smart contract on a prod chain, use the `useSmartContract` hook. This contains utilities to simplify getting and interacting with a Ethers.js contract instance.

When [deploying to local or production](/dapp-launchpad/commands/deploy.md), this hook will automatically use the correct chain and contracts.

## **Deploying to local test server**

The [`dev`](/dapp-launchpad/commands/dev.md) command automates everything for you to setup a local Next.js test server.

## **Deploying to Vercel**

To deploy this, follow the [Deploying](/dapp-launchpad/introduction/quickstart.md#deploying-to-production) guide.

With the [`deploy`](/dapp-launchpad/commands/deploy.md) command, the Frontend deployment is fully automated. Vercel is used for deployments. Vercel offers free quotas to developers to get started.

No pre-configuration is necessary to run the `deploy` command. You'll be taken through all relevant steps upon running it.


---

# 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://0xpolygon.gitbook.io/dapp-launchpad/workflow/frontend.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.