> For the complete documentation index, see [llms.txt](https://0xpolygon.gitbook.io/dapp-launchpad/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://0xpolygon.gitbook.io/dapp-launchpad/workflow/frontend.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://0xpolygon.gitbook.io/dapp-launchpad/workflow/frontend.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.