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

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.

Collapse
 
justynclark profile image
Justyn Clark

Even better with tsx

Collapse
 
cryptomak profile image
CryptoMak • 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

  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.

Collapse
 
luismartinezs profile image
Luis Martinez Suarez

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

Collapse
 
silc22 profile image
Silvana Trinidad Cerquatti • Edited

Same, Thanks!
but my error persists..

Collapse
 
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?
Collapse
 
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 ........
Collapse
 
_genjudev profile image
Larson

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

Collapse
 
alekseiberezkin profile image
Aleksei Berezkin

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

Collapse
 
adrianus profile image
Adrianus

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.

Collapse
 
imthedeveloper profile image
ImTheDeveloper

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.

Collapse
 
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

Collapse
 
sokirill profile image
Kirill

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

Collapse
 
dappdappgo profile image
DappDappGo

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.

Collapse
 
hjgraca profile image
Henrique

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.

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

Cheers

Collapse
 
stephd profile image
DepSteph

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

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

Collapse
 
robmehrtens profile image
Mehrtens

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

Collapse
 
jalins profile image
jalins

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

Collapse
 
silc22 profile image
Silvana Trinidad Cerquatti

Hi! same problem here, did you fix it?

Collapse
 
lukeb profile image
lukeb

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

Collapse
 
liligrvs profile image
tata

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.

Collapse
 
danielsimao profile image
Daniel Simão • 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

Collapse
 
timmysmalls profile image
timmysmalls

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.

Collapse
 
silc22 profile image
Silvana Trinidad Cerquatti • 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.

Collapse
 
leefan0 profile image
LeeFan0 • Edited

Need install git:

pkg install git

Collapse
 
0xdhaval profile image
dhaval.eth
Collapse
 
girl_d3v profile image
Brittany

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.

Collapse
 
akupsmee profile image
Ikenna Blaise Akupuome

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

Collapse
 
xinxinatg profile image
Xinxin Peng • 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? Screenshot

Collapse
 
0xdhaval profile image
dhaval.eth

connect your metamask wallet first

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

Collapse
 
simeongavalyugov profile image
SimeonGavalyugov

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

Collapse
 
akupsmee profile image
Ikenna Blaise Akupuome • 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.

Collapse
 
pavelloz profile image
Paweł Kowalski • 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.

Collapse
 
samueladex profile image
Samuel Adex

Awesome guide, thanks alot

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

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

Collapse
 
utilitycoder profile image
Utilitycoder

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.

Collapse
 
akupsmee profile image
Ikenna Blaise Akupuome

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

Collapse
 
darahask profile image
Darahas Kopparapu • 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??

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

Collapse
 
nancybennetts profile image
Nancy Bennetts

Awesome guide, Thanks 👏👏👏

Collapse
 
rodiwa profile image
RD

This is very well written. Thank you!

Collapse
 
hanayezi profile image
Hannah Vile

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

Collapse
 
pachverb profile image
new/bird

goods

Collapse
 
awguo profile image
John

amazing post.

still too lazy to get started today.

Collapse
 
mass59 profile image
Masoud Shokohi

{...}

Collapse
 
nebulahh profile image
nebulahh

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?

Collapse
 
__shradz profile image
shradz.eth is in nyc • 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

Collapse
 
matkwa profile image
Mat Kwa

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

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

Collapse
 
rangercoder99 profile image
RangerCoder99

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

Collapse
 
lukeb profile image
lukeb

sucks to suck

Collapse
 
ben profile image
Ben Halpern

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

Collapse
 
afozbek profile image
Abdullah Furkan Özbek

Thank you for the amazing tutorial!

Collapse
 
gelato profile image
Gelato Network

Thanks Nader for putting this together!

Collapse
 
0xdhaval profile image
dhaval.eth • Edited

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

Collapse
 
karthik2502 profile image
Karthik Nagarajan

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

Collapse
 
frejandreassen profile image
Frej Andreassen

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

Collapse
 
nebulahh profile image
nebulahh

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

Collapse
 
lucianboboc profile image
lucianboboc

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

Collapse
 
emiliootten profile image
EmilioOtten

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

Collapse
 
liongg profile image
Leandro Esteban Galvan

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!

Collapse
 
sokijaja profile image
Sokari Andrew-jaja

Thanks, Great content.

Collapse
 
breugemalan profile image
Alan Breugem

Awesome Guide, thanks

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

Collapse
 
williampotterexp profile image
rainstorm

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

Collapse
 
xcanchal profile image
Xavier Canchal

Amazing one Nader. The Graph section was specially useful!

Collapse
 
iidajun profile image
JI

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

Collapse
 
nebulahh profile image
nebulahh • 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

Collapse
 
1976umar profile image
Uma R

Thanks for wonderful tutorial!

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

Collapse
 
philosoft profile image
Alexander Frolov

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

Collapse
 
arome_dev profile image
Abraham Onoja

Thanks Nader. This is super helpful 👏👏