Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
16 June, 2022
17
17
0
Contributors
Decentralized applications (dApps) are one of the most promising applications of blockchain technology. They open up new possibilities for consumer and business-focused products with never-before-seen capabilities.
It's fascinating to see how powerful decentralized applications may be built to supplement the commercial environment.
This post will teach us how to Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS, and Solidity.
It will be a platform where anyone on the internet can read, share, and post news, with the data being stored on the Polygon network's blockchain using smart contracts.
A smart contract is code stored on the blockchain and can be read and written from; we'll get into more detail later.
We'll build and deploy the smart contract and a website that allows people to connect their wallets and interact with our smart contract.
👉 GitHub Repositories
Prerequisite
Let us ensure we have Node/NPM installed on our PC. If we don't have it installed, head over here for a guide.
Project Setup and Installation
Let's navigate to the terminal. We'll need to
cd into any directory of our choice and then run the following commands:Let's get a sample project by running the command below:
We'll go with the following options:
•
A sample project.
•
Accept all other requests.
Installing
hardhat-waffle and hardhat-ethers is required for the sample project.Just in case it didn't install automatically, we will install this other requirement with the following command:
Next, we will install
@openzeppelin/contracts for the counter we will use later in this tutorial.To make sure everything is working, let us run the command below.
We will see a passed test result in our console.
It is now possible for us to delete
sample-test.js from the test folder and delete sample-script.js from the scripts directory. After that, go to contracts and delete Greeter.sol.The folders themselves should not be deleted!
We'll create a
NewsFeed.sol file inside the contracts directory. When using Hardhat, file layout is crucial, so pay attention! We're going to start with the basic structure of every contract.To build and deploy our smart contract, we will navigate to the
scripts folder, create a new run.js file, and update it with the following code snippet:Let's run it with the following command.
You should see something similar to what we have below:
We have a working smart contract 🥳 Let us deploy it to a local network.
Under the
scripts folder, we will create a deploy.js file. Add the following code snippet.Before deploying, let us ensure we have our local node up and running in a separate terminal with the following command.
Next, we will deploy our smart contract.
We should have something like this.
npx hardhat node
Building and Deploying NewsFeed Smart Contract to Blockchain
Everything, including the test script and the
deploy.js file, is in place. We'll update the smart contract, run.js, and deploy.js files with the following code snippet:Updating the
contracts/NewsFeed.sol file.Update
scripts/run.jsscripts/deploy.jsIt's finally time to get down to business and deploy to the blockchain.
Before deploying to the blockchain, we'll need to create an Alchemy account.
Alchemy enables us to broadcast our contract creation transaction so that miners can pick it up as quickly as feasible. Once mined, the transaction is published as a valid transaction to the blockchain. After that, everyone's blockchain copy is updated.
After you sign up, we'll create an app like the one below. Remember to switch the network to Mumbai, where we'll be deploying.
Create Alchemy App
We will need to grab our keys, as shown below, and store them for later use:
Create Alchemy App
We'll need some MATIC tokens in our testnet account, and we'll have to request some from the network. Polygon Mumbai can get some phony MATIC by using a faucet. This fake MATIC can only be used on this testnet.
We can grab some MATIC token here
Let us update the
hardhat.config.js file in the root project directory.If we look at the code snippet above, we can see that some keys were read from the
.env file, as well as the import at the top of require("dotenv").config(), which implies we'll need to install the dotenv package and also create a .env file using the command below:Inside the
.env file, we will add the following keys:Getting our private account key is easy. Check out this post.
Next, let's write a basic test to test out the most critical functions we'll be using.
To do so, open we will create a
feed-test.js file inside the test directory and update it with the following code:Next, we will run the test with the following command:
Now we can run the command to deploy our contract to a real blockchain network.
Our output should look like what we have below.
Terminal
We just deployed our contract. 🥳🥳🥳
Building Frontend React Client
To quickly get started with the project setup and installation, we will clone this project on GitHub and ensure we are on the
project-setup branch.Next, we will launch the project locally after cloning it using the following command on our terminal.
Or
After cloning and installing the project, we should have something similar to what we have below:
Default Frontend app
We want to get all the news feeds from the smart contract we just launched without requiring users to connect their wallets. This implies that anyone can use our app to browse information without linking their wallets and only connect wallets when they wish to create a news feed.
Let us update the
getContract.js file inside the utilities folder with the following code snippet.In the code snippet above, we get our contract and include a random wallet address in the
getSigner function. This is because we want everyone that visits our site to reads news without having to connect their wallets.Ensure passing a valid ethereum wallet address when creating/saving a record on the blockchain
We also added a contract address displayed in our terminal when we deployed our contract to the blockchain.
Let's go back to the smart contract project we worked on before, then navigate to
artifacts/contracts/NewsFeed.json and copy the entire content inside it. We will update the newsfeed.json file in the utilities folder with what we copied.Building the FeedList Component
In this section, we will create a
FeedList.js file inside the component folder and update it with the following code snippet.Next, we will import the
FeedList component, the toast response, and ToastContainer by updating the HomePage.js file with the following code snippet.Building User's Connect Wallet Functionality
Because no record has yet been recorded on the blockchain, and we are yet to create the function that retrieves all the feeds made, we should have something similar to what is displayed above, which appears empty.
This section will build the functionality that allows users to contact their wallets on our platform to create a feed.
Let's update the
HomePage.js with the following code snippet.Next, we will update the
Header.js file.Clicking on the
Connect your Wallet button, we will get a metamask login popup.
Connect Metamask
After connecting, we will be redirected back to our application where the button showing
Connect your wallet earlier now shows Create a Feed as shown below.
Feed page
Building Upload News Feed Page
We will build a page where users can enter new feed details and upload them to the blockchain. Let us create
UploadPage.js inside the src directory and update it with the following code snippet.Next, we will update the
App.js file by importing the new page we just created with the following code snippet.Clicking on the
Create a New Feed button on the homepage will redirect us to the upload page, as shown below.
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
After entering all the required details for upload, we can proceed to submit the feed.
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
We were redirected to the homepage, and nothing happened :(.
We will create a
getFeeds function on the homepage to retrieve all the feeds.HomePage.jsLet's wait for the transaction to confirm. It takes a few seconds, and we should see it appear in real-time.
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
Building the Feed Page
Start by creating the
Feed.js file inside the components folder and updating it with the following code snippet.Next, we will create the
FeedPage.js file inside the src directory and update it with the code snippet below.In the snippet above, we retrieve a single feed and get related feeds in the feed category.
Next, we will update
App.js with the following code snippet.Testing our Application 🥳
I have created several posts to test the application, as shown below.
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
Single Feed Page
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
Social Share
Build a Decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity
After upload, we might experience some delay or glitch when the feed appears on the homepage. We need to wait for some extra minutes, and then everything will become stable ;)
Conclusion
This article teaches us to build a decentralized News Feed using Reactjs, TailwindCSS, Etherjs, IPFS & Solidity on Polygon Network.
References
•
See you in my next blog article. Take care!!!
react
blockchain
web3
solidity