DEV Community

The Complete Guide to Full Stack Web3 Development

Nader Dabit on February 10, 2022

Building a full stack web3 app with Next.js, Polygon, Solidity, The Graph, IPFS, and Hardhat The video for this tutorial is also availa...

Read full post

ajcwebdev • Feb 10 '22

Thanks Nader, this is epic! Looking forward to giving this a run through.

Btw, dev.to pro tip: If you use jsx instead of js for the code blocks with React code you'll get better syntax highlighting.

Justyn Clark • Feb 11 '22

Even better with tsx

CryptoMak • Feb 10 '22 • Edited

@dabit3
Thanks for share first post that I will follow to start learning web3.
good to have my first contract deployed

Some errors that I detected and fixed.

1.Please add in the prerrequisites, that you also need to install git, if not the npm install command will fail for the @walletconnect/web3-provider

In the "viewing a post" section, you put " create a directory named posts" the s is incorrect. The directory need to be in singular just "post" if not view and edit post will fail.

For the moment I'm only in that step. I will put more feedback later if needed.

Hope in the future you can post some article for LUNA/TERRA blockchain.

Luis Martinez Suarez • Feb 19 '22

Thanks, I would have never finished the tutorial without your comment

Silvana Trinidad Cerquatti • Mar 18 '22 • Edited

Same, Thanks!
but my error persists..

Alexander Frolov • Feb 13 '22

Thanks for comprehensive piece.

But let me clarify coooouple of details. Maybe I misunderstood something

smart contract is basically a core backend. Since it services CRUD (create, read, update, delete) operations. Without delete in this case.
smart contract is a piece of solidity code, which lives inside blockchain
smart contract describes everything - data (entities. blog post only in our case) and logic (data manipulation)
smart contract stores base data - map of post ids to ipfs hash and vice versa.

Here I have first real questions

What does Post storage post means in smart contract code?
Where all this data is actually stored? Let's say I have 10k posts in my blog. That's 10k pairs id => string and another 10k pairs of string => id. Where are they stored exactly? Inside blocks of blockchain? Does it mean that this "array" will be scattered across huge amount of blocks? And every consecutive call on fetchPosts will be literaly slower and more expensive every day, since physically, data will be distributed across many-many-many blocks?

The whole "data on blockchain" thingy means I (as an author of a blog) will need to pay (quite literally) for each action - create/update post?
Also that means that there is no point (aside from using grpah later) in published field, since every post will be accessible through fetchPosts method of a smart contract. Is that correct?

Actual data of blog post is a JSON file put up on IPFS. Which brings a next set of questions

I edit my post 1k times, I will upload 1k json-files to IPFS, which makes every draft accessible to everyone who knows the hash
1 edit = 1 transaction
1 transaction means I need to pay for it
1 transaction also means that it will be in blockchain "forever" and since every transactions is public, so as a blog (smart contract) address, then everyone can see the list of transactions and therefore whole 1k of json-files (hashes in IPFS)
there is absolutely no guarantee that my blog posts will be there after a couple of months. if nobody will fetch them and/or pin them on their IPFS nodes, that means that chunks of my json-files will be marked as "useless grabage" and will be deleted on next node clean up. is that correct?

There is no pagination for this blog. So if I have 100k posts they all will fetched and displayed at once at one page.

Deploy via deploy.js deploys only smart-contract? What about all other js? Where it will be stored? Where from and how user will download that? How user will be able to access this blog via browser? I can do that from dev env with proper prod config and I can even post there. But who and how will read it?)

Subgraph part. So we

"listen to contract events" - postCreated, `postUpdated
go to IPFS to fetch latest json
populate Post model and store it (in the graph?)

About grpah itself

how it is stored internally?
how it provides fulltext search capabilities?
does it support multiple languages in one text?
does it support multiple languages at all?
every save costs something? isn't it? transaction fee or something
every query costs something? or not?
how do you even integrate this graph into blog?
what about "reindexing" or indexing first time after I already have 1k posts?
how reliable is that?
how fast?

In general.

if I want to support images inside posts not only cover. I will need to come with format (inside json) and store them on IPFS? What about reliability? thumbnails? different sizes and different types (png, jpeg, webp...)
where does the real frontend lives? how user will get js/css/html?

Alexander Frolov • Feb 14 '22

Couple of answers to myself

yup. smart contract is a core backend in solidity
storage - stores info on-chain. memory - while executing a function
yup. blog @ blockchain means I need to pay for every action that I want to be permanent - creating/editing posts in this example
yes. each edit is a new json-file in ipfs.
you still need a real domain name with real server to serve js and stuff
ipfs is slow

Side thoughts

amount of "e-waste" (waste of storage, electricity, cpu, bandwidth...) on ipfs is tremendous
there are no real guarantees that your content will be available in couple of months (on ipfs)
amount of "e-waste" on blockchain is mind-boggling. "history of every action" is no small thing and it's ever growing
there is no real concept of "deleting something" from ipfs or blockchain. enter endless pool of moderation problems
smart contracts are complex and error-prone (as all software basically; and solidity is still far from version 1.0). have trouble reading documents? now try to read code ;)
blockchain by itself is very old idea (~50 years). there is nothing new really.
private chains have their limited applications in very specific conditions (because in general all the same problems could be solved by a set of agreed upon APIs)
web3 is ~20 years old. and it was about semantic web, not "dApps"
"web3 stack" and technology landscape decades behind of what we have now in "traditional web" in every aspect ........

Larson • Feb 17 '22

You forgot that every logo on Web3 websites need to be a jpg monkey :)

Aleksei Berezkin • Feb 12 '22

That's the whole thing of web3 — solve what's already solved, but now with blockchain

Adrianus • Dec 25 '22

It seems like that, because you'd need a the use case when fetching data and getting fetched in turn, what is, you need a business purpose to that. Let's say you provide a good, someone else a service that converts your good into a product, which is then getting incentified. Simple view but cashflow is the driver.

ImTheDeveloper • Feb 12 '22

Great run through of the stack. I've been deploying some clones of other projects for a while and battled through countless hours of gotchas that you've captured here and resolved.

Bringing in components like the graph in this example really shows how you can scale.

Luis Martinez Suarez • Feb 19 '22

If you're on linux and this command doesn't work:

npx hardhat run scripts/deploy.js --network mumbai

Try appending the pk env var like so:

pk=_paste_here_your_private_key_ npx hardhat run scripts/deploy.js --network mumbai

Kirill • Feb 10 '22

Umm, I just wanted to say - you are awesome! Thank you for the guide.

DappDappGo • Feb 10 '22

An incredibly good article.

If you don't have anymore ideas for new articles, think about how to test chainlink vrf contracts. All my tests fail because it's an external function call.

Henrique • Feb 11 '22

Thanks for the great article and detailed steps. But really is all this necessary? Looks like a big step back to what we have been doing in "web2". Again thanks for sharing.

Daniel Simão • Feb 12 '22

I don't think this would be necessary for a normal blog post, but for what he is trying to teach, it's a really good concept, in which you are able to learn file storage, indexing and querying etc...

In the end, believe web3 will replace some parts of web2.

Cheers

DepSteph • Feb 21 '22

Why stacks has to be harder and more complicated or complex.
Once its was html-css +js.

Now its already 10+ framework to pick front-end and/or back-end. Not yet include the between both library..

Tomorrow will be all of this? :-(
So overwhelming and re-inventing the wheel

Nicholas Fazzolari • Mar 10 '22

Wow, the complexity is impressive. This looks like it will be very difficult to maintain over time, and having to find engineers familiar with all these frameworks and libraries could be a real challenge. I'm all for learning new technologies and concepts, but whew this is a lot.

Mehrtens • Apr 21 '22

Hello, this is a great tutorial. Has anybody experienced issues with npm i @walletconnect/web3-provider? All other packages install fine, but this one errors out on git code ENOENT. Not finding the issue. This has me stopped as I cannot connect to Matic network...

jalins • Jun 1 '22

execute command “git config --global url."https://".insteadOf ssh://git@”, then try again

Silvana Trinidad Cerquatti • Jun 2 '22

Hi! same problem here, did you fix it?

lukeb • Feb 10 '22

This is awesome! Is the directory restructure in the repo you linked typically how combine a full stack web3 repo with everything at the top level? I've been debating on moving things around but haven't settled on anything yet

tata • Dec 29 '23

Web3 programmers are professionals who work on designing decentralized applications based on Web3 technology. Hire Web3 developers who understands the principles behind Web3, are knowledgeable about the pertinent programming languages, and has the appropriate tech stack to support their development work.

Daniel Simão • Feb 12 '22 • Edited

Thanks Nader for this post! I found some things that went wrong on my side.

npx hardhat test was failing with:
TypeError: Cannot read properties of undefined (reading 'getContractFactory')

Fixed by removing the following from tests/sample-test.js:
const { ethers } = require("hardhat");

And adding the following to hardhat.config.js:
require("@nomiclabs/hardhat-waffle");

Cheers

timmysmalls • Feb 13 '22

It's really cool to see all these things in action, but I don't have a full grasp yet of when I'll actually need this. I understand that this is just an example, but I don't know when I would use a blockchain for decentralized hosting.

Silvana Trinidad Cerquatti • Jun 2 '22 • Edited

Hi everyone!
My error persist when i'm trying to install "npm install --save web3 @walletconnect/web3-provider"

npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

I have tried everything... can anyone help me?
I can go ahead with this.

LeeFan0 • Jun 8 '22 • Edited

Need install git:

pkg install git

dhaval.eth • Jun 15 '22

dev.to/cryptomak/comment/1m26m

Brittany • Mar 22 '22

Hello, would anyone be able to help me? I'm suck on initializing a new subgraph, when trying to add my ABI path, terminal outputs "File does not exist". I've tried typing it out and dragging directly from the location. I can't seem to find the answer for this.

Any help is appreciated.

Ikenna Blaise Akupuome • Apr 6 '22

You just need to cd into the blogcms folder and run all commands from there

Xinxin Peng • Apr 9 '22 • Edited

Thanks for this thorough walk through! When deploying the localhost, the create post button next to home could not appear. I have double checked all the steps, it is the same as what you presented in the blog. Would you mind helping me figure out what might be the issue?

dhaval.eth • Jun 16 '22

connect your metamask wallet first

Ian Judd • Feb 17 '22

hm.. about halfway through the piece (after building out index.js) I started getting this error when I try to run dev

Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.5.3)

Any ideas on how to resolve this?

SimeonGavalyugov • Feb 20 '22

I had the same error - for some reason new ethers.providers.JsonRpcProvider() wasn't recognizing the network running so I had to pass the url explicitly i.e

new ethers.providers.JsonRpcProvider("127.0.0.1:8545");

Ikenna Blaise Akupuome • Apr 6 '22 • Edited

it is most likely on your hardhat config file, try to make sure the network address and accounts array is visible to that file.

Paweł Kowalski • Feb 12 '22 • Edited

Thats a lot of work to get almost nothing done. :) I will stay away from this for sure. This dev workflow looks like made for masochists.

Samuel Adex • Feb 10 '22

Awesome guide, thanks alot

Rod O • Apr 7 '22

Deploying to Polygon
I had problems in the step deploying to Polygon

I requested 1 MATIC from Faucet
In metamask I would see .5 MATIC
I'd start but I would get "INSUFFICIENT_FUNDS"
In metamask I would see 0.079 MATIC now
Refresh and I'd see 0 MATIC
At this point I don't understand:
1) Why don't I see ~1 MATIC show after requesting it.
2) If my network didn't start, why does the MATIC disappear from my test account.

I repeated this several times, then eventually I was successful starting - I think the only thing different is I started it up immediately after receiving the .5 MATIC -- and now I see 0.473 MATIC in my account - and it doesn't disappear when I refresh.

Rod O • Apr 8 '22

Guessing that this address is shared, probably by anyone who is using this tutorial - and others have left something running so they chew up the MATIC's from the account. Still don't really understand why 1 is requested and .5 goes to the wallet.

Utilitycoder • Feb 15 '22

Thanks for the guide, Nader. I have a newbie question. I can't seem to figure out why my wallet isn't connecting. I get a "error: TypeError: Cannot read properties of undefined (reading 'provider')" in my console while trying to debug.

Ikenna Blaise Akupuome • Apr 6 '22

maybe the address you are using isn't connected, first make sure your address says "connected" on metamask

Darahas Kopparapu • Apr 4 '22 • Edited

why const provider = new ethers.providers.Web3Provider(window.ethereum) is used in create-post where as provider = new ethers.providers.JsonRpcProvider('rpc-mumbai.matic.today') is used to get a post??

Petros Demetrakopoulos • Feb 13 '22

A really nice library that can be used in any Web3 stack is EthairBalloons. It is a strictly typed ORM library for Ethereum blockchain. It allows you to use Ethereum blockchain as a persistent storage in an organized and model-oriented way without writing custom complex Smart contracts. It is available for installation via npm.

Nancy Bennetts • Feb 16 '22

Awesome guide, Thanks 👏👏👏

RD • Feb 15 '22

This is very well written. Thank you!

Hannah Vile • Feb 14 '22

omg you're the best. I've been subscribing to various coding websites & just discovered this.

new/bird • Mar 11 '22

goods

John • Feb 21 '22

amazing post.

still too lazy to get started today.

Masoud Shokohi • Feb 13 '22

{...}

nebulahh • Jul 5 '22

i am always getting this error

00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'deploy'

when i run yarn deploy. what else can i do?

shradz.eth is in nyc • Jul 12 '22 • Edited

npx hardhat run scripts/deploy.js --network mumbai

when i try to deloy ^^ it hangs for a long time and does not compile. Did anyone else face this? what should i do

Mat Kwa • Oct 29 '23

Awesome tutorial, thanks. Great starting point for Web3 development.

Hongyu You • May 17 '22

The contract function updatePost( ) has a line: idToPost[postId] = post;
What does it do? Does it really needed?
If we should remove hashToPost[old_hash]?

RangerCoder99 • Feb 11 '22

Please just stop with this web3 stuff it's just one spam 😔 it's not web 3.0 or does it got anything to do with the official workgroups... just son corporate play to make tons of money

lukeb • Feb 12 '22

sucks to suck

Ben Halpern • Feb 11 '22

I'll be coming back to this post for sure.

Abdullah Furkan Özbek • Feb 27 '22

Thank you for the amazing tutorial!

Gelato Network • Feb 18 '22

Thanks Nader for putting this together!

dhaval.eth • Jun 16 '22 • Edited

I am unable to view the cover image while viewing the post. what to do?

Karthik Nagarajan • Feb 10 '22

You Sir are a Total class act :) I take a bow!

Frej Andreassen • Mar 28 '22

Thank you Nader! This tutorial is extremely relevant, eye opening, informative and to the point. Thank you!

nebulahh • Jul 5 '22

hello @dabit3, metamask cannot fetch the chainId 80001 for the step 'configuring the network'. what can i do

lucianboboc • Feb 27 '22

Layer 1 with no Cardano and Terra? Both are too 10

EmilioOtten • Feb 25 '22

glad to found this , such a helpful post , you're great. vashikaran specialist in Coimbatore

Leandro Esteban Galvan • Feb 21 '22

Hi, thanks for the guide. I have a mistake maybe someone can help me.
Failed to compile
./pages/_app.js:9:0
Module not found: Can't resolve '../config'

I'm obviously a newbie!

Thanks!

Sokari Andrew-jaja • Feb 21 '22

Thanks, Great content.

Alan Breugem • Feb 10 '22

Awesome Guide, thanks

Demóstenes Muniz Brito • Feb 19 '22

It's a burn in my heart! Thanks for sharing your post, I note relevant links for studying combinated with the comments on this post.

rainstorm • Feb 19

I have a error..
import "@openzeppelin/contracts/utils/Counters.sol";
I couldn't find the Counters.sol file. please help me!

Xavier Canchal • Feb 13 '22

Amazing one Nader. The Graph section was specially useful!

JI • Feb 13 '22

私は日本のエンジニアです！
投稿に感謝します！

nebulahh • Jul 5 '22 • Edited

I am supposed to add an assemblyScript mapping to src/mappings.ts but there is no such file in src/. the file there is blog.ts. should i update the blog.ts with the provided assemblyScript