# 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](https://docs.degenlab.io/gamefistacks/workshop/nft-web-app-integration/prerequirements) before the workshop
{% endhint %}

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