Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - Latest Version

Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - Latest Version

Why

Recently, I studied a lot of knowledge about the Ethereum ecosystem.
I can’t wait to create something by myself.
But I searched for a long time without finding a basic tutorial for me to explain how the front-end and chain-end interact.
Some tutorials are old. Other tutorials don’t match my tech stack.
I know scaffold-eth can help most fresh developers begin Ethereum development. However, scaffold-eth has too much magic for me. It hides some basic things. And I want to know the full details.
So I reckon I could write some articles from web2 developer to web3 beginner DApp developer in 2022. It’s a cool thing.

Read more
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 6 Deploying DApp to the world
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 5 Building front-end then using it to call smart contract
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 4 Deploying the smart contract to a local chain
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 3 Setting up the local chain

Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 3 Setting up the local chain

Setting up the local chain for development

Usually, We have three choose to run a chain on localhost.

  1. HardHat - HardHat Network
  2. Truffle - ganahce
  3. Foundry - anvil

Generally, we should have chosen anvil. It’s a part of Foundry.
Unfortunately, there were a lot of transitions pending when I used it. From my point of view anvil just is the 0.1.0 version. It will be need more time to develop.
And I want to keep pure in chain end’s project(Not more javascript or npm install).
Finally, we used the ganahce to run chain on localhost.

The ganahce is very easy to install and setting up. It’s a GUI application.

Read more
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 2 Setting up the project
Zero to One Full-Stack DApp Ethereum Development based on Foundry, NextJS, Typescript - 1 Frameworks and technologies
Zero to One Full-Stack Ethereum DApp Development based on Foundry, NextJS, Typescript - 0 What is a minimal DApp?

Zero to One Full-Stack Ethereum DApp Development based on Foundry, NextJS, Typescript - 0 What is a minimal DApp?

Why

Recently, I studied a lot of knowledge about the Ethereum ecosystem.
I can’t wait to create something by myself.
But I searched for a long time without finding a basic tutorial for me to explain how the front-end and chain-end interact.
Some tutorials are old. Other tutorials don’t match my tech stack.
I know scaffold-eth can help most fresh developers begin Ethereum development. However, scaffold-eth has too much magic for me. It hides some basic things. And I want to know the full details.
So I reckon I could write some articles from web2 developer to web3 beginner DApp developer in 2022. It’s a cool thing.

Learning DApp architecture

I have read through this The Architecture of a Web 3.0 application and the knowledge I have so far.

I draw the simply DApp architecture

Simply DApp architecture

Look at the picture, there are two important questions:

  1. How do browsers and websites interact with each other?
  2. How do websites and blockchains interact with each other?

Simple Answers:

  1. Browser’s wallet extension or Wallet App
  2. JSON RPC

Then, we will explore these two questions carefully when building a minimal DApp.

Our Target

  1. What is a minimal DApp?
  2. Frameworks and technologies
  3. Setting up the project
  4. Setting up the local chain
  5. Deploying smart contract to a local chain
  6. Building front-end then using it to call smart contract
  7. Deploying DApp to the world
Read more