DEV Community: Nick L.

Building a Blockchain-Based Blog dApp with Hardhat: A Step-by-Step Guide

Nick L. — Thu, 15 Aug 2024 07:31:16 +0000

Blockchain technology is revolutionizing many industries, and blogging is no exception. Imagine a decentralized blogging platform where content creators can post articles, receive votes, and even earn tips directly from their readers, all powered by blockchain. This is the power of decentralized applications (dApps).

In this guide, we’ll walk through the process of developing a decentralized blog application using Hardhat, a popular Ethereum development environment. By the end of this tutorial, you’ll have a basic dApp where bloggers can post content, users can vote on their favorite posts, and readers can tip bloggers directly in cryptocurrency.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

Node.js (v12.x or later)
npm (Node Package Manager)
Metamask extension installed in your web browser
Basic knowledge of JavaScript, Solidity, and Ethereum concepts

Step 1: Setting Up the Hardhat Project

First, create a new directory for your project and navigate into it:

mkdir blockchain-blog
cd blockchain-blog

Initialize a new Node.js project:

npm init -y

Install Hardhat:

npm install --save-dev hardhat

Set up a new Hardhat project:

npx hardhat

Select “Create a basic sample project” when prompted. This will generate a basic Hardhat project structure with some sample files.

Step 2: Writing the Smart Contract

Our decentralized blog dApp will have a smart contract that handles the core functionalities: posting articles, voting on posts, and tipping bloggers.

Create a new contract file called Blog.sol in the contracts directory:

touch contracts/Blog.sol

Open Blog.sol and add the following Solidity code:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Blog {
    struct Post {
        uint256 id;
        string content;
        address payable author;
        uint256 votes;
        uint256 tips;
    }

    uint256 public postCount = 0;
    mapping(uint256 => Post) public posts;

    event PostCreated(uint256 id, string content, address payable author);
    event PostVoted(uint256 id, uint256 votes);
    event PostTipped(uint256 id, uint256 tips);

    function createPost(string memory _content) public {
        postCount++;
        posts[postCount] = Post(postCount, _content, payable(msg.sender), 0, 0);
        emit PostCreated(postCount, _content, payable(msg.sender));
    }

    function votePost(uint256 _id) public {
        require(_id > 0 && _id <= postCount, "Invalid post ID");
        Post storage post = posts[_id];
        post.votes++;
        emit PostVoted(_id, post.votes);
    }

    function tipPost(uint256 _id) public payable {
        require(_id > 0 && _id <= postCount, "Invalid post ID");
        Post storage post = posts[_id];
        post.tips += msg.value;
        post.author.transfer(msg.value);
        emit PostTipped(_id, post.tips);
    }
}

Breakdown of the Smart Contract

Post Structure: We define a Post structure containing fields like id, content, author, votes, and tips.
Create Post: The createPost function allows bloggers to create new posts.
Vote Post: The votePost function lets users vote for their favorite posts.
Tip Post: The tipPost function allows readers to send ETH directly to the post's author.

Step 3: Compiling the Smart Contract

To compile your smart contract, run the following command:

npx hardhat compile

This command will compile your smart contract and generate the necessary artifacts in the artifacts directory.

Step 4: Writing the Deployment Script

We need to deploy our smart contract to a blockchain network. Create a new deployment script in the scripts directory called deploy.js:

touch scripts/deploy.js

Open deploy.js and add the following deployment script:

const hre = require("hardhat");

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

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

  const Blog = await hre.ethers.getContractFactory("Blog");
  const blog = await Blog.deploy();

  await blog.deployed();

  console.log("Blog contract deployed to:", blog.address);
}

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

This script deploys the Blog contract and logs the contract's address after successful deployment.

Step 5: Deploying the Contract Locally

To deploy the contract on a local Ethereum network, first, start the Hardhat node:

npx hardhat node

In a separate terminal, run the deployment script:

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

This deploys the Blog contract on your local blockchain. You’ll see the deployment address in the terminal output.

Step 6: Building the Front-End

Now that we have our smart contract deployed, we’ll build a simple front-end to interact with it.

Step 6.1: Setting Up React

Set up a React app using Create React App:

npx create-react-app blog-frontend
cd blog-frontend
npm install ethers

Step 6.2: Connecting to the Smart Contract

Create a new file called App.js in the src directory and add the following code:

import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
import BlogABI from "./BlogABI.json";

const contractAddress = "your_contract_address_here";

function App() {
  const [posts, setPosts] = useState([]);
  const [content, setContent] = useState("");

  useEffect(() => {
    const loadPosts = async () => {
      if (window.ethereum) {
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        await provider.send("eth_requestAccounts", []);
        const signer = provider.getSigner();
        const blogContract = new ethers.Contract(contractAddress, BlogABI, signer);

        const postCount = await blogContract.postCount();
        let postsArray = [];
        for (let i = 1; i <= postCount; i++) {
          const post = await blogContract.posts(i);
          postsArray.push(post);
        }
        setPosts(postsArray);
      }
    };

    loadPosts();
  }, []);

  const createPost = async () => {
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const blogContract = new ethers.Contract(contractAddress, BlogABI, signer);

      const transaction = await blogContract.createPost(content);
      await transaction.wait();
      setContent("");
      window.location.reload();
    }
  };

  const votePost = async (id) => {
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const blogContract = new ethers.Contract(contractAddress, BlogABI, signer);

      const transaction = await blogContract.votePost(id);
      await transaction.wait();
      window.location.reload();
    }
  };

  const tipPost = async (id) => {
    if (window.ethereum) {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const blogContract = new ethers.Contract(contractAddress, BlogABI, signer);

      const transaction = await blogContract.tipPost(id, { value: ethers.utils.parseEther("0.1") });
      await transaction.wait();
      window.location.reload();
    }
  };

  return (
    <div>
      <h1>Blockchain Blog</h1>
      <input
        type="text"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Write your post"
      />
      <button onClick={createPost}>Post</button>
      <div>
        {posts.map((post, index) => (
          <div key={index}>
            <p>{post.content}</p>
            <p>Author: {post.author}</p>
            <p>Votes: {post.votes}</p>
            <p>Tips: {ethers.utils.formatEther(post.tips)} ETH</p>
            <button onClick={() => votePost(post.id)}>Vote</button>
            <button onClick={() => tipPost(post.id)}>Tip</button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

Step 6.3: Understanding the Front-End

Fetching Posts: The loadPosts function fetches all posts from the blockchain and stores them in the state.
Creating a Post: The createPost function sends a transaction to create a new post on the blockchain.
Voting for a Post: The votePost function allows users to vote for a specific post.
Tipping a Post: The tipPost function allows users to send ETH to the post’s author as a tip.

Step 6.4: Running the Front-End

Now

, let's run the front-end to interact with our deployed smart contract.

First, make sure you are in the blog-frontend directory and run:

npm start

This command will start the React development server and open the application in your default web browser. You should now see a simple interface where you can create blog posts, vote on them, and tip the authors.

Conclusion

Congratulations! You’ve built a decentralized blog application that leverages blockchain technology for posting content, voting, and tipping bloggers. This guide covered the entire process from setting up your environment with Hardhat, writing and deploying smart contracts, to building a front-end interface using React.

While this is a basic implementation, it lays the foundation for more advanced features like user authentication, content moderation, and decentralized storage for blog content. As you continue to explore blockchain development, consider experimenting with other Ethereum tools and expanding the functionality of your dApp.

Blockchain is a rapidly evolving field with endless possibilities. By mastering tools like Hardhat and integrating smart contracts with user-friendly interfaces, you’re well on your way to creating innovative and decentralized applications that could shape the future of the web. Happy coding!

A Comprehensive Guide to Converting Your React.js App to React Native

Nick L. — Thu, 15 Aug 2024 07:20:12 +0000

React.js is a powerful library for building user interfaces, especially for web applications. But as mobile usage continues to soar, you might be wondering how to leverage your existing React.js codebase to create a mobile app. Enter React Native—a framework that lets you build mobile apps using React, but with native components instead of web components.

In this guide, we'll walk you through the process of converting a React.js app to a React Native app. We'll cover key concepts, highlight common pitfalls, and provide actionable tips to make the transition smooth and effective.

Why Convert to React Native?

Before diving into the technical steps, let's discuss why you might want to convert your React.js app to React Native.

Code Reusability: React Native allows you to reuse much of your React.js code, speeding up development and reducing costs.
Native Performance: React Native apps run with native components, offering better performance and a smoother user experience compared to web-based mobile apps.
Cross-Platform Development: Write once, run on both iOS and Android, significantly broadening your app's reach without doubling the development effort.

Getting Started

1. Assess Your Existing React.js Codebase

Before jumping into React Native, take a step back and evaluate your current React.js codebase:

Component Structure: How are your components structured? Are they reusable, or tightly coupled with web-specific elements?
State Management: What state management solution are you using (e.g., Redux, Context API)? Ensure it's compatible with React Native.
APIs and Libraries: Identify any web-specific APIs or third-party libraries that might not have a direct counterpart in React Native.

2. Set Up Your React Native Environment

To start building with React Native, you’ll need to set up the development environment:

Install Node.js: React Native requires Node.js. Ensure you have the latest version installed.
Install React Native CLI: You can use either the React Native CLI or Expo CLI. The React Native CLI offers more flexibility, while Expo simplifies some aspects of development but may have limitations.

   npm install -g react-native-cli

Set Up Android and iOS Environments:
- For iOS development, you’ll need Xcode installed on a Mac.
- For Android development, install Android Studio and configure the necessary SDKs.
Create a New React Native Project:

   react-native init YourProjectName

Alternatively, with Expo:

   npx expo-cli init YourProjectName

3. Start with Core Components

React Native has a set of core components that serve as the building blocks for your mobile app. They differ from HTML elements, so you'll need to replace web-specific elements with their React Native equivalents:

<div>, <span> → <View>
<h1>, <p>, <label> → <Text>
<img> → <Image>
<button> → <TouchableOpacity>, <Button>

For example, convert this React.js component:

function MyComponent() {
  return (
    <div>
      <h1>Hello World</h1>
      <img src="logo.png" alt="Logo" />
      <button>Click Me</button>
    </div>
  );
}

To this in React Native:

import { View, Text, Image, Button } from 'react-native';

function MyComponent() {
  return (
    <View>
      <Text>Hello World</Text>
      <Image source={require('./assets/logo.png')} />
      <Button title="Click Me" onPress={() => alert('Button pressed')} />
    </View>
  );
}

4. Handle Platform-Specific Code

React Native allows you to write platform-specific code for iOS and Android. While you can share most of the codebase, there will be times when you need to handle platform-specific cases:

Conditional Rendering:

   import { Platform, Text } from 'react-native';

   function MyComponent() {
     return (
       <Text>
         {Platform.OS === 'ios' ? 'Hello iOS User!' : 'Hello Android User!'}
       </Text>
     );
   }

Platform-Specific Files: You can create files with .ios.js and .android.js extensions to handle platform-specific logic separately.

5. Adapt Styles and Layouts

React Native uses a styling system similar to CSS but with some differences. Here are key points to consider:

Flexbox: React Native uses Flexbox for layout, but properties are camel-cased (e.g., justifyContent, alignItems).
No Global Styles: Unlike CSS, React Native doesn’t support global styles. Styles are scoped to components.
Unitless Values: React Native typically uses unitless values for most styling properties (e.g., width: 100 instead of width: '100px').

Example style conversion:

// React.js CSS
const styles = {
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
  },
  text: {
    fontSize: '24px',
    color: 'blue',
  },
};

// React Native
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    color: 'blue',
  },
});

6. Replace Web-Specific APIs and Libraries

React.js often relies on web-specific APIs and libraries that may not be available in React Native. Here’s how to address some common scenarios:

Routing: Replace react-router with react-navigation for navigation in React Native.
HTTP Requests: fetch works in React Native, but you might want to use libraries like axios for a more consistent experience across platforms.
Local Storage: Replace localStorage with AsyncStorage or use libraries like redux-persist for state persistence.

7. Test Your App on Real Devices

Simulators are great for initial testing, but always test your app on real devices. Performance, touch responsiveness, and native features may behave differently on a physical device compared to a simulator.

8. Optimize Performance

React Native, while efficient, requires some performance optimization:

Avoid unnecessary re-renders: Use PureComponent or React.memo.
Optimize images: Use appropriate image sizes and formats. Consider using react-native-fast-image for better image handling.
Use native modules when needed: Sometimes, React Native’s JavaScript layer can’t match the performance of native modules. For heavy-lifting tasks, consider writing native modules in Swift/Objective-C (iOS) or Kotlin/Java (Android).

9. Debug and Refactor

Debugging React Native can be done using tools like React Developer Tools and the built-in React Native Debugger. Refactor your codebase to clean up any web-specific logic that’s no longer relevant and ensure your app is well-organized for mobile development.

10. Deploy Your App

Once your app is ready, the final step is deployment:

iOS: Deploy your app via Xcode to the App Store.
Android: Use Android Studio to build and sign your APK or AAB for the Google Play Store.

Conclusion

Converting a React.js app to a React Native app opens up new possibilities for your product by extending its reach to mobile users. While the transition involves some effort, the reuse of React knowledge and code significantly eases the process. By following this guide, you can successfully transform your web app into a mobile app that delivers a native experience on both iOS and Android platforms.

Remember, every app is unique, so adapt these steps to fit your specific project requirements. Happy coding!