ChainPosts

A wallet-connected Web3 mini social app for publishing short posts directly into smart contract storage.

Live UI · Run Locally ·

Overview

ChainPosts is a simple decentralized application that lets users connect a wallet, write a short message, and publish it on-chain. The project was built as a hands-on Web3 club project to practice the full dApp workflow: smart contract development, frontend integration, wallet interaction, testing, debugging, and deployment.

Features

• Wallet connect with MetaMask
• Short posts stored directly in contract storage
• 280-byte post limit enforced in Solidity
• Recent post feed pulled from the contract
• Dark and light mode UI
• Local Hardhat deployment flow
• Frontend hosted on Vercel
• User-friendly wallet and RPC error handling

Tech Stack

• Solidity
• Hardhat
• Ethers.js
• React
• Vite
• Lucide React
• MetaMask
• Vercel

Smart Contract

The contract in contracts/ChainPosts.sol exposes three core behaviors:

• createPost(string content) stores a new post on-chain
• getPost(uint256 id) returns a single post by id
• getRecentPosts(uint256 count) returns the newest posts first

It also uses:

• custom errors for cleaner validation
• PostCreated events for post creation tracking
• totalPosts as an on-chain counter

Run Locally

1. Install dependencies:

npm install

2. Start the local blockchain:

npm run node

3. In a new terminal, deploy the contract:

npm run deploy

4. Start the frontend:

npm run dev

5. Open the local app and connect MetaMask to:

• RPC URL: http://127.0.0.1:8545
• Chain ID: 31337
• Currency symbol: ETH

Scripts

npm run compile
npm run test
npm run build
npm run deploy
npm run dev

Project Structure

contracts/            Solidity smart contracts
scripts/              Hardhat deploy script
src/                  React frontend
src/contracts/        Generated frontend contract metadata
test/                 Contract tests
public/               Static assets including app branding

Live deployment note

The current Vercel deployment is available at chainposts-web3.vercel.app. When the hosted app detects that the bundled contract metadata points to local Hardhat, it lets the connected wallet deploy a fresh ChainPosts contract on the active wallet network instead of trying to use 127.0.0.1 from production.

For a shared public feed, deploy one contract to a public testnet and update:

• VITE_POSTS_CONTRACT_ADDRESS
• VITE_EXPECTED_CHAIN_ID
• VITE_RPC_URL

Troubleshooting MetaMask and RPC issues

If publishing fails, check the following:

• MetaMask is connected to chain 31337
• the RPC URL is http://127.0.0.1:8545
• the local Hardhat node is running
• the contract has been redeployed after restarting the chain
• the selected wallet has test ETH

The frontend also includes friendlier handling for common wallet errors such as:

• rejected wallet requests
• insufficient funds
• wrong network
• low-level RPC errors like could not coalesce error

Concepts Practiced

• writing and testing Solidity contracts
• contract storage and events
• wallet connection in frontend apps
• reading and writing with Ethers.js
• local blockchain development with Hardhat
• handling chain IDs, RPC endpoints, and deployment metadata
• shipping a Web3 frontend to production