In this tutorial, we’ll walk you through creating a simple smart contract using Solidity and deploying it on a blockchain via Remix IDE. By the end, you’ll also learn how to connect your contract to a frontend built with HTML, CSS, and JavaScript, enabling interaction through a web interface.
What You’ll Learn
- Basics of Solidity smart contract development.
- Deploying a contract using Remix IDE.
- Connecting a blockchain contract to a frontend with Web3.js.
- Interacting with your smart contract through a user-friendly interface.
Prerequisites
- A basic understanding of JavaScript.
- MetaMask browser extension installed.
- A small amount of test Ethereum (e.g., from Sepolia faucets).
Setting Up Your Smart Contract
Open Remix IDE in your browser: https://remix.ethereum.org.
Create a new file named SimpleStorage.sol and paste the following code:
// SPDX-License-Identifier: MIT
// This specifies the license type for the contract. The MIT license is permissive and commonly used in open-source projects.
pragma solidity ^0.8.24;
// Specifies the version of Solidity the contract is written in.
// This ensures compatibility with the Solidity compiler version 0.8.24 or above.
// Define the contract named "SimpleStorage"
contract SimpleStorage {
// Declare a state variable to store a number.
// `public` makes it readable by anyone outside the contract.
uint256 public storedNumber;
// Function to store a number in the `storedNumber` state variable.
// `_number` is the input parameter provided by the user.
function storeNumber(uint256 _number) public {
// Assign the provided number to the state variable `storedNumber`.
storedNumber = _number;
}
// Function to retrieve the value of the `storedNumber` variable.
// The `view` keyword indicates this function does not modify the contract's state.
// It returns a `uint256` value, which is the type of the stored number.
function getStoredNumber() public view returns (uint256) {
// Return the value of `storedNumber`.
return storedNumber;
}
}
Compile the contract using the Solidity compiler in Remix. Ensure you select Solidity version 0.8.24.
Deploying the Contract
Go to the Deploy & Run Transactions tab in Remix.
Select an environment such as Injected Web3 to deploy on a testnet.
Ensure your MetaMask wallet is connected to the same test network.
Deploy the contract by clicking the Deploy button.
Copy the deployed contract’s address and ABI for later use.
Creating the Frontend
Create three files in your project folder:
- index.html
- styles.css
- app.js
HTML (index.html)
MetaMask + Animation
The very first time you had a crypto. This year
Send Bitcoin to:
0x230138Bfb9547A0d06594a121a11b167Ab728CeF
Connect to MetaMask
....... code continue .... see more in repo link below
CSS (styles.css)
/* General styling for the page */
body {
background-image: url(https://www.pixelstalk.net/wp-content/uploads/2015/01/Winter-Night-In-Moonlight-HD-Wallpaper.jpg);
background-size: cover;
background-position: center center;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
position: relative;
}
/* Falling elements */
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
....... code continue .... see more in repo link below
JavaScript (app.js)
Replace YOUR_CONTRACT_ADDRESS and YOUR_CONTRACT_ABI with your contract details.
// Check if MetaMask is installed
if (typeof window.ethereum !== 'undefined') {
console.log('MetaMask is installed!');
const web3 = new Web3(window.ethereum);
// Smart Contract Details
const contractAddress = "YOUR_CONTRACT_ADDRESS";
const contractABI = YOUR_CONTRACT_ABI;
....... code continue .... see more in repo link below
Running the Project
Open index.html in your browser.
Connect your MetaMask wallet by clicking the Connect Wallet button.
Use the Store Number button to save a number on the blockchain.
Retrieve the number using the Retrieve Number button.
Features
- Connect Wallet: Securely connects a user’s MetaMask wallet to the DApp.
- Store Number: Allows users to input and save a number on the blockchain.
- Retrieve Number: Fetches and displays the stored number from the blockchain.
Technologies Used
- Remix IDE: For writing and deploying smart contracts.
- MetaMask: For wallet integration.
- Web3.js: To connect the frontend to the blockchain.
Source Code
The complete source code for this project is available on my GitHub:
GitHub Repository — Blockchain Integration Project
Simple Smart Contract Tutorial: Build a Blockchain Project Using Remix IDE was originally published in The Capital on Medium, where people are continuing the conversation by highlighting and responding to this story.