GameFi
  • General Intro
  • 📃R & D
  • 💻Workshop
    • 🏎️NFT Web App Integration
      • 📄Prerequirements
      • Decentralized Storage
      • Smart Contract NFTs
      • Creating the React Dapp
      • Updating Startup File, Wallet Connect & Main Menu
      • Fetching NFTs, Stacks and Hiro API
      • Rendering NFTs owned
      • Selecting an NFT
      • Mapping Scenes
      • Creating the playable game
  • 🪙Trustless Rewards - M1
    • General idea
    • Flow Lobbies
    • Smart Contract
  • 🎨Customizable NFTs - M2
    • General Idea
    • Flow Customizable NFTs
    • Smart Contracts
      • Component
      • Customizable Wrapper
  • 🎁Lootbox on Chain - M3
    • General Idea
    • Tech Explained
    • Smart Contracts
      • Item
      • Lootbox
      • Lootbox Manager
  • 📝Message Signing
    • General Idea
    • GameFi Use Cases
    • App Explained
  • 🪵SFTs
    • General Idea & Base SFTs Static Deployments
    • Metadata Structure
    • Static Flow and Smart Contracts
    • Advanced SFTs Dynamic Deployments
    • Dynamic Flow and Smart Contracts
    • Dapp Integrating SFTs
      • Front End
      • Back End
    • Resources
  • ⚡Subnets
    • Overall for subnets
  • Roadmap
  • 💾Decentralized Storage
    • Gaia
    • Pinata
    • Host SFTs and NFTs into Pinata
    • Gaia integration to host game resources
  • 🔗External Knowledge
    • Getting Started
    • Hiro API
    • Stacks Docs
    • Clarity Book
    • Hiro Tutorials
Powered by GitBook
On this page

Was this helpful?

  1. Workshop

NFT Web App Integration

PreviousR & DNextPrerequirements

Last updated 1 year ago

Was this helpful?

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

Set up before the workshop

💻
🏎️
Prerequirements
Workshop Recording