StackUp Invaders (twk415)

A Web3 game built with Immutable!
View Demo | Block Explorer

Table of Contents

1. About The Project
   • Upgrades Implemented
2. Built With
   • Backend
   • Frontend
3. Getting Started
   • Prerequisites
   • Installation
   • Deploying NFT Smart Contract
   • Running locally
   • Deploying to Netlify

About the project

This is a submission for Upgrade StackUp Invaders Bounty.

Upgrades Implemented

• Reading player's NFT inventory and resume level (refer getNftByAccount function here)

  • this helps ensure each player has only one NFT
  • player will be able to start game with their upgraded spaceship and resume with their previous level based on their NFT metadata (refer getUserLevel function here, how it's called in setup function here & which is then called in draw function here when userProfile changes)

• Minting just one NFT for every new player and refreshing metadata on subsequent levels up

  • we only mint NFT when claiming Level 1 badge (refer here)
  • on subsequent levels, we call immutable api to refresh metadata (refer codes for upgradeNft function here and the corresponding serverless function here)

• View NFT metadata page

  • added new route /nft.html?id={tokenID} (refer html code here and JavaScript code here) for users to view their NFT metadata since immutable explorer doesn't support metadata refresh yet
  • added links for user to easily navigate to their nft metadata page next to logout button and successful minting/upgrading message (refer showViewBadgeButton function here)

• Increasing difficult of game by increasing the points needed to collect to uplevel

  • now user need to collect at least 100 points to level up instead of 50 points (refer here)

• Having more achievement milestones

  • now user can achieve up to level 4 (refer here)

• Enhancing security by

  • moving grantMinterRole logic to backend (serverless function) to prevent wallet private key from being exposed to the public (refer grantMinterRole function here)
  • moving refreshMetadata logic to backend (serverless function) to prevent immutable API key from being exposed to the public (refer here)

Built With

Backend

• Immutable for deployment of ERC721 contract

• Netlify function for grant minter role & refresh metadata functionalities

Frontend

• Immutable Passport for authentication

• ethers.js for utils to interact with smart contract

• p5.js for creating game

• Netlify for hosting frontend site

Getting Started

Installation

1. Clone the repo

git clone https://github.com/teyweikiet/immutable-stackupinvaders-bounty

2. Install dependencies

npm install

Deploying NFT Smart Contract

1. Follow steps here to deploy NFT smart contract

Running locally

1. Copy and modify .env accordingly

cp .env.example .env

2. Search for TODO: Replace in /site folder to replace with appropriate values

3. Start server locally

npm run start:local

Deploying to Netlify

1. Refer .env.example for environment variables needed. Add those environment variables to Site Configuration on Netlify dashboard

2. Deploy to Netlify on your local terminal

npm run deploy:netlify

P/S: Disable automatic publishing on Netlify dashboard as current setup does not support deployment from github.