# NFT Web App Integration

{% hint style="info" %}

### What you will learn during this workshop

* how to host NFTs metadata and images on secure decentralized storage - Pinata
* how to launch a basic NFT smart contract
* how to use the stacks explorer for deploying smart contracts and calling functions
* how to create a basic react Dapp using Stacks Starter.js with login feature
* how to get all the NFTs owned by the logged user from a given NFT smart contract using the Hiro API on top of the Stacks node
* how to advance and develop the Dapp
  * display all the NFTs owned images in the app
  * select and keep track of the chosen playable character
  * add the game as a scene to the react app
  * integrate the image of the selected NFT into the game
    {% endhint %}

{% hint style="warning" %}
Set up [Prerequirements](/gamefistacks/workshop/nft-web-app-integration/prerequirements.md) before the workshop
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=kcGFRBhURow>" %}
Workshop Recording
{% endembed %}


---

# 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.degenlab.io/gamefistacks/workshop/nft-web-app-integration.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.