My journey from Web Dev to Web 3.0 Dev - Part 1
Tags: web3, blockchain, smartcontracts, devjournal
Published: 2022-03-30 19:37:18

Hey, people!

I've been working with web development for a while now, and the blockchain ascension in recent years is coming to me as a great opportunity to explore a whole new area in my career.

With this in mind, I've decided to learn more about Blockchain and Smart Contract development and have a solid knowledge base in case I work with it in the future.

In this article, I want to share my learning path from knowing nothing to being ready to perform in a blockchain related job.


## 🎯 Setting Goals

Since I love learning by doing, I have set some projects as targets to study while building.

* 🖼️ **NFT Marketplace**

There are a lot of guides and tutorials teaching how to create NFTs and how to interact with them, so it seemed to be a good idea to create a full stack NFT Marketplace application. 
The goal was finding out which tools and frameworks are most commonly used, coding my first smart contracts and understanding how the frontend layer interacts with the blockchain.

* 🏦 **Decentralized Finance**

I've been using some DeFi applications myself, and it's easy to notice how complex they are when they have to use Oracles, DAOs and Upgradable Contracts behind the scenes.
By building a project like this, I could feel what challenges an intermediate blockchain/smart contract developer have to face daily.

* 🦄 **Solana**

Using Solidity with the Ethereum Virtual Machine (EVM) is the best way to get started in the blockchain ecosystem, specially for people who are familiar to javascript like me. However, knowing how other blockchains work and how to develop applications for them is essential. 
That's why I wanted to learn Rust and develop some simple dapps on Solana.

* 🕵️‍♂️ **Security**

Given the immutability of smart contracts and how often we see hacks being reported on every blockchain, it makes total sense studying the most common exploits and the best practices to avoid them. 
This goal was to solve security challenges and reading auditing reports.

## 📚 Getting familiar

Everything started when my dad wanted to get into crypto investments and I gave him a blockchain basics book, so he would know where he was going to put his money in.

![A Non-Technical Introduction in 25 Steps book](https://images-na.ssl-images-amazon.com/images/I/71kAMLqlsGL.jpg)

**[Blockchain Basics: A Non-Technical Introduction in 25 Steps](https://www.amazon.com/Blockchain-Basics-Non-Technical-Introduction-Steps/dp/1484226038) by Daniel Drescher**

However, I ended up reading it first and got amused by how impressive this technology was built. Many smart concepts and techniques were put together, creating a decentralized network to solve problems.

## 📺 Learning the basics

{% youtube https://www.youtube.com/watch?v=M576WGiDBdQ %}

**Freecodecamp's Solidity, Blockchain, and Smart Contract Course by Patrick Collins**

In this video course, @patrickalphac explains a lot of important stuff related to blockchain and smart contract development.  
It goes from initial concepts to building a full stack DeFi application.
Here are some of the topics I've learned from it:
- [Blockchain](https://www.investopedia.com/terms/b/blockchain.asp), [Public/Private Keys](https://andersbrownworth.com/blockchain/public-private-keys/keys), [Layer 2 and Rollups](https://ethereum.org/en/developers/docs/scaling/layer-2-rollups/), [Oracles](https://betterprogramming.pub/what-is-a-blockchain-oracle-f5ccab8dbd72?source=friends_link&sk=d921a38466df8a9176ed8dd767d8c77d)
- Smart Contracts and [Hybrid Smart Contracts](https://blog.chain.link/hybrid-smart-contracts-explained/)
- [ERC20](https://eips.ethereum.org/EIPS/eip-20) (Tokens) and [ERC711](https://eips.ethereum.org/EIPS/eip-721) (NFTs)
- [Consensus](https://wiki.polkadot.network/docs/learn-consensus), [Proof of Stake (PoS)](https://ethereum.org/en/developers/docs/consensus-mechanisms/pos/), [Proof of Work (PoW)](https://ethereum.org/en/developers/docs/consensus-mechanisms/pow/)
- [Decentralized Oracle Network (DON)](https://chain.link/use-cases)
- [Decentralized Autonomous Organization (DAO)](https://www.investopedia.com/tech/what-dao/)
- Mainnets, Testnets and Faucets
- Solidity basics and [best practices](https://consensys.github.io/smart-contract-best-practices/)
- [Chainlink](https://docs.chain.link/) and [Openzeppelin](https://openzeppelin.com/contracts/) contracts
- [Web3.py](https://web3py.readthedocs.io/en/stable/) and [Brownie](https://eth-brownie.readthedocs.io) setup, testing and deployment
- [Ganache](https://trufflesuite.com/ganache/), [Infura](https://infura.io/), [Alchemy](https://www.alchemy.com/), [Pinata](https://app.pinata.cloud/) and [IPFS](https://ipfs.io/)
- Smart Contracts Upgrades: Parameterization Method, [Migration Method
](https://blog.trailofbits.com/2018/10/29/how-contract-migration-works/) and [Proxies](https://blog.openzeppelin.com/the-transparent-proxy-pattern/)
- [Ethers](https://docs.ethers.io/v5/) and [useDapp](https://usedapp.readthedocs.io/en/latest/) frontend libraries.
- Security

## 👷 Start building

With some basic knowledge on how to get started, I felt I was ready to starting building some applications.

While in the previous step I've used Python's Brownie to write scripts, test and deploy smart contracts, I'm actually more familiar with javascript.

![javascript bird](https://c.tenor.com/kHAQm22XApAAAAAC/js-bird-javascript-bird.gif)

That's why the [Hardhat](https://hardhat.org/) Ethereum development framework got me hooked and I started using it since then.

### 🖼️ NFT Marketplace

For the first time in my career, I was willing to pay for some code along course for building a decentralized application (DApp) and I've bought one that seemed being a good deal.

However, the explanation had several gaps, and it missed some development good practices that I was expecting. Luckily I've found a pretty similar tutorial available on YouTube for free with a great instructor.

![Original NFT Marketplace](https://res.cloudinary.com/practicaldev/image/fetch/s--1d8ljara--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx8avrmuwqswx9roub2g.png)

* [How to Build a Full Stack NFT Marketplace on Ethereum with Polygon and Next.js](https://www.youtube.com/watch?v=GKJBEEXUha0) by Nader Dabit (@dabit3)

I followed it along and finished the NFT Marketplace,  but I was not quite happy with the result. I wanted to refactor most of the code and add new features, so I ended up creating a quite different project:

{% github https://github.com/Markkop/nft-marketplace %}

![ezgif com-gif-maker](https://user-images.githubusercontent.com/16388408/159075066-db9bc82a-a4f4-4694-9ca3-546e53905438.gif)

I could create a whole new post about it, but the main new features that I've implemented were:

#### 🟢 Lean NFT's Visualization

Instead of having a page displaying **all** NFTs in the marketplace, another one showing those you have **owned**, an extra one for the NFTs you have **created** and a final one for creating and **selling** an NFT, I decided to shrug them and combine them into two:

**Home**: displays all NFTs that can be bought
**My NFTs**: displays the NFTs you want to keep track of; the ones you've created and might not be under your possession anymore and the ones you've bought so far.

#### 🟢 "Inline" selling

Having a single page for creating and selling an NFT seemed overkill, so I've built an "empty" NFT card that is always showing up first and can be filled with data to create a new NFT.

#### 🟢 Cancel a selling

In my project, it is also possible to cancel an NFT listing.

#### 🟢 User Experience

Several user experience flavors were added, such as: 
* NFTs in the home page are displayed even if the user didn't connect its wallet to the page
* If metamask was not found, a button to download is displayed
* If the user is in another network, a button to change/add to the correct network is displayed
* If the user changes account, the page hot reloads
* If the user is low on testnet native tokens, a faucet link is displayed
* An waiting animation is displayed as feedback after performing a creation, buy or sell action.

#### 🟢 Easy Deployment

While the frontend is automatically deployed using Vercel's Github Integration, contracts have to be manually deployed - specially when testing using a testnet.

But having to change the contract addresses in the frontend every time I wanted to make a change in the contract was bothersome. So I've set the contract addresses as Vercel's environment variables and changed the contracts' deployment script to dynamically update the remote env. variables and trigger a new frontend deployment.

## 🗺️ Planning Ahead

My next step is creating a fullstack DeFi application with more complex implementations such as Oracles, DAO and Proxy Contract.

I also want to keep studying the blockchain fundamental concepts like Consensus Algorithms and Hashing.

There are also several other courses, tutorials and challenges I want to explore. 

Some of them I'm linking below, so you can get a grasp on what I'm going for next.

* 🏃‍♀️ [SpeedrunEthereum](https://speedrunethereum.com/) projects
* 🧟 [Cryptozombies](https://cryptozombies.io/) tutorial
* 🧠 [Cryptohack](https://cryptohack.org/) cryptography learning  platform
* 📄 [Smart Contract Developer Certification](https://www.blockchain-council.org/certifications/certified-smart-contract-developer/) (kinda expensive tho)
* 🚨 [Damn Vulnerable DeFi](https://www.damnvulnerabledefi.xyz/)