# Hello Blockchain DApp

A decentralized "Hello World" application built on the Ethereum blockchain using Solidity, React, and Web3.js.


## Features

- Display the current message stored on the blockchain
- Update the message on the blockchain
- Attractive and modern UI design

## Prerequisites

- Node.js (v14.x or later)
- npm (v6.x or later)
- Truffle (v5.x or later)
- Ganache (v6.x or later)
- MetaMask browser extension

## Installation

1. **Clone the repository:**
   ```bash
   git clone https://github.com/Priyanshrai//DApps_hello_world_smart_contract.git  

2. Install the dependencies:

   npm install

3. Navigate to the client directory and install its dependencies:

   cd client
   npm install

1. Start Ganache:

   ganache-cli

2. Compile and deploy the smart contract:

   cd ..
   truffle compile
   truffle migrate

3. Configure MetaMask:

   • Open MetaMask and create a new custom network.
   • Set the network name to "Ganache" (or any desired name).
   • Set the RPC URL to http:https://127.0.0.1:8545.
   • Set the Chain ID to 1337 (or the ID displayed in Ganache).
   • Import one of the Ganache accounts into MetaMask using its private key.

4. Update the HelloWorld.json file in the client/src/contracts directory:

   • Copy the contract ABI from the build/contracts/HelloWorld.json file.
   • Paste the ABI into the client/src/contracts/HelloWorld.json file.
   • Update the contract address in the client/src/contracts/HelloWorld.json file with the deployed contract address from Ganache.

1. Start the React development server:

   cd client
   npm start

2. Open your browser and navigate to http:https://localhost:3000 to access the Hello Blockchain DApp.

• Connect MetaMask to the Ganache network.
• View the current message stored on the blockchain.
• Enter a new message in the input field and click "Update Message" to change the message stored on the blockchain.
• The message will be updated in real-time and displayed on the UI.

• contracts/: Contains the Solidity smart contract.
• migrations/: Contains migration scripts for deploying the smart contract.
• client/src/components/: Contains the React components.
• client/src/contracts/: Contains the ABI and contract address for interacting with the smart contract.
• client/src/HelloWorld.css: Contains the CSS for styling the HelloWorld component.

The HelloWorld.sol smart contract is located in the contracts directory. It defines the following functions:

• constructor(string memory initialMessage): Initializes the contract with a given message.
• setMessage(string memory newMessage): Updates the message stored on the blockchain.
• getMessage(): Retrieves the current message stored on the blockchain.

The smart contract emits the following event:

• MessageChanged(string newMessage): Emitted when the message is updated.

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.

Feel free to customize the README file based on your specific project details, such as the repository URL, screenshot, and any additional sections or information you want to include.

### Summary of README Content:
1. **Introduction**: Brief description of the DApp.
2. **Features**: List of key features.
3. **Prerequisites**: Required tools and versions.
4. **Installation**: Steps to clone the repository and install dependencies.
5. **Setting Up the Development Environment**: Instructions to start Ganache, deploy the contract, and configure MetaMask.
6. **Running the Application**: Steps to start the React development server and access the DApp.
7. **Usage**: Instructions on how to use the DApp.
8. **Project Structure**: Overview of the project directory structure.
9. **Smart Contract**: Details of the smart contract and its functions.
10. **Contributing**: Information on how to contribute to the project.
11. **License**: License information.