Into The Metaverse

Launching our first Web3 project with zero blockchain development knowledge

Geoff Chan's profile picture

Geoff Chan

Design | Front-end

· 9 min read


Synopsis

This is the story of how a bunch of unassuming JavaScript developers learned, built, and launched their first Solana blockchain project. Our goal is to give hope to other developers like us. While Web3 is a new and exciting space, it can be daunting for new developers to get started in it. We're hoping to lower the barrier of entry, even just a little bit, by shedding light on the roadblocks we faced and the problems we had to overcome.

Crypto Curiosity

Most of us had heard of the major cryptos like Bitcoin and Ethereum, and some of us had even built our own mining rigs. But for the most part, we were all relatively uninformed about the current state of cryptocurrency, and we definitely had not dug into it from a development perspective. Around July of 2021, a few members of our team started getting curious, so we began dabbling on Ethereum. The development ecosystem was relatively good. There was a lot of information out there and good tooling to help new developers get started. Solidity was relatively easy to pick up because of its' similarities to JavaScript. The main barrier for us was the price of gas and the cost of deploying smart contracts.

Around the same time, I met up with one of my good developer friends while on vacation. He started telling me all about this new up-and-coming blockchain called Solana. His excitement over the benefits of Solana (way higher transactions per second and extremely gas fees) really got me interested and I put it down on my list of things to dig into.

After doing some initial research, I shared what I had learned with our team, and we all started digging in a bit deeper. I also started following people in the Solana space on Twitter. This is how I first got exposed to NFTs. One of our team members also found the IGNITION Hackathon. We spent about a week or two just being in the space and absorbing information.

Solana Summer

Our team's excitement about building a project with Solana grew exponentially, but the barrier to learning was high. We discussed the idea of submitting a project for the IGNITION Hackathon, but we still didn't even know all of the pieces required to build an end-to-end app. At the same time, NFT-mania had captured us and we really wanted to build some sort of NFT based project.

When I first heard about Solana the price was around $40. By the time we actually started digging into development, the price had made a bull run to almost $200. NGL this had an impact on our decision. There was also a slew of exciting new projects and companies coming to the space. The development community was really great, even though there still weren't a lot of resources for learning. Nader Dabit put out an awesome intro to full-stack Solana dev blog post and the Solana dev team provided a lot of support to the community. I remember having a conversation through DM on Twitter with Armani Ferrante not even realizing that he created Anchor.

As tech nerds and relatively seasoned JS developers, we felt the exhilaration of being newbies again. One of my friends once told me an analogy for learning. He said that when you first start learning something new you're climbing this mountain. At first, you can barely see the peak. Then halfway up it starts to become clear and you see where you need to go. Finally, you get to the peak, but you realize that you were only climbing a hill. At the top of this hill, you can finally see the real mountain which is now in front of you. This is exactly how we felt.

Lightspeed Launch

Finally, we made a decision as a team. We would put together a project for the IGNITION Hackathon. We decided to make an NFT customizer influenced by https://8biticon.com. A lot of the NFT projects at this time were 10,000 animal-themed generative art collections, so we thought this would make us more unique and stand out. Somehow we landed on worms as our animal and Clewless Wurms was born.

This was around the second week of September so we had to move really fast. The hackathon deadline was less than a month away (at this point it was still Oct 8 and had not been extended to Oct 15 yet). We decided the best way to move fast would be to split up the project. Two of our developers took on the task of learning Solana dev (facilitating transactions, minting tokens, sending tokens, etc.), everyone contributed to the front-end, and I took on design, marketing, and concepting our art. I managed to enlist my extremely talented friend Satesh and worked with him on the final illustrations.

I remember a few major breakthroughs that happened for us during this time. - We needed to solidify our understanding of how wallets, accounts, programs, and tokens worked in Solana. One of our developers, Tauqueer, illustrated it perfectly with the Solana CLI and spl-token CLI in this flow chart. We all walked through it together on a call and it clicked for all of us. This might seem like a small or simple step, but it was a foundational breakthrough in our understanding of Solana development. - Most NFT projects were using Metaplex, but we did not know if we could use it for our project because we were allowing users to create the look of our own NFTs. That meant that we weren't pre-minting NFTs in a candy machine. We needed on-the-fly one-off minting, so we had to dig into the capabilities and limitations of using Metaplex. - Rust. Why did it have to be Rust?! Our biggest bottleneck for this project was our lack of experience with Rust and Solana smart contract development. We debated on whether we should learn Rust to write our own smart contracts, but eventually decided on the more pragmatic approach that would allow us to actually get the project ready for the hackathon. We decided to build our backend with Node.js and utilize the Solana CLIs and Metaplex CLI in order to facilitate receiving payment, minting the token, and sending the token. - DevOps. This was such a major pain point and something you should NOT leave until the end of a deadline. Jordan (Stack Five's co-founder and dev extraordinaire) spent 30 hours in the last 2 days before the hackathon deadline trying to get this to work. I'm sure he'll detail it one day in another post once he's gotten over the trauma 😅

These are the steps of the backend process we created:

  • Customer pays us x SOL for their configured NFT, and once the payment transaction is verified, we kick off our minting process:
  • We randomly generate attribute stats for the user’s selection, and brand the NFT image with the rarity badge based on its overall grade
  • Using the Metaplex CLI, we then upload the NFT image to Arweave which is a decentralized “hard drive” of immutable assets
  • Once the upload is complete, we verify that it is in a completed state on the Arweave blockchain using the Metaplex CLI
  • Now we’re in a state where we’re ready to create our candy machine which will be a one-time-use configuration for the customer’s NFT
  • Using the Metaplex CLI, we create the candy machine configuration which provides us with a candy machine pub key that we need to finalize and mint the NFT.
  • Using the Metaplex CLI, we update the candy machine configuration to set the mint date to a date in the past. We do this because we need to mint the NFT right away. The reason we have to do this is because traditional NFT mints almost always have a fixed mint date in the future which doesn’t allow customers to purchase NFTs until this date is hit.
  • Using Anchor, we interact directly with the candy machine program and mint the NFT. This critical step provides the mint program with all of the metadata and instructions needed to create the NFT token and persist it to the Solana blockchain
  • Finally, after the NFT is created and verified to be on-chain, we transfer the NFT to the customer’s wallet
  • Quite often, Arweave and Metaplex’s programs are unreliable and will either error out, time out, or will provide an unexpected response. We isolated each of the above steps into a suite of tools that can be re-run at any step, so we never have a single point of failure. We can always recover and re-run the suite at any step regardless of the cause.

We were dealing with multiple new unknown technologies. We had filled the knowledge gap of smart contract development with a workaround (Node.js running a shell to utilize the CLIs), but it was still a lot of work in a short amount of time to get to a working devnet MVP. But... we did it. And I am incredibly proud of what our team accomplished together.

Retrospective

So where have we landed? We made the hackathon submission but did not win. I can understand why because our stack was mostly Web2 technologies and centralized, which is not in line with the ethos of Web3. Our project's community lost a lot of momentum because we were not ready to launch during the peak of the hype (due to us getting busy with a new large client project). In hindsight, there were a lot of things we could have done to make the project more successful, but as the saying goes, hindsight is always 20/20.

In our perspective, this project was a huge win for us! We went from zero to one in the space of Solana blockchain development... with our entire team. We discovered together that we absolutely love the Web3 space. And we all felt that this was the most fun that we've had doing a project in a long time.

Our team has been rejuvenated with a renewed passion to learn and build. We're all beginners again. And that is exciting.


JavaScript
React
Blockchain
Web3
Solana
Share

Stack Five is a React and NodeJS consulting company that strives to push the boundaries of the web and build meaningful things. If you're looking to create a cutting-edge web application or need software engineering resources for your project, please contact us.

Stack Five logo

2021 Stack Five Inc. | Toronto, Canada