Blog Dapp(DEV.to Clone) using Nextjs + Tailwindcss + Ether.js + Hardhat + Solidity(Smart Contract) Part-2
Tags: web3, nextjs, tailwindcss, dapp
Published: 2022-12-19 19:14:29

Now as continuing from part 2 ....

**[Live Demo Link Of Dapp](https://devblog-harshbardhan20.vercel.app/)**

**[Github Repo Link](https://github.com/harsh-blockchain/Blog-Dapp-DEV.to-)**


First we will create the context so that we can interact our ui with blockchain and installing the required packages.

```
cd blogDapp
mkdir context
yarn add ethers react-nice-avatar timeago-react react-icons

```

Now create a new file named config.js in root folder...And add the contract address which was deployed and the contract ABI from the artifacts folder in backend folder..

```
export const contractAddress = "Add your Address";
export const contractABI = ["Add_The_Abi"]
```

Next create a file insite context folder named context.js

```
import { createContext, useEffect, useState } from "react";
import { ethers } from "ethers";
import { contractABI, contractAddress } from "../config";
import { useRouter } from "next/router";

export const appContext = createContext();

export const AppProvider = ({ children }) => {
  const [account, setAccount] = useState("");
  const [loading, setLoading] = useState(false);
  const [balance, setBalance] = useState(0);
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [tag, setTag] = useState("");
  const [currentPost, setCurrentPost] = useState([]);
  const [commentContent, setCommentContent] = useState("");
  const [comments, setComments] = useState([]);

  const checkIfWalletIsConnected = async () => {
    try {
      if (!ethereum) {
        console.log("Make sure you have metamask!");
        return;
      }
      const accounts = await ethereum.request({ method: "eth_accounts" });
      if (accounts.length !== 0) {
        const account = accounts[0];
        setAccount(account);
      } else {
        console.log("No authorized account found");
        setAccount(null);
      }

      const provider = new ethers.providers.Web3Provider(ethereum);

      const amount = await provider.getBalance(account);
      setBalance(ethers.utils.formatEther(amount));

      ethereum.on("accountsChanged", (accounts) => {
        if (accounts.length !== 0) {
          const account = accounts[0];
          setAccount(account);
        } else {
          console.log("No authorized account found");
          setAccount(null);
        }
      });
    } catch (error) {}
  };

  const connectWallet = async () => {
    try {
      if (!ethereum) {
        alert("Get MetaMask!");
        return;
      }
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });
      console.log("Connected", accounts[0]);
      setAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  const createPosts = async () => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

      const transaction = await contract.createPost(title, content, tag);
      setLoading(true);
      await transaction.wait();
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

  const getPosts = async () => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );
      const get = await contract.getPosts();
      setPosts(get);
    } catch (error) {
      console.log(error);
    }
  };

  const router = useRouter();
  const likePost = async (id) => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );
      const transaction = await contract.LikePost(id);
      setLoading(true);
      await transaction.wait();
      setLoading(false);
      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

  const showPost = async (id) => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );
      const get = await contract.getPost(id);
      setCurrentPost(get);
    } catch (error) {}
  };

  const writeComments = async (id) => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

      const tnx = await contract.writeComment(id, commentContent);
      setLoading(true);
      await tnx.wait();
      setLoading(false);
    } catch (error) {
      console.log(error);
    }
  };

  const readComments = async (id) => {
    try {
      const provider = new ethers.providers.Web3Provider(ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(
        contractAddress,
        contractABI,
        signer
      );

      const read = await contract.getPostComments(id);
      setComments(read);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    checkIfWalletIsConnected();
    getPosts();
  });

  return (
    <appContext.Provider
      value={{
        connectWallet,
        account,
        balance,
        createPosts,
        setContent,
        setTitle,
        setTag,
        posts,
        likePost,
        showPost,
        currentPost,
        loading,

        readComments,
        writeComments,
        setCommentContent,
        comments,
      }}
    >
      {children}
    </appContext.Provider>
  );
};


```

Create the folder components in the root folder and then follow along:


## Now adding the below codes to the required files

**components/Navbar.js**

```
import React, { useContext } from "react";
import { appContext } from "../context/context";
import { FaEthereum } from "react-icons/fa";
import { BiSearchAlt2 } from "react-icons/bi";
import { FaConnectdevelop } from "react-icons/fa";
import { useRouter } from "next/router";

const Navbar = () => {
  const router = useRouter();
  const { connectWallet, account, balance } = useContext(appContext);
  return (
    <header className={styles.wrapper}>
      <div className={styles.container}>
        <div className={styles.left}>
          <div className={styles.logo} onClick={() => router.push("/")}>
            DEV
          </div>
          <div className={styles.mid}>
            <input
              type="text"
              placeholder="Search"
              className={styles.input}
              autoComplete="off"
              autoCorrect="off"
              spellCheck="false"
            />
            <BiSearchAlt2 className="hidden md:inline-flex h-6 w-6" />
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.rightInner}>{balance} ETH</div>
          <div>
            {account ? (
              <div className={styles.rightInner}>
                <div>
                  <FaEthereum />
                </div>
                <div>
                  {account.slice(0, 8)}...{account.slice(-8, account.length)}
                </div>
              </div>
            ) : (
              <div className={styles.rightInner} onClick={connectWallet}>
                <FaConnectdevelop />
                <div>Connect Wallet</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};

export default Navbar;

const styles = {
  wrapper: `bg-white shadow-md h-16 items-center py-2 sticky top-0 z-50`,
  container: `flex items-center justify-between max-w-7xl mx-auto`,
  left: `ml-3 flex space-x-3`,
  rightInner: `bg-gray-100 p-2 rounded-md flex space-x-3 items-center cursor-pointer font-semibold`,
  right: `flex items-center space-x-3 mr-3 hidden md:inline-flex`,
  logo: `p-2 bg-black text-white font-bold text-lg rounded-md cursor-pointer`,
  input: `bg-transparent ml-2 p-2 rounded-md `,
  mid: `flex items-center space-x-3 bg-gray-100 px-2 rounded-md hidden md:inline-flex`,
};

```


**components/Sidebar.js**


```
import React from "react";
import { RiHomeHeartFill } from "react-icons/ri";
import { BiSearchAlt2 } from "react-icons/bi";
import { IoIosNotificationsOutline } from "react-icons/io";
import { BiMessageSquareDetail } from "react-icons/bi";
import { BsBookmarkStar } from "react-icons/bs";
import { IoListSharp } from "react-icons/io5";
import { BsPerson } from "react-icons/bs";
import { CgMoreO } from "react-icons/cg";
import { BsGithub } from "react-icons/bs";
import { BsTwitter } from "react-icons/bs";
import { BsLinkedin } from "react-icons/bs";

const Sidebar = () => {
  return (
    <div className={styles.wrapper}>
      <div className={styles.container}>
        <div className={`${styles.icon} text-green-500 font-extrabold`}>
          <RiHomeHeartFill />
          <div className={styles.name}>Home</div>
        </div>

        <div className={styles.icon}>
          <BiSearchAlt2 />
          <div className={styles.name}>Explore</div>
        </div>

        <div className={styles.icon}>
          <IoIosNotificationsOutline />
          <div className={styles.name}>Notifications</div>
        </div>

        <div className={styles.icon}>
          <BiMessageSquareDetail />
          <div className={styles.name}>Messages</div>
        </div>

        <div className={styles.icon}>
          <BsBookmarkStar />
          <div className={styles.name}>Bookmarks</div>
        </div>

        <div className={styles.icon}>
          <IoListSharp />
          <div className={styles.name}>Lists</div>
        </div>

        <div className={styles.icon}>
          <BsPerson />
          <div className={styles.name}>Profile</div>
        </div>

        <div className={styles.icon}>
          <CgMoreO />
          <div className={styles.name}>More</div>
        </div>
      </div>
      <div className={styles.lower}>
        <div className={styles.icon}>
          <BsGithub />
        </div>
        <div className={styles.icon}>
          <BsTwitter />
        </div>
        <div className={styles.icon}>
          <BsLinkedin />
        </div>
      </div>
    </div>
  );
};

export default Sidebar;

const styles = {
  wrapper: `mt-5`,
  container: `flex flex-col gap-7 `,
  icon: `text-2xl text-gray-700 h-6 space-x-2 flex items-center font-semibold hover:scale-110 hover:text-green-500 transition-all duration-300 cursor-pointer ease-in-out`,
  name: `text-xl font-bold text-gray-700 hidden md:inline-flex`,
  lower: `flex flex-row gap-7 mt-[330px] items-center hidden md:inline-flex`,
};

```

**components/Survey.js**


```
import React from "react";
import Image from "next/image";
import survey from "../public/survey.png";

const Survey = () => {
  const Listing = [
    {
      name: "Listings",
      seeAll: true,
      data: [
        {
          title: "Sidekick Live Debugger is now Open Source",
          description: "Product",
        },
        {
          title: "Shakti Packers and Movers Chandigarh",
          description: "Collab",
        },
        {
          title: "Free Laravel & Tailwind CSS Dashboard Template",
          description: "Forsale",
        },
        {
          title:
            "The Tailwind Site Creator, Design Tool, & Component Library 🎨",
          description: "events",
        },
        {
          title:
            "Front-end Foxes Day 2022 - Free Virtual Conference - September 13",
          description: "Product",
        },
      ],
    },
    {
      name: "#discuss",
      seeAll: false,
      data: [
        {
          title: "Sidekick Live Debugger is now Open Source",
          description: "Product",
        },
        {
          title: "Shakti Packers and Movers Chandigarh",
          description: "Collab",
        },
        {
          title: "Free Laravel & Tailwind CSS Dashboard Template",
          description: "Forsale",
        },
        {
          title:
            "The Tailwind Site Creator, Design Tool, & Component Library 🎨",
          description: "events",
        },
        {
          title:
            "Front-end Foxes Day 2022 - Free Virtual Conference - September 13",
          description: "Product",
        },
      ],
    },
    {
      name: "#Product",
      seeAll: false,
      data: [
        {
          title: "Sidekick Live Debugger is now Open Source",
          description: "Product",
        },
        {
          title: "Shakti Packers and Movers Chandigarh",
          description: "Collab",
        },
        {
          title: "Free Laravel & Tailwind CSS Dashboard Template",
          description: "Forsale",
        },
        {
          title:
            "The Tailwind Site Creator, Design Tool, & Component Library 🎨",
          description: "events",
        },
        {
          title:
            "Front-end Foxes Day 2022 - Free Virtual Conference - September 13",
          description: "Product",
        },
      ],
    },
  ];

  return (
    <div className={styles.wrapper}>
      <div className={styles.parts}>
        <Image src={survey} alt="image" height={600} width={800} />
        <div>
          <div className="text-xl font-bold">
            Tell us your thoughts about DEV!
          </div>
          <p className="text-blue-500 font-semibold text-lg mt-2">
            Take the DEV Satisfaction Survey
          </p>
        </div>
      </div>
      <div>
        <div className="flex flex-col gap-5">
          {Listing.map((item, index) => {
            return (
              <div className={styles.parts} key={index}>
                <div className="flex justify-between w-full items-center ">
                  <div className="font-bold text-xl">{item.name}</div>
                  {item.seeAll && (
                    <div className="text-xl font-bold text-blue-500">
                      See All
                    </div>
                  )}
                </div>
                <section className="">
                  {item?.data?.map((data, index) => {
                    return (
                      <div
                        className="border-t-2 flex flex-col space-y-3 py-2"
                        key={index}
                      >
                        <div className="text-lg font-bold">{data.title}</div>
                        <div className="text-sm text-gray-500 pb-2">
                          {data.description}
                        </div>
                      </div>
                    );
                  })}
                </section>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Survey;

const styles = {
  wrapper: `hidden lg:inline-flex flex flex-col my-3 max-w-[360px] gap-4 overflow-y-scroll h-[870px] `,
  parts: `border border-gray-300 rounded-md py-6 px-4 bg-white flex flex-col space-y-4`,
};

```

**components/Create.js**

```
import { useRouter } from "next/router";
import React, { useContext } from "react";
import { appContext } from "../context/context";

const create = () => {
  const router = useRouter();
  const { createPosts, setContent, setTitle, setTag, loading } =
    useContext(appContext);

  return (
    <div className="w-full mx-36 flex flex-col gap-8">
      <div className="flex items-center justify-between w-full">
        <div
          className="font-bold text-xl ml-10 border-b-2 border-blue-500"
          onClick={() => router.push("/")}
        >
          All Posts
        </div>
        <button
          onClick={() => router.push("/createPost")}
          className="text-xl font-semibold px-4 py-2 rounded-xl bg-white cursor-default hover:text-orange-500 hover:scale-95 ease-in-out duration-300 transition-all hidden lg:inline-flex"
        >
          Create Post
        </button>
      </div>
      <div>
        <div className="text-2xl font-bold text-blue-500 py-3">Title</div>
        <input
          className="rounded-md px-5 py-2 text-xl"
          placeholder="Title"
          onChange={(e) => setTitle(e.target.value)}
        />
        <div className="text-2xl font-bold text-blue-500 py-3">Tag</div>
        <input
          className="rounded-md px-5 py-2 text-xl"
          placeholder="Tags"
          onChange={(e) => setTag(e.target.value)}
        />
        <div className="text-2xl font-bold text-blue-500 py-3">Content</div>
        <textarea
          className="w-full h-full rounded-md px-5 py-2 text-xl"
          placeholder="Start Typing...."
          onChange={(e) => setContent(e.target.value)}
        />
      </div>

      {loading ? (
        <div className="mt-[250px] w-1/4 text-xl font-bold px-4 py-2 rounded-xl bg-white cursor-default hover:text-orange-500 hover:scale-95 ease-in-out duration-300 transition-all">
          Loading...
        </div>
      ) : (
        <button
          onClick={createPosts}
          className="mt-[250px] w-1/4 text-xl font-bold px-4 py-2 rounded-xl bg-white cursor-default hover:text-orange-500 hover:scale-95 ease-in-out duration-300 transition-all"
        >
          Post
        </button>
      )}
    </div>
  );
};

export default create;

```


**components/Posts.js**


```
import { useRouter } from "next/router";
import React, { useContext } from "react";
import { appContext } from "../context/context";
import Avatar, { genConfig } from "react-nice-avatar";
import TimeAgo from "timeago-react";

const Posts = () => {
  const router = useRouter();
  const { posts, likePost } = useContext(appContext);
  const config = genConfig("hi@dapi.to");

  const formatDate = (timestamp) => {
    let date = new Date(timestamp * 1000);
    let month = date.getMonth() + 1;
    let dt = date.getDate();
    let year = date.getFullYear();
    let seconds = "0" + date.getSeconds();
    let hours = date.getHours();
    let minutes = "0" + date.getMinutes();

    return (
      year +
      "-" +
      month +
      "-" +
      dt +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  };

  return (
    <div className="w-full md:ml-16 ml-5 mr-2 mb-8 md:mr-4 overflow-y-scroll max-h-[780px] md:max-h-[870px] ">
      <div className="flex items-center justify-between w-full">
        <div
          className="font-bold text-xl ml-10 border-b-2 cursor-pointer border-blue-500 hidden md:inline-flex"
          onClick={() => router.push("/")}
        >
          All Posts
        </div>
        <button
          onClick={() => router.push("/createPost")}
          className="text-xl mr-5 font-semibold px-4 py-2 cursor-pointer rounded-xl bg-white hover:text-orange-500 hover:scale-95 ease-in-out duration-300 transition-all"
        >
          Create Post
        </button>
      </div>
      <div className="my-5 space-y-4">
        {posts.map((post) => (
          <div
            key={post.id}
            className="flex flex-col gap-5 bg-white rounded-md px-4 py-5 cursor-pointer"
            onClick={() =>
              router.push({
                pathname: "/showPost",
                query: { id: `${post.id}` },
              })
            }
          >
            <div className="flex space-x-4 items-center text-lg font-normal md:flex-row flex-col">
              <Avatar
                className="w-16 h-16 border-2 border-emerald-500"
                {...config}
              />
              <div className="flex items-center justify-between w-full">
                <div className="flex space-x-5 mt-5">
                  <div className="font-medium">
                    {post.author.slice(0, 8)}....
                    {post.author.slice(-8, post.author.length)}
                  </div>
                  <div className="text-blue-500 font-semibold hidden md:inline-flex">
                    {/* {formatDate(post.timestamp.toNumber())} */}
                    <TimeAgo
                      datetime={formatDate(post.timestamp.toNumber())}
                      locale="vi"
                    />
                  </div>
                </div>

                <button
                  className="cursor-pointer items-center mt-5 "
                  onClick={() => likePost(post.id)}
                >
                  <div>&#10084; {post.likeCount.toNumber()}</div>
                </button>
              </div>
            </div>
            <div className="text-md font-semibold ml-5 ">#{post.tag}</div>

            <div className="mx-4 font-bold text-3xl">{post.title}</div>

            <div className="mx-4 font-lg text-lg">
              {post.content.length > 18 ? (
                <div>{post.content.slice(0, 18)}......</div>
              ) : (
                <div>{post.content}</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Posts;

```


## Now creating the below files in pages folder:


**pages/index.js**


```
import React, { useContext } from "react";
import { appContext } from "../context/context";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import Posts from "../components/Posts";
import Survey from "../components/Survey";

const index = () => {
  const {} = useContext(appContext);
  return (
    <div className={styles.wrapper}>
      <Navbar />
      <div className={styles.container}>
        <div className={styles.main}>
          <Sidebar />
          <Posts />
          <Survey />
        </div>
      </div>
    </div>
  );
};

export default index;

const styles = {
  wrapper: `w-full h-screen bg-gray-100 overflow-hidden`,
  container: `max-w-7xl mx-auto`,
  main: `flex justify-between mx-3 my-2`,
};

```


**pages/createPost.js**


```
import React, { useContext } from "react";
import { appContext } from "../context/context";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import Create from "../components/Create";

const createPost = () => {
  const {} = useContext(appContext);
  return (
    <div className={styles.wrapper}>
      <Navbar />
      <div className={styles.container}>
        <div className={styles.main}>
          <Sidebar />
          <Create />
        </div>
      </div>
    </div>
  );
};

export default createPost;

const styles = {
  wrapper: `w-full h-screen bg-gray-100 overflow-hidden `,
  container: `max-w-7xl mx-auto`,
  main: `flex justify-between mx-3 my-2`,
};

```


**pages/showPost.js**


```
import { useRouter } from "next/router";
import React, { useContext, useState, useEffect } from "react";
import { appContext } from "../context/context";
import Navbar from "../components/Navbar";
import Sidebar from "../components/Sidebar";
import Avatar, { genConfig } from "react-nice-avatar";
import TimeAgo from "timeago-react";

const showPost = () => {
  const router = useRouter();
  const {
    posts,
    likePost,
    showPost,
    currentPost,
    readComments,
    writeComments,
    setCommentContent,
    comments,
  } = useContext(appContext);
  const { id } = router.query;
  const config = genConfig("hi@dapi.to");

  const gettingPost = async (id) => {
    showPost(id);
  };

  const gettingComments = async (id) => {
    readComments(id);
  };

  const formatDate = (timestamp) => {
    let date = new Date(timestamp * 1000);
    let month = date.getMonth() + 1;
    let dt = date.getDate();
    let year = date.getFullYear();
    let seconds = "0" + date.getSeconds();
    let hours = date.getHours();
    let minutes = "0" + date.getMinutes();

    return (
      year +
      "-" +
      month +
      "-" +
      dt +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  };

  useEffect(() => {
    gettingPost(id);
    gettingComments(id);
  });
  return (
    <div className={styles.wrapper}>
      <Navbar />
      <div className={styles.container}>
        <div className={styles.main}>
          <Sidebar />
          <div className=" w-9/12 mx-2 pb-40 md:mx-5 my-8 space-y-5 overflow-y-scroll max-h-[840px]">
            <div className="flex gap-3 items-center flex-col md:flex-row md:gap-8">
              <Avatar
                className="w-16 h-16 border-2 border-emerald-500"
                {...config}
              />
              <div className="font-semibold text-md">
                Author:{" "}
                {/* {currentPost.author.slice(0, 8)}....
                {currentPost.author.slice(-8, currentPost.author.length)} */}
                {currentPost.author}
              </div>
              <div className="font-semibold text-md text-emerald-500">
                {/* {formatDate(currentPost.timestamp)} */}
                <TimeAgo
                  datetime={formatDate(currentPost.timestamp)}
                  locale="vi"
                />
              </div>
            </div>
            <div className="text-lg text-orange-800 ml-4">
              #{currentPost.tag}
            </div>
            <div className="text-3xl font-extrabold my-5">
              {currentPost.title}
            </div>

            <div className="text-md">{currentPost.content}</div>

            <div>
              {/* comments */}

              <div className="mt-10 border-t-2 pt-10 mr-3 ">
                <div className="flex space-x-4 items-center flex-col md:flex-row gap-8 md:gap-5">
                  <div className="text-lg font-semibold">Write Comments :</div>
                  <div className="flex space-x-5">
                    <input
                      className="rounded-md px-5 py-2 text-xl w-1/2 md:w-full"
                      placeholder="Add Comment...."
                      onChange={(e) => setCommentContent(e.target.value)}
                    />
                    <button
                      className="text-xl font-bold px-4 py-2 rounded-xl bg-white cursor-default hover:text-orange-500 hover:scale-95 ease-in-out duration-300 transition-all"
                      onClick={() => writeComments(currentPost.id)}
                    >
                      Submit
                    </button>
                  </div>
                </div>
                <div className="mt-8">
                  {comments.map((comment, index) => (
                    <div className="border-b-2 py-8" key={index}>
                      <div>
                        <div className="flex items-center space-x-5 flex-col md:flex-row space-y-3 ">
                          <Avatar
                            className="w-8 h-8 border-2 border-emerald-500"
                            {...config}
                          />
                          <div className="items-center flex font-semibold pb-3">
                            {comment.commentor.slice(0, 8)}...
                            {comment.commentor.slice(
                              -8,
                              comment.commentor.length
                            )}
                          </div>
                          <div className="pb-3 hidden md:inline-flex text-green-500 font-medium">
                            <TimeAgo
                              datetime={formatDate(comment.time)}
                              locale="vi"
                            />
                          </div>
                        </div>
                        <div className="text-md mx-4 my-4">{comment.main}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* end comments */}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default showPost;

const styles = {
  wrapper: `w-full h-screen bg-gray-100 overflow-hidden `,
  container: `max-w-7xl mx-auto `,
  main: `flex justify-between mx-3 my-2`,
};

```


**Now Finally run your app**

```
yarn run dev
```



**Thank you for following up throughout the tutorial...Hope you like the explanation....**