DEV Community

Cover image for The Complete Guide to Full Stack Web3 Development

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...
ajcwebdev profile image

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

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

justynclark profile image
Justyn Clark

Even better with tsx

cryptomak profile image
CryptoMak • Edited on

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

  1. 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.

luismartinezs profile image
Luis Martinez Suarez

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

silc22 profile image
Silvana Trinidad Cerquatti • Edited on

Same, Thanks!
but my error persists..

philosoft profile image
Alexander Frolov

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?
philosoft profile image
Alexander Frolov

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 ........
larsonnn profile image
Lars Feldeisen

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

imthedeveloper profile image

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.

t0nyba11 profile image
Tony B

Nice guide, but this really makes me never want to work with this approach ever if something so simple, already running in nodejs anyway, is so complex for so little benefit. Get off my lawn :)

alekseiberezkin profile image
Aleksei Berezkin

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

luismartinezs profile image
Luis Martinez Suarez

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

dappdappgo profile image

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.

sokirill profile image

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

hjgraca profile image

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.

danielsimao profile image
Daniel Simão

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.


stephd profile image

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

timmysmalls profile image

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.

silc22 profile image
Silvana Trinidad Cerquatti • Edited on

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.

0xdhaval profile image
leefan0 profile image
LeeFan0 • Edited on

Need install git:

pkg install git

xinxinatg profile image
Xinxin Peng • Edited on

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? Screenshot

0xdhaval profile image

connect your metamask wallet first

robmehrtens profile image

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...

silc22 profile image
Silvana Trinidad Cerquatti

Hi! same problem here, did you fix it?

jalins profile image

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

pavelloz profile image
Paweł Kowalski • Edited on

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.

ikjudd profile image
Ian Judd

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 profile image

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("");

akupsmee profile image
Ikenna Blaise Akupuome • Edited on

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

girl_d3v profile image

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.

akupsmee profile image
Ikenna Blaise Akupuome

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

nickfazzpdx profile image
Nicholas Fazzolari

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.

danielsimao profile image
Daniel Simão • Edited on

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:


lukeb profile image

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

darahask profile image
Darahas Kopparapu • Edited on

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

utilitycoder profile image

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.

akupsmee profile image
Ikenna Blaise Akupuome

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

demetrakopetros profile image
Petros Demetrakopoulos

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.

rod_o profile image
Rod O

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 profile image
Rod O

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.

samueladex profile image
Samuel Adex

Awesome guide, thanks alot

ben profile image
Ben Halpern

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

maxyou profile image
Hongyu You

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]?

pachverb profile image


__shradz profile image
shradz.eth is in nyc • Edited on

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

afozbek profile image
Abdullah Furkan Özbek

Thank you for the amazing tutorial!

awguo profile image

amazing post.

still too lazy to get started today.

gelato profile image
Gelato Network

Thanks Nader for putting this together!

nancybennetts profile image
Nancy Bennetts

Awesome guide, Thanks 👏👏👏

rodiwa profile image

This is very well written. Thank you!

hanayezi profile image
Hannah Vile

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

mass59 profile image
Masoud Shokohi


nebulahh profile image

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?

rangercoder99 profile image

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 profile image

sucks to suck

arome_dev profile image
Abraham Onoja

Thanks Nader. This is super helpful 👏👏

divee789 profile image
Divine Olokor

Good Tutorial.

If you are having network issues on running the nextjs app at first, try and downgrade your node version to 16.0.0 and below.

philosoft profile image
Alexander Frolov

or you can use export NODE_OPTIONS=--openssl-legacy-provider and it will be fixed in v17

xcanchal profile image
Xavier Canchal

Amazing one Nader. The Graph section was specially useful!

iidajun profile image


nebulahh profile image

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

lucianboboc profile image

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

emiliootten profile image

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

liongg profile image
Leandro Esteban Galvan

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

I'm obviously a newbie!


breugemalan profile image
Alan Breugem

Awesome Guide, thanks

sokijaja profile image
Sokari Andrew-jaja

Thanks, Great content.

0xdhaval profile image
dhaval.eth • Edited on

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

demostenesbr profile image
Demóstenes Muniz Brito

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.

nebulahh profile image
nebulahh • Edited on

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

karthik2502 profile image
Karthik Nagarajan

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

frejandreassen profile image
Frej Andreassen

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