NFTrivia
Use your Flow NFTs to generate dynamic trivia-matching games
Demo
About
The problem it solves The overall problem I'm trying to solve is making NFTs/blockchain seem more fun and less scary, especially for users unfamilar with web3 or anything crypto/blockchain. To the end, for the novice, casual, or diehand collector/sports fan, NFTrivia tests your memory/knowledge using dynamically generated trivia-matching games derived from the metadata of NFTs you own. The result is a simple game that's fun for all ages and the whole family. Younger players can stick to memory and pattern matching, while older players can focus on matching different text attributes, learning a little more about their NFT collection in the process.
How it's made
Challenges we ran into * Although NFTrivia is a web app, I wanted it to run quickly and feel as "native" as possible. To that end I stuck with vanilla ES6 JavaScript, avoiding bloat and unnecessary packages. The end result is a very lightweight web application (9KB zipped) that runs smoothly. * Maximizing the screen real estate, especially for smaller devices, required a bit of math to calculate the ideal grid for display. * Although the web application is lightweight, some of the IPFS images referenced in the metadata are high resolution and not ideal for mobile. In some cases these images are large (3MB+ for some UFC Strike). I would like to build a generic IPFS resizer/cache to improve performance, but that is beyond the current scope for this hackathon. * While fetching NFT metadata from Flow is fairly simple, the subtle (yet frustrating) variations in metadata between Dapper Sports products introduced a variety of changes in trying to standard fields. For example, getting the player/athlete name from the metadata should be trivial, yet all store this information differently: UFC Strike: athlete_name NBA Top Shot: FirstName and LastName LaLiga Golazos: PlayerFirstName and PlayerLastName NFL All Day: playerFirstName and playerLastName (notice that case is different vs Golazos) * In rare instances, fetching NFT collections for larger accounts needed to be broken up into multiple Cadence calls.