# NFT App (React + Vite)

This example demonstrates how to utilize Glittr messages to develop an application for deploying and minting NFTs. The app is built with React, a popular JavaScript library for building user interfaces, and Vite, a fast and modern build tool that enhances the development experience.

## Live Preview

Visit our [website ](https://nft-example-app.glittr.fi/)to preview the NFT app and explore its features.

## How to Build

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

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 `glittr-nft`folder

   `cd glittr-examples/glittr-nft`
3. Rename the `.env.local` file into `.env`

   `mv .env.local .env`
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 

   ```
   http://localhost:5173/
   ```

## Usage

This is the first page of the NFT app. It features several pre-deployed NFT contracts that has been minted.

<figure><img src="/files/VMT6XNcIwLUtPhHDPxFi" alt=""><figcaption><p>NFT app page</p></figcaption></figure>

Click the "Connect" button and select the wallet you want to use with the app.

<figure><img src="/files/uYEEwRrmUY77lHF8wbpa" alt=""><figcaption><p>Wallet selection</p></figcaption></figure>

If you’d like to create your own NFT, you can click the "Create GlittrNFT" button. From there, you can upload your image and choose how to store it—either using IPFS or embedding it on-chain (images must be less than 80 bytes for on-chain storage).

<figure><img src="/files/Xh4Fgvs9IEliPA6f1VGv" alt=""><figcaption><p>Create NFT form</p></figcaption></figure>

Once successful, your NFT will appear on the page after the transaction is confirmed on the Bitcoin blockchain.

<figure><img src="/files/SC8tmmSIa3uhZZXHY674" alt=""><figcaption><p>After create nft</p></figcaption></figure>


---

# 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://docs.glittr.fi/app-examples/nft-app-react-+-vite.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.