web 3 development package

 

Building a full stack web3 application using Next.js, Polygon, Solidity, The Graph, IPFS and Hardhat

The video for this tutorial is also available here.

In this in-depth tutorial, you'll learn the tools, protocols, and frameworks needed to build full-stack web3 applications and, most importantly, how to put them together to lay the foundation for developing any of your ideas in the future.

 The code base for this application can be found here

 The leading network we will be posting to is Polygon. I chose Polygon for its low transaction costs, fast block times, and current network adoption.

 With that, we'll be building on the Ethereum Virtual Machine (EVM), so you can apply those skills to making dozens of other blockchain networks, including Ethereum, Celo, Avalanche, and many others.

 The application we will create is an integrated blog and a content management system (CMS), which means that it will have an open, public and configurable backend that can be moved and reused anywhere. 

 By the end of this tutorial, you should understand the essential parts of the modern web3 Stack and how to build high-performance, scalable, and complete decentralized blockchain applications.

 This is the fourth guide in my "Full Stack" web3 series. Also, be sure to check out the following:

 The Complete Guide to Full-Stack Ethereum Development

Building a full-stack NFT marketplace on Ethereum with Polygon

The Complete Guide to Complete Solana Development Using React, Anchor, Rust, and Phantom

web3 Stack

web3 Stack

 In Defining web3 Stack, I wrote about my interpretation of the current state of the web3 technology stack from a developer's perspective using a combination of my personal experience and research over the past year on my teams at Edge & Node.

 We'll use pieces from this Stack for this app:

 Blockchain - Polygon (with optional RPC provider)

Ethereum development environment - Hardhat

Frontend Framework - Next.js and React

Ethereum web client library - Ethers.js

File storage - IPFS

Indexing and Queries: The Graphical Protocol

By learning how to use these building blocks, we can build many types of applications, so this tutorial aims to show you how each works and how they all fit together.

 Let's Begin!

 revious requirements

Node.js is installed on your local machine

The MetaMask Chrome extension is installed in your browser

Project settings

Here we will create the standard application forms, install all the necessary dependencies and configure the project.

 I'll comment on the code to give you an idea of what's going on, and I'll also describe some of what's going on throughout the tutorial.

 To get started, create a new Next.js app and change to the new directory:

px create-next-application web3-blog

 cd web3-blog

Then change to the new directory and install the following dependencies using npm, yarn, or ppm :

npm install ethers hardhat @ nomiclabs / hardhat-waffle \

Ethereum-waffle chai @ nomiclabs / hardhat-ethers \

web3modal@walletconnect/web3-provider

react-simple, markdown, react-simple, ed

ipfs-HTTP-client @emotion/css@openzeppelin/contracts

An overview of some of these dependencies:

 hardhat - Ethereum development environment

web3modal - An easy-to-use library that allows users to connect their wallets to your application

react - markdown and simple mode - Markdown editor and Markdown viewer for CMS

@emotion/css - A great CSS file in the JS library

@openzeppelin/contracts: Open source implementations of useful smart contract standards and functionality

Next, we will configure the local intelligent contract development environment.