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
NextJS creates a upload image api by itself and it supports Tinymce

NextJS creates a upload image api by itself and it supports Tinymce

If you build a website with NextJS as full stack web framework, perhaps you will encounter a need to upload a file.

But the NextJS’s official website doesn’t write how to do this.

So I investigated other developers’ code to make a working version.

Read more
Self hosted TinyMCE 6.x in NextJS 12.x - Javascript version