Blog Dapp(DEV.to Clone) using Nextjs + Tailwindcss + Ether.js + Hardhat + Solidity(Smart Contract) Part-1

Core functionality of Dapp

👉 Creating the Blog Post.
👉 Adding comments to the perticular blog post.
👉 Liking the blog post.

Live Demo Link Of Dapp

Github Repo Link

Blockchain is typically one of the highest-paying programming industries, with developers earning between $150,000 and $175,000 per year on average as salaried employees. Sound interesting, right?

In this article, we will Build a Mini Buymeacoffee dAPP Using Solidity, Ethereum Smart Contract, ReactJs, and tailwind CSS. It'll be a platform where anyone on the internet can learn a little about us and send us money to purchase coffee + a note, with the information being kept on the blockchain via an Ethereum smart contract. (A smart contract is essentially code that stays on the blockchain and can be read and written from; we'll go over this in more detail later.)

We'll create the smart contract and deploy it. We will also build a website that will allow people to connect their wallets and engage with our smart contract.

Here is a link to the Live Demo and the GitHub Repositories 👉 Frontend and Backend/Smart Crontract

Prerequisite
Let us ensure we have Node/NPM installed on our PC. If you don't have it, head over here to for a guide
Project Setup and Installation
Next, let's head over to the terminal. We'll need to cd into the directory we wish to work with and then run the following

commands:

mkdir blogDapp
cd blogDapp
yarn create next-app ./
// now wait for initiallizing next app

mkdir backend
cd backend
npx hardhat
// then create a sample javascript project
npm install --save-dev hardhat
npm i @nomicfoundation/hardhat-toolbox hardhat dotenv

Smart Contract Part

Now heading towards the solidity smart contract ....create a new contract inside the contracts folder named Post.sol

// SPDX-License-Identifier: MIT

pragma solidity >=0.4.22 <0.9.0;

contract Blog{


    struct Post{
        uint256 id;
        address author;
        string title;
        string content;
        uint likeCount;
        string tag;
        uint256 timestamp;        
    }


    struct Comment{
        uint256 id;
        address commentor;
        string main;
        uint256 time;
    }



    Post[] public posts;
    Comment[] public comments;



    mapping(uint256 => Comment) public getComment;


    mapping(address => mapping(uint => bool)) public didLiked;





    function createPost(string memory title,string memory content,string memory tag) external {

        uint _id = posts.length;

        Post memory newPost = Post(_id,msg.sender,title,content,0,tag,block.timestamp);

        posts.push(newPost);

        emit CreatePost(msg.sender,_id);

    }

    event CreatePost(address creator,uint PostId);



    function getPosts() public view returns(Post[] memory){
        return posts;
    }



    function LikePost(uint256 _id) external{
        require(didLiked[msg.sender][posts[_id].id] == false,"You have already Liked the Post");

        posts[_id].likeCount++;

        uint256 temp = posts[_id].id;

        didLiked[msg.sender][temp] = true;     
    }


    function getPost(uint256 _id) public view returns(Post memory){
        return posts[_id];
    }


    function getDidLiked(uint256 _id) public view returns (bool){
        return didLiked[msg.sender][posts[_id].id];
    }

    function writeComment(uint256 _id,string memory content) external{

        comments.push(Comment(_id,msg.sender,content,block.timestamp));
        getComment[_id] = Comment(_id,msg.sender,content,block.timestamp);

    }


    //    mapping(uint256 => Comment) public getComment;


    function getPostComments(uint256 _id) public view returns(Comment[] memory) {

        Comment[] memory temp = new Comment[](comments.length);
        uint256 count = 0;

        for (uint256 i = 0; i < comments.length;i++){
            if(comments[i].id == _id){

                temp[i] = comments[i];
                count++;
            }else{
                continue;
            }
        }

        Comment[] memory result = new Comment[](count);

        for (uint256 i = 0; i < count;i++){

            result[i] = temp[i];

        }
        return result;   

    }


}

Deploying Smart Contract

To build and deploy our smart contract, navigate to the scripts folder, create a new file called run.js, and update it with the following code snippet:

async function main() {
  const [deployer] = await ethers.getSigners();

  console.log("Deploying contracts with the account:", deployer.address);

  console.log("Account balance:", (await deployer.getBalance()).toString());

  const post = await ethers.getContractFactory("Blog");
  const Post = await post.deploy();

  console.log("Post address:", Post.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Next create a new file named .env in backend folder and create two variables ALCHEMY_API_KEY and PRIVATE_KEY.

Get the ALCHEMY API KEY from Alchemy dashboard after creating new project and get the private key of an account from metamask having some amount of goerli Eth.

Adding the below code to hardhat.config.js

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config({ path: "./.env" });

module.exports = {
  solidity: "0.8.17",
  networks: {
    goerli: {
      url: `https://eth-goerli.alchemyapi.io/v2/${process.env.ALCHEMY_API_KEY}`,
      accounts: [process.env.PRIVATE_KEY],
    },
  },
};

Now Deploying the smart contract...

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

Great till this point You have successfully created and deployed smart contract...

Further you can follow up from Part-2