Decentralized Chat App on IPFS
🧱 What You’ll Build
A chat app where users can:
Post and fetch chat messages
Store chat history on IPFS (InterPlanetary File System)
Optionally use Ethereum or wallet-based login
Run completely decentralized—no central server
🛠️ Tech Stack
Component Tool
Backend Storage IPFS (via ipfs-http-client)
Frontend React.js or Vanilla JavaScript
Identity (optional) MetaMask or Ethereum address
Hosting (optional) Fleek, IPFS, or IPNS
🧰 Step 1: Set Up the Project
1. Initialize the frontend (React):
npx create-react-app ipfs-chat-app
cd ipfs-chat-app
2. Install IPFS client:
npm install ipfs-http-client
🔗 Step 2: Connect to IPFS
Create a file like ipfs.js:
import { create } from 'ipfs-http-client';
const projectId = '<your_project_id>'; // From Infura or Web3.Storage
const projectSecret = '<your_project_secret>';
const auth = 'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');
const ipfs = create({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
export default ipfs;
💡 You can get free IPFS access through Infura
or Web3.Storage
.
💬 Step 3: Create Chat Functionality
Example: Add a message to IPFS
import ipfs from './ipfs';
async function sendMessage(message) {
const result = await ipfs.add(JSON.stringify({
message,
timestamp: new Date().toISOString(),
}));
return result.path; // This is the IPFS hash
}
Example: Read a message from IPFS
async function getMessage(ipfsHash) {
const stream = ipfs.cat(ipfsHash);
let data = '';
for await (const chunk of stream) {
data += chunk.toString();
}
return JSON.parse(data);
}
🖥️ Step 4: Build the React UI
Example basic form:
import React, { useState } from 'react';
import { sendMessage, getMessage } from './chatLogic';
function Chat() {
const [message, setMessage] = useState('');
const [ipfsHash, setIpfsHash] = useState('');
const [fetched, setFetched] = useState('');
const handleSend = async () => {
const hash = await sendMessage(message);
setIpfsHash(hash);
};
const handleFetch = async () => {
const msg = await getMessage(ipfsHash);
setFetched(msg.message);
};
return (
<div>
<h1>Decentralized Chat on IPFS</h1>
<textarea value={message} onChange={e => setMessage(e.target.value)} />
<button onClick={handleSend}>Send</button>
<h3>IPFS Hash: {ipfsHash}</h3>
<button onClick={handleFetch}>Fetch Message</button>
<p><strong>Fetched Message:</strong> {fetched}</p>
</div>
);
}
export default Chat;
🔐 Optional: Add Wallet Authentication
Use MetaMask + Ethers.js or Web3Modal to let users "log in" using their wallet and sign messages (for identity).
npm install ethers web3modal
Add a connectWallet function and store messages per address.
🌐 Optional: Hosting the App on IPFS
You can deploy your app to IPFS using:
Option 1: Fleek (easy, GitHub connected)
https://fleek.co
Option 2: Upload build to IPFS
npm run build
npx ipfs add -r build
Host the folder via IPNS or a gateway like https://ipfs.io/ipfs/<hash>
🧠 Advanced Ideas
🪙 Use a smart contract to store IPFS hashes (on Ethereum or Polygon)
⏱ Add timestamps or message expiration
🔒 Add end-to-end encryption using crypto-js
👥 Add peer discovery using libp2p or OrbitDB for real-time messaging
✅ Summary
Feature You Built
IPFS integration ✅
Decentralized storage ✅
Chat message posting & reading ✅
Wallet (optional) ✅
No central server ✅
Learn Blockchain Course in Hyderabad
Read More
Launching Your Own Token with ERC-20
NFT Marketplace Clone Step-by-Step
Comments
Post a Comment