Web3 Developer Stack in 2023 - Let's start laying the foundation for you from today

[manhsteven]

This is an opinionated guide to becoming a web3 developer in 2023.

I’ll outline the exact steps that I personally took to land a role as a developer relations engineer at thirdweb; a suite of developer tools for building in web3.

Unlike other roadmaps, I’m not going to give you 300 things to learn and get you stuck in tutorial hell. This is an actionable, sequence of technologies for you to learn, including the exact resources I found most helpful throughout my journey.

Let’s dive into it! Below is a preview of each layer of the stack we’ll be covering.

Important Disclaimer (READ THIS)

Consuming resources alone will never teach you how to become a developer.

Every dev has to constantly fight their own battles on the journey to understanding how to code, and put together the pieces of the gigantic puzzle along the way.

As soon as you know how to START building, exit the roadmap and go at it alone. Just try to build something. It’s going to suck. And that’s the point!

Come back to the resources to fill in the gaps in your knowledge as you get stuck; learn what tools are available for you to use that solve your problems with the resources in this guide.

Every project you make will be better than the last, and you’ll soon be embarrassed by your old code.

DO NOT just consume these resources, they are only there to help point you in the right direction in a logical order as you actually build your own projects.

It’s not going to be easy, but it is worth it. Buckle up and let’s get started!

The Roadmap

We're going to cover a lot of topics in this roadmap, and I'll provide you with resources that I personally used to develop my understanding at each step of the way. Here's a quick preview of some of the tools we'll cover:

The Fundamentals: HTML & CSS

Every website consists of three things:

HTML: Structure of elements on the page

CSS: Style of elements on the page

JavaScript: Interactivity of elements on the page

Any application you build, no matter what technology you use, is eventually transformed into these three languages and served to a user on a web page.

Hence it’s an important foundational piece of knowledge to understand the very basics of HTML and CSS first before diving into any “programming” (adding interactivity or logic to your application).

React - Building User Interfaces

If you’ve started building your project by this point, you’ve probably realised that it is difficult to build an application by writing HTML, CSS, and JS alone.

Developers have come up with many different libraries and frameworks to address these issues over the past decade; jQuery, Angular, Svelte, Vue… the list goes on!

One library has come out on top; React, which is:

• The most used frontend JS framework of 2022.

• The framework that most developers “want” to use in 2022.

• The most in-demand frontend framework for landing a job (too lazy to get a source for this stat, so… “probably” ).

React uses a syntax called JSX to combine writing your UI structure and design with your “interactivity” in the same location:

Next.js - Making React WAY Better

I’ll save you a lot of struggle: completely skip Create React App (CRA) and arguably even Vite. Start by using Next.js right from the get-go.

Below is a great three-minute explainer of why CRA is no longer ideal for new projects using React:

Get Started with Next.js
Next.js documentation is absolutely brilliant. Lee Robinson and his team of DX engineers have written fantastic, interactive documentation to help you learn Next.js and quiz your knowledge along the way.

For this reason, I recommend running through the interactive documentation first; and then diving into creating your first Next.js application with their CLI.

Blockchain Fundamentals

If you don’t already have knowledge of what a blockchain or smart contract is, a helpful resource for beginners is Patrick Collins’ blockchain course.

I suggest you watch the first 2 hours of the 32-hour course which introduces the core concepts of blockchain, smart contracts and web3. You can pick and choose the other areas of the course that interest you as you wish!

Understanding the Web3 Stack

An introductory video I recommend watching is “Defining the Web3 Stack”, by Nader Dabit; which outlines the equivalent web3 tech stack compared to a traditional “web2” application.

As an updated graphic to Nader’s talk in 2021, I have provided my thoughts on the tech stack of a web3 application below:

Building a full stack web3 app "the hard way"

Arguably the best resource I consumed when I was entering the web3 space was Nader Dabit's "Full Stack NFT Marketplace" video tutorial. You'll learn how to build almost every aspect of a full-stack web3 application at a rapid pace, including:

• NFT Collection smart contract

• NFT marketplace smart contract

• Smart contract development environment and testing

• IPFS file uploads and downloads

• Frontend technologies & Next.js to build a web3 application

• RPC nodes and IPFS Gateways.

RPC Nodes

To communicate to and from the blockchain, you need to use a node. Unless you want to run your own Node, you need to use a service provider such as Alchemy, Coinbase, or Moralis, (or thirdweb as we’ll explain in the next section) to do so.

Below is a great resource outlining what an RPC Node is and why it’s required to build web3 applications: https://www.alchemy.com/overviews/rpc-node

Decentralized Storage Solutions

Not all information needs to be stored on the blockchain. Storing data on the blockchain itself costs gas fees and has a significant storage limit; for this reason, a common pattern is to store your information “off-chain” and store the URL of that data on the blockchain instead.

Storage solutions exist that aren’t stored “on-chain” but are still not controlled by a centralized service such as AWS or Google Cloud. The two prominent decentalized storage solutions solutions in 2023 are:

• IPFS
• Arweave

Indexing Solutions

Some web3 applications require information that isn’t directly available from any smart contract; such as what NFTs a wallet owns, or how many times an NFT has been transferred.

When it comes to indexing solutions, you can use The Graph; a decentralized solution, and again use Nader’s resources to learn how to get started:

You might prefer to use SDKs or API endpoints to get your indexed information, and there are a number of popular solutions you can use, each with helpful resources and videos on their documentation:

• Alchemy

• Coinbase Cloud

• Moralis

These tools have similar capabilities with various pros and cons, you can use their documentation to explore which tool is right for you.

Smart Contracts

There are many resources you can use to learn Solidity itself, such as:

• CryptoZombies (interactive course)
• Learn Web3 (learnweb3.io)
• Literally, just read the Solidity documentation

Smart Contract Security

It is important to know the most common vulnerabilities of smart contracts, which again Patrick covers thoroughly in his 32-hour Solidity course in Chapter 18 at this timestamp.

Conclusion

That’s it! These are the resources I personally used to develop my knowledge in web3 and land a job as a developer relations engineer at thirdweb!

I’d like to reiterate that tutorials and resources alone will never be enough to become a dev. You need to get your hands dirty ASAP, come back to these resources as you run into problems in your project, and constantly fight battles on your own over many years to come.

The goal of this article isn’t to give you months of resources to consume, it’s here so you can come back to trusted sources of high-quality information as you build your own projects alone!

Source: https://blog.jarrodwatts.com/how-to-become-a-web3-developer-in-2023
Source: learnweb3.io
Source: cryptozombie.io

[joker]

Good, CryptoZombies and Learnweb3.io is an interactive school that teaches you all things technical about blockchains

[JoinTommy]

Thanks for contributing, keep the fire