# 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](https://0xpolygon.gitbook.io/dapp-launchpad/commands/deploy), this hook will automatically use the correct chain and contracts.

## **Deploying to local test server**

The [`dev`](https://0xpolygon.gitbook.io/dapp-launchpad/commands/dev) command automates everything for you to setup a local Next.js test server.

## **Deploying to Vercel**

To deploy this, follow the [Deploying](https://0xpolygon.gitbook.io/dapp-launchpad/introduction/quickstart#deploying-to-production) guide.

With the [`deploy`](https://0xpolygon.gitbook.io/dapp-launchpad/commands/deploy) 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.