100 Days of Web3 (Days 1-10)
Whether you’re a developer or not, you’ve probably run into the latest tech buzzword: Web3. Sometimes it’s also referred to as Web 3.0. I’ve seen many different definitions of Web3, but most of them include the decentralization of the internet and a strong association with blockchain technology.
Some say Web3 is the future:
Some say Web3 is just hype without substance:
Although I can’t say for sure that Web3 is the future of the internet, the unparalleled adoption of blockchain technology seems to indicate that it is. As a developer, I’ve decided to get ahead of this trend by learning how to develop Web3 applications which are also known as dapps or decentralized applications.
As a developer with a full-time job, it’s often difficult to stick with learning an entirely new development skill that is unrelated to my current role. I recently heard about the 100 days of code challenge which people take to learn software development skills. I really liked the concept of keeping myself accountable by committing to devoting a reasonable amount of time every day towards my learning goal. So I decided to take the 100 days of code challenge with a twist: to spend a 100 days learning Web3 development daily. I was pleasantly surprised to find out that I wasn’t the first to think of this idea.
I’ll post a blog for each 10 days of the 100 days to tell you all about what I’m learning during this challenge, and hopefully that’ll give you some ideas for how to learn Web3 too.
Day 1
I decided that the best way to start learning Web3 would be to start taking some courses related to blockchain and decentralized application development. Taking courses would help me build up a basic foundation of knowledge which I could then build upon.
The first course I started with was the Ethereum Solidity Bootcamp on Udemy. Admittedly, I had started this course about a month before, and hadn’t finished it. So I just picked up where I left off. This course is all about programming smart contracts on the Ethereum blockchain as well as how to access those smart contracts from a web front-end. The course teaches the basics of the Solidity programming language, which is the most popular language for programming smart contracts on the Ethereum blockchain. Smart contracts are essentially programs which are deployed on a blockchain and can manage cryptocurrency and digital assets such as fungible and non-fungible tokens.
On day 1, I mainly worked on a simple supply chain project which was part of the Udemy course. I used Truffle and Solidity to build the smart contracts. Truffle is a development framework for building smart contracts and allows developers to locally compile and test smart contracts. Truffle has many starter templates called “boxes”. And these can be used to generate a basic application. For this project I used the React Truffle box which contains a template with smart contracts as well as a React front-end app which calls functions on the smart contract.
Part of this project was writing local tests for the smart contract functionality. In this exercise, the tests I wrote for the smart contracts were actually in JavaScript rather than in Solidity. Essentially, Truffle spins up a simulated local blockchain on the development machine. JavaScript functions are then used to deploy the contracts to the local blockchain, call the methods on the smart contract and then assert the results and effects of those smart contract methods.
Another interesting part of this project was the use of events. Within smart contract code, events can be emitted. These events can be listened for by external applications, for example from a web front-end. In this project, I implemented the the consuming of these events from the React app to notify the user that a customer had paid for an item in the supply chain.
Day 2
With the supply chain project finished. I moved on to the next module of the course on day 2. This next module was on using Go Ethereum to create a local Ethereum node. It was interesting to see the local node syncing with the rest of the blockchain network, and it gave me some intuition on how the Ethereum blockchain works. It was also interesting to use the JavaScript console for the Go Ethereum node to make various JSON-RPC calls to retrieve information such as account balances.
After the Go Ethereum module, I moved on to the final project of the course: creating a token sale application. The token sale application was a much more complicated project than the supply chain one so I was eager to get started. I started it the same way as the supply chain project, by using the React truffle box to get started with a template.
The next step was to add the code for the token. For this project, I used the ERC-20 token standard which is a very popular standard for fungible tokens. Rather than writing the token code from scratch, I made my token inherit from the ERC-20 token contract in the OpenZeppelin library. I learnt that it is a best practice to use audited libraries like OpenZeppelin to reduce chances of security vulnerabilities in smart contract code. This is particularly critical because of the high-risk nature of blockchain applications which handle currency and valuable digital assets.
After adding the token contract, I added a crowd sale token contract. Again, I reused a contract that was already available from the OpenZeppelin library. However, it was a bit trickier this time because the contract was only available in an older version of the library so I had to make some updates to the code to make it work with the latest version of Solidity which I was using.
After adding the token and token sale contracts, I added some unit tests for both contracts. They were fairly basic tests that were verifying the main functionality. If I was writing a production application I would have to write many more detailed tests.
Day 3
On day 3, I continued with the token sale project from the Udemy course. The next part was implementing a third contract for establishing KYC (know your customer) details. The idea is that, only addresses which have been linked with a user’s identity should be whitelisted and allowed to buy tokens in the sale. One interesting part of this section is that I had to adjust the token sale contract to have a reference to the KYC contract, because the token sale contract has to call methods on the KYC contract to verify whether a user can purchase tokens.
Once the KYC contract was done, I got to work on the front-end portion of the application. Part of the functionality was to allow the owner of the KYC contract to whitelist user’s addresses from the front-end to allow those users to buy tokens. Then, I had to implement the part where the users actually buy the tokens from the front end.
The final part of the project was to deploy the smart contracts to the ropsten test network. Until that point I was working with a local blockchain on my computer using a program called Ganache.
Day 4
The token sale project was the last part of the Udemy course, so I had to look for another course to take! I decided to go with the Ethereum Dapp Programming course at Moralis Academy. Although the prerequisites of the course were to take two other courses at the Moralis Academy, I decided I had enough knowledge from the Udemy course to skip those prerequisites. Ironically, I went back and did those prerequisite courses later on, but more on that later!
The first part of the course was more conceptual and it explained the application we would build and how it would work. It turned out that the application was none other than a clone of the infamous Crypto Kitties app! This was very exciting because the application described seemed fairly sophisticated and had many different components including minting kitty NFTs (non-fungible tokens), implementing breeding algorithms and an NFT marketplace too.
Every Crypto Kitty is a unique NFT with it’s own DNA stored on the Ethereum blockchain. The DNA is simply structured as a large integer and the different digits in the number represent different attributes in the cat. I started to work on the front-end component of the application, in particular, on rendering the cat on a web page. Although I’ve been a web developer for almost nine years, I didn’t really understand how powerful and versatile CSS is until this day. I was shocked at the type of sophisticated graphics that can be rendered on a browser simply with some basic CSS and HTML.
Day 5
On day 5, I continued with my work on rendering a cat on the page using just CSS and HTML. The next step was to render the cat based on the DNA data. That involved writing some UI controls to allow a user to select different attributes of the cat and generate the DNA string and render the cat based on that. This part was not really related to Web3, but any time spent improving my HTML, CSS and JavaScript skills is time well spent in my opinion!
Once the front-end part of generating and rendering cat was done, I moved on to creating the token contract. Unlike the token sale project in the Udemy course, these would be non-fungible tokens, because every kitty is unique. Therefore I could not use the ERC-20 token standard, since it is used for fungible tokens. A common token standard used for NFTs is ERC-721. This time, I didn’t use the OpenZeppelin library to get the basic implementation of the contract. I suspect that the instructor’s intention was to give us more practice writing Solidity code by writing all the token code from scratch. I started implementing a basic subset of the methods an ERC-721 contract must have.
As with previous projects involving smart contracts, Truffle was used. This time however, I didn’t use the Truffle box template and started up the truffle project using the truffle init command.
Day 6
I continued with implementing the token contract for the application. I implemented a method to mint a kitty token, which would take in the DNA information and create a record for the token on the smart contract. I also created a method to retrieve individual kitty tokens. After adding the new methods on the contract, I wired the front-end together with the contract using web3.js library. At this point, it was possible to mint new kitty tokens from the front-end.
There were still few methods left to add to the smart contract to complete the ERC-721 standard. One of these was to approve another user/address to transfer a token besides the actual owner of the token. One of the uses of this method is to allow an exchange or a marketplace to sell the token on behalf of the user.
Day 7
On day 7, I made the token contract implement an additional token standard: ERC165. This is a very simple token standard which just ensures that the token contract has a method which reports which token standards it implements. Most tokens will implement ERC165.
The next step was to create a catalogue page on the front-end which would display all kitties owned by the user. In order to do this, another method had to be added on the token contract which would return all tokens owned by the user. On the front-end, this method on the contract was called in order to load and render all owned kitties on the web page.
One of the coolest features of Crypto Kitties is that two Kitty tokens can be made to breed and create a new child token. Typically this child kitty token will have features of both parents and perhaps some random features present in neither parent. A breed method on the token contract was implemented which takes the ids of the mother and father tokens and mints a new child token. Initially, I coded a very simple breeding method which gives the child kitty the first half of the father’s DNA and the second half of the mother’s DNA. Later I added more randomness in the algorithm to give a better mix of features to the child kitty. Implementing these breeding algorithms gave me more experience with Solidity programming. I also had to implement the front-end portion of the breeding feature, which allows a user to select two kitties they own and breed them by calling the code on the smart contract.
The last remaining feature of the application was the marketplace where users can buy and sell kitty tokens. I began with the implementation for the smart contract for the marketplace. It need many methods including one for a user to create a sell order for a token, one for retrieving all tokens for sale, one for letting a user buy a token and a few other methods.
Day 8
The only remaining part of the Crypto Kitties clone was to implement the front-end for the marketplace. This involved adding a new page to the web app to create a sell order for a token or buy the token, depending on whether the user owned the token. By this point the front-end code was getting a bit messy since this was just a vanilla JavaScript application which didn’t use a framework like React. I was finally done with what turned out to be a pretty intense course.
Since the Crypto Kitties course was such a great experience, I decided to take another course from Moralis Academy. In a way I decided to take a step backward and take the Smart Contract Programming 101 course. I probably could have skipped it, but it was great review of the basic concepts in the Solidity programming language and I did pick up some knowledge that I didn’t get in the previous courses.
Day 9
On day 9, I finished up with the Smart Contract Programming 101 course. The final project was to create a multi-signature wallet. A multi-signature wallet only allows a transaction to go through after a certain number of approvers have signed off on the transaction. While the course was mostly using the Remix IDE which is perfect for beginners, I decided to challenge myself by using Truffle instead and also by adding a basic unit test to verify the functionality of the multi-signature wallet. The code for that project is here.
Having finished the 101 course, it seemed logical to move on to the Smart Contract Programming 201 course. I got started on the 201 course and learnt a lot including the many different ways to transfer ether in solidity, some basics on smart-contract security and more detail on storing data within smart contracts.
Day 10
I continued with 201 smart contracts course, learning more about things like the SafeMath library, token standards and using Truffle. I started with the final project of the course which was to build a decentralized exchange. Unlike modern decentralized exchanges which use the AMM (automatic market maker) model, this project was to use an older orderbook model. The rationale given by the instructor for using the orderbook model was that it was ideal for gaining experience programming in solidity.
This time around, the course took a test-driven development approach where tests were written before the actual smart contract code. I started of with implementing some basic functionality for adding new tokens to the decentralized exchange and methods for users to deposit and withdraw tokens.
Summary
I learned a lot in these first 10 days and really enjoyed the process. I’m really looking forward to learning more about Web3 and blockchain development and sharing what I learned!
About Author
