Setting Up Our Project

I wish I could separate the front-end app and the chain-end app.
Keep simple, keep pure.

What are you best to know

• Metamask
• React
• Node
• Solidity

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

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

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

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.

Create NextJS Project

1

yarn create next-app

Install TinyMCE latest version

1

yarn add tinymce @tinymce/tinymce-react copy-webpack-plugin