Building a cool NFT marketplace with Patrick’s excellent course — Findings that will increase the time to completion (but also take out some of the heureka so use with caution)

Patrick Collins’ FreeCodeCamp’s course “Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript — 32-Hour Course” is to my knowledge the best course on web3 full stack development right now. A non-exhaustive list of tools and frameworks you will be exposed to includes Remix, Ethers, Hardhat, OpenZeppelin, TheGraph, Moralis, React, NextJs, ChainLink, Solidity, JavaScript, IPFS, Filecoin, ERC-20, ERC-721. It is intense: He is progressing fast through a lot of material and it will take much more than 32 hours to complete. This is not a warning — just an expectation setting.

It was released in May 2022 so the material is really fresh at the time I am writing this. Furthermore, the mutual support and willingness to help in the discussion is exemplary — also kudos to Cryptokid from Moralis who is really helpful. Nonetheless software development never sleeps and having just come out on the other side of the course, I thought I would write down some findings that perhaps could reduce the time needed by future course participants for troubleshooting. This article is essentially just a list of findings — solutions that worked in August 2022 — from the troubleshooting I had to do when the video and current reality deviated. The list is also intended for my personal future use since I don’t want to troubleshoot again and it is highly likely that I will go over some of the material in the course again.

I hope others taking the course might also be able to save some time using it. It should not get in the way of developing a troubleshooting method and doing your own research. It will also not be able to help everyone, since it will only cover chapters 14 and 15 — we are talking almost 8 hours of video so this is still quite a bit. Btw I am WSL user and I didn’t come across any issues related to that.

Let me know if there are other things to add to the list. The #numbers refer to the discussion forum for the course. Credit goes to everyone participating in the discussions.

• Some packages throw errors
  use the LTS version of node — don’t use the most recent release:
  ‘nvm –use LTS’. Install nvm (Node Version Manager) if needed
• Package that is needed but not mentioned
  install the magic-sdk package: ‘yarn add magic-sdk
• Lesson 14: the dynamicSVG test kept failing
  Ensure the lowSVGImageUri is the same everywhere. In the versions in the repo there is a tiny difference between the base64 frown in ‘lowSVGImageUri’ and the image embedded in ‘lowTokenUri’. It causes the test to fail.
• Lesson 15 Moralis: Right-hand side of ‘instanceof’ is not callable (#1812)
  Front end issue: This answer works #1786 (comment). Interestingly enough it is not the answer selected in #1786. It both solves the “Right-hand side of ‘instanceof’”-issue and the “useMoralisQuery”-issue.
  In a nutshell:
  - Delete your node_modules folder and yarn.lock
  - Copy the list of dependencies in the comment into you package.json
  - run ‘npm install’ — NOT ‘yarn’ (this is crucial)
• Moralis: tokenURI is undefined (#1329)
  Moralis front end: the solutions listed in #908 and here #685 both need to be in place for the page to load. The issue in #908 is introduced in lesson 14 when writing the basicNFT contract
• Moralis database is not updating with the event details (#2187)
  I think it spent an entire day trying to solve it. This time the issue was actually on Moralis’ side — Cryptokid solved it fast when first alerted. Perhaps you should get in contact with Moralis support sooner than I did. Check the database logs if there is a signal from your chain
• Lesson 15 theGraph — The frontend throws an error
  The react-moralis package (1.4.0) that works for the Moralis solution (see #1812) doesn’t work for theGraph. ‘yarn add react-moralis@ ^1.3.5’ solves the issue
• theGraph CLI: Command ‘graph’ not found (#1453)
  #1453 refers to a stackOverflow article that shows how to add ‘graph’ to PATH. this solves the issue
• TheGraph — not showing nfts (TokenURI undefined)
  This is literally the final step and I was stuck for hours: the ‘seller’ entry in ‘subgraphQueries.js’ had the wrong number of zeros! Needs to have the same number as the objects shown in the subgraph studio.
• Issues with Rinkeby
  At the time of writing Rinkeby is being phased out and it is unstable. Use Goerli instead. It is supported by theGraph.