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
  • Event Sign Up
  • Event link
  • Software installation - IDE, Clarinet & Node
  • Hiro Wallet
  • Visual Studio Code
  • Clarinet Extension for Visual Studio Code
  • Install Clarinet
  • Node install LTS
  • Git install - project access including all the workshop live modules
  • Prettier Extension - install from Visual Studio Code
  • Set Up Online Pinata Account
  • Sign Up at https://www.pinata.cloud/
  • Confirm Code from mail

Was this helpful?

  1. Workshop
  2. NFT Web App Integration

Prerequirements

Must be done before the workshop

PreviousNFT Web App IntegrationNextDecentralized Storage

Last updated 1 year ago

Was this helpful?

Event Sign Up

Event link

Claim your NFT

https://create.gamma.io/collection/workshop-nfts-integration

Official Smart Contract:

SP1SCEXE6PMGPAC6B4N5P2MDKX8V4GF9QDE1FNNGJ.workshop-nfts-integration

Software installation - IDE, Clarinet & Node

Hiro Wallet

Visual Studio Code

Clarinet Extension for Visual Studio Code

Install Clarinet

Node install LTS

Git install - project access including all the workshop live modules

Prettier Extension - install from Visual Studio Code

Go to extensions. Type prettier. Install the one with more than 26 million downloads.

Set Up Online Pinata Account

Will be used for decentralized storage

Sign Up at https://www.pinata.cloud/

Confirm Code from mail

💻
🏎️
📄
LogoGameFi on Stacksblocksurvey.io
LogoStacks Ecosystem Eventsstacks
LogoHiro Wallet for Web
https://code.visualstudio.com/Downloadcode.visualstudio.com
https://marketplace.visualstudio.com/items?itemName=HiroSystems.clarity-lspmarketplace.visualstudio.com
LogoSetting up a local development environment | Hiro Docs
LogoDownload | Node.jsNode.js
LogoGit