# Freemint App (NextJS)

This example app, built with Next.js, makes it super easy to integrate Glittr’s features into your projects if you’re using the Next.js tech stack. It’s designed to keep things smooth and simple, so you won’t have to deal with any complicated setup. It also comes with wallet integration, giving you the flexibility to choose whichever wallet you prefer to use.

## Live Preview

Visit our [website ](https://glittr-free-mint-example.vercel.app/)to preview the Freemint app and explore its features.

## How to Build

You can also build your own app using our example. Here are the steps :&#x20;

1. Clone our examples repo

   `git clone`[`https://github.com/Glittrfi/glittr-examples/tree/main`](https://github.com/Glittrfi/glittr-examples/tree/main)
2. Navigate to the repository, then proceed to the `freemint-nextjs` folder

   `cd glittr-examples/glittr-free-mint-nextjs`
3. Create a `.env` file and add the following environment variables

   ```
   # testnet
   NEXT_PUBLIC_NETWORK=testnet
   NEXT_PUBLIC_GLITTR_API=https://testnet-core-api.glittr.fi
   NEXT_PUBLIC_WALLET_API=https://testnet-electrum.glittr.fi
   NEXT_PUBLIC_EXPLORER=https://testnet-explorer.glittr.fi
   ```
4. Install dependencies

   ```bash
   npm install
   # or
   yarn install
   ```
5. Start the development server

   ```bash
   npm run dev
   # or
   yarn dev
   ```
6. Open your browser and navigate to&#x20;

   ```
   http://localhost:3000/
   ```

## Usage

This is the first page of the Freemint app. There's a button to connect your wallet, and below that, there's a minting section and a list of assets that has been minted to your address.

<figure><img src="https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2FhNxkBP30EGZmMhQK8JXT%2Fimage.png?alt=media&#x26;token=be7fd4c4-010d-497a-a7c1-8c4684b183f4" alt=""><figcaption><p>Freemint App Page</p></figcaption></figure>

First thing to do, click the "Connect" button and choose the wallet you want to interact with in the app.

<figure><img src="https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2FwcC4ac9wxk20Wy8sRB1a%2Fimage.png?alt=media&#x26;token=8790ef26-f8ca-4e5b-8398-abb57aa68f4c" alt=""><figcaption><p>Wallet selection</p></figcaption></figure>

Once you're connected, you'll see a form to deploy your own Freemint contract. On the side, you'll find your minted assets displayed at your address. You can also choose to mint from the pre-deployed contract on the bottom of the page.&#x20;

<figure><img src="https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2F0Q4m4kKv7Qad5fWYBgHi%2Fimage.png?alt=media&#x26;token=f169ba96-105f-453b-94b5-aa70884f5955" alt=""><figcaption><p>Connected page</p></figcaption></figure>

When you hit the "Mint" button, you'll be taken to your wallet confirmation screen to sign the transaction. If it goes through, you'll see a confirmation letting you know your transaction is successfully on the Bitcoin blockchain.

&#x20;        ![](https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2FpY6fwBVTudI8aQgWmaw1%2Fimage.png?alt=media\&token=a0d6deb6-5e0e-4cc4-98cb-a15ea0ed0aab)                       <img src="https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2FwviMxEBIxFdsJ89MiUwc%2Fimage.png?alt=media&#x26;token=295fd1b3-d6dc-4090-ba6c-c8ee866032ec" alt="" data-size="original">

Once the transaction is confirmed, the assets will appear on the right side of the page.<br>

<figure><img src="https://3686088224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgscK5nb3h1Y4aYtqqLee%2Fuploads%2FtVx9h2kFYATXon8dQbps%2Fimage.png?alt=media&#x26;token=948518f2-c5a1-4840-bc03-8fdb3252d881" alt=""><figcaption></figcaption></figure>
