Cosmic Chat is a decentralized messaging application built on blockchain technology, allowing users to communicate securely via smart contracts and IPFS.
- Web3 wallet connection with MetaMask
- Blockchain-powered chat rooms and messaging
- IPFS integration for decentralized file sharing
- Real-time message updates
- ENS name resolution
- Beautiful dark mode UI with cosmic theme
CosmicChat/
│
├── contract/
│ ├── CosmicChatContract.sol # Main smart contract
│ ├── compile.js # Contract compilation script
│ ├── deploy.js # Deployment script using ethers
│ ├── package.json # Contract dependencies
│ └── build/ # Compiled contract artifacts
│
├── frontend/
│ ├── app/ # Next.js app directory
│ │ ├── chat/ # Chat page
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home page
│ │
│ ├── components/ # React components
│ │ ├── ui/ # UI components
│ │ ├── FileUpload.tsx # File upload component
│ │ └── ... # Other components
│ │
│ ├── contracts/ # Contract ABIs
│ │ └── CosmicChatContract.json
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useChatMessages.ts # Chat message hook
│ │ ├── useIPFS.ts # IPFS file handling hook
│ │ └── ... # Other hooks
│ │
│ ├── lib/ # Utility functions and contexts
│ │ ├── context/ # React contexts
│ │ │ └── Web3Context.tsx # Web3 provider context
│ │ └── ... # Other utilities
│ │
│ ├── pages/ # Pages directory for API routes
│ │ ├── api/ # API routes
│ │ │ ├── chat/ # Chat API endpoints
│ │ │ └── ipfs/ # IPFS API endpoints
│ │ └── ... # Other pages
│ │
│ ├── public/ # Static assets
│ ├── styles/ # CSS styles
│ ├── next.config.mjs # Next.js configuration
│ ├── package.json # Frontend dependencies
│ └── .env.local # Environment variables
│
└── README.md # Project documentation
- Node.js (v18 or higher)
- MetaMask wallet
- Infura account for IPFS and Ethereum API access
-
Install dependencies:
cd contract npm install -
Create a
.envfile in the contract directory:PRIVATE_KEY=your_wallet_private_key SEPOLIA_RPC_URL=https://sepolia.infura.io/v3/your_infura_key -
Compile the smart contract:
npm run compile
-
Deploy to Sepolia testnet:
npm run deploy
-
Install dependencies:
cd frontend npm install -
Create a
.env.localfile in the frontend directory:NEXT_PUBLIC_CONTRACT_ADDRESS=your_deployed_contract_address SEPOLIA_RPC_URL=https://sepolia.infura.io/v3/your_infura_key INFURA_IPFS_PROJECT_ID=your_infura_ipfs_project_id INFURA_IPFS_PROJECT_SECRET=your_infura_ipfs_project_secret PRIVATE_KEY=your_wallet_private_key -
Prepare contract artifacts:
- Copy the compiled contract ABI from
contract/build/CosmicChatContract.jsontofrontend/contracts/CosmicChatContract.json
- Copy the compiled contract ABI from
-
Start the development server:
npm run dev
-
Open your browser at http://localhost:3000
- Connect your MetaMask wallet to the application
- Create a new chat room or join an existing one
- Start sending messages and sharing files
- Files are automatically uploaded to IPFS and shared in the chat
- Smart Contract: Solidity
- Blockchain: Ethereum (Sepolia testnet)
- Frontend: Next.js, React, TypeScript
- Web3 Integration: ethers.js
- File Storage: IPFS via Infura
- Styling: Tailwind CSS, shadcn/ui
- Development: Node.js
MIT License