💬 Chatty - Decentralized Chat Application

A modern, real-time blockchain-powered chat application

---

📋 Table of Contents

• Overview
• Features
• Technology Stack
• Architecture
• Prerequisites
• Installation
• Smart Contract
• Testing
• Usage
• API Documentation
• Contributing
• Developer
• License

---

🌟 Overview

Chatty is a cutting-edge decentralized chat application that combines the power of blockchain technology with modern web development. Built on Ethereum, it allows users to create and join paid chat channels using smart contracts, while enjoying real-time messaging through WebSocket connections.

Key Highlights

• 🔐 Blockchain Authentication - Secure wallet-based login
• 💰 Monetized Channels - Create paid access channels
• ⚡ Real-time Messaging - Instant communication via Socket.io
• 🎨 Modern UI/UX - Glassmorphism design with smooth animations
• 🧪 Fully Tested - Comprehensive smart contract testing suite

---

✨ Features

🔗 Blockchain Integration

• MetaMask Integration - Seamless wallet connectivity
• Smart Contract Channels - Decentralized channel management
• NFT Membership - Channel access tokens as NFTs
• Ethereum & Testnets - Support for multiple networks

💬 Real-time Communication

• Instant Messaging - Real-time chat functionality
• Channel-based Communication - Organized discussion spaces
• Message History - Persistent chat storage
• User Identification - Wallet address-based identity

🎨 Modern Interface

• Responsive Design - Mobile and desktop optimized
• Glassmorphism UI - Modern blur effects and transparency
• Smooth Animations - Fluid transitions and micro-interactions
• Dark Theme - Eye-friendly interface design

🔒 Security & Ownership

• Wallet Authentication - No centralized account system
• Paid Access Control - Smart contract-enforced permissions
• Decentralized Storage - No single point of failure

---

🛠 Technology Stack

Frontend

• React 18.2.0 - Modern JavaScript library for building user interfaces
• CSS3 - Advanced styling with custom properties and animations
• Socket.io Client 4.8.1 - Real-time bidirectional event-based communication
• Ethers.js 6.4.0 - Ethereum wallet implementation and utilities

Backend

• Node.js - JavaScript runtime environment
• Express.js 5.1.0 - Fast, unopinionated, minimalist web framework
• Socket.io 4.8.1 - Real-time communication server
• CORS 2.8.5 - Cross-origin resource sharing middleware

Blockchain

• Solidity 0.8.20 - Smart contract programming language
• Hardhat 2.26.1 - Ethereum development environment
• OpenZeppelin 5.4.0 - Secure smart contract library
• Ethers.js 6.4.0 - Ethereum interaction library

Development Tools

• Yarn 4.6.0 - Package manager
• ESLint 8.57.0 - Code linting and style enforcement
• Chai 4.2.0 - BDD/TDD assertion library
• TypeScript 5.9.2 - Type-safe JavaScript development

Testing Framework

• Hardhat Testing - Smart contract testing suite
• Mocha - JavaScript test framework
• React Testing Library - Frontend component testing

---

🏗 Architecture

Smart Contract Layer

Chatty.sol (ERC721)
├── Channel Management
├── NFT Minting for Access
├── Payment Processing
└── Ownership Control

Backend Services

server.js
├── Socket.io Server
├── Message Broadcasting
├── Real-time Communication
└── CORS Configuration

Frontend Application

React App
├── Wallet Integration (MetaMask)
├── Smart Contract Interaction
├── Real-time UI Updates
└── Modern Component Architecture

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16.0.0 or later)
• Yarn (v4.6.0 or later)
• MetaMask browser extension
• Git for version control

System Requirements

• OS: Windows 10+, macOS 10.14+, or Linux
• Memory: 4GB RAM minimum, 8GB recommended
• Storage: 1GB free space

---

🚀 Installation

1. Clone the Repository

git clone https://github.com/kellspell/chatty.git
cd chatty

2. Install Dependencies

# Install all dependencies
yarn install

# Or if you prefer npm
npm install

3. Environment Setup

Create a .env file in the root directory:

# Alchemy API Configuration
ALCHEMY_API_URL=your_alchemy_api_url_here

# Private Keys (NEVER commit these to version control)
PRIVATE_KEY_METAMASK=your_private_key_here

# API Keys
ETHERSCAN_API_KEY=your_etherscan_api_key
COINMARKETCAP_API_KEY=your_coinmarketcap_api_key

4. Start Local Blockchain

# Start Hardhat local network
npx hardhat node

5. Deploy Smart Contracts

# Deploy to local network
npx hardhat run scripts/Deploy.js --network localhost

# Deploy to Sepolia testnet
npx hardhat run scripts/Deploy.js --network sepolia

6. Start the Applications

# Terminal 1: Start the React frontend
yarn start

# Terminal 2: Start the Socket.io backend
node server.js

# Terminal 3: Keep Hardhat node running
npx hardhat node

---

📄 Smart Contract

Chatty.sol Overview

The core smart contract inherits from OpenZeppelin's ERC721 standard and implements:

Key Functions

• createChannel() - Create new paid chat channels
• mint() - Purchase access to channels (mints NFT)
• getChannel() - Retrieve channel information
• channelCount() - Get total number of channels
• withdraw() - Owner withdrawal of collected fees

Contract Features

• ERC721 Compliance - Standard NFT functionality
• Access Control - Only channel payment grants access
• Fee Collection - Automatic payment processing
• Channel Metadata - Name, description, cost, creator info

Security Features

• Owner-only Functions - Channel creation restricted to owner
• Payment Validation - Exact payment required for access
• Reentrancy Protection - Safe withdrawal patterns
• Input Validation - Comprehensive parameter checking

---

🧪 Testing

Run Smart Contract Tests

# Run all tests
yarn test

# Run tests with coverage
yarn coverage

# Run specific test file
npx hardhat test test/Chatty.test.js

Test Coverage

The test suite covers:

• ✅ Contract deployment and initialization
• ✅ Channel creation functionality
• ✅ User joining and payment processing
• ✅ NFT minting and ownership
• ✅ Fee withdrawal mechanisms
• ✅ Access control and permissions

Sample Test Output

  Chatty
    Deployment
      ✓ Sets Name (45ms)
      ✓ Sets Symbol (38ms)
      ✓ Sets Owner (41ms)
    Creating Channels
      ✓ Returns total Number of Channels (52ms)
      ✓ Returns Channel Details (48ms)
    Joining Channels
      ✓ join the user (89ms)
      ✓ Increases total supply (67ms)
      ✓ Updates the contract balance (71ms)
    Withdrawing
      ✓ Updates the owner balance (95ms)
      ✓ Updates the contract balance (78ms)

  9 passing (1.2s)

---

📖 Usage

1. Connect Your Wallet

• Install MetaMask browser extension
• Click "Connect Wallet" in the application
• Approve the connection request

2. Join a Channel

• Browse available channels in the sidebar
• Click on a channel to view details
• Pay the required amount to join
• Start chatting immediately

3. Send Messages

• Select an active channel
• Type your message in the input field
• Press Enter or click Send
• Messages appear in real-time for all users

4. Create New Channels (Owner Only)

• Deploy the smart contract as the owner
• Use the createChannel function with:
  • Channel name and description
  • Access cost in ETH
  • IPFS image URL (optional)

---

📡 API Documentation

Socket.io Events

Client → Server

// Request all messages for current channel
socket.emit('get messages');

// Send a new message
socket.emit('new message', {
  channel: '1',
  account: '0x...',
  text: 'Hello World!',
  timestamp: new Date().toISOString()
});

Server → Client

// Receive all messages
socket.on('get messages', (messages) => {
  // Handle messages array
});

// Receive new message broadcast
socket.on('new message', (messages) => {
  // Handle updated messages array
});

// Connection established
socket.on('connect', () => {
  // Handle connection
});

Smart Contract Interface

Read Functions

function channelCount() public view returns (uint256)
function getChannel(uint256 _channelId) external view returns (Channel memory)
function hasJoined(uint256 _channelId, address _user) public view returns (bool)
function totalSupply() public view returns (uint256)

Write Functions

function createChannel(
    string memory _name,
    string memory _description,
    string memory _imageUrl,
    uint256 _cost,
    address _creator,
    uint256 _createdAt
) public onlyOwner

function mint(uint256 _id) public payable
function withdraw() public onlyOwner

---

🤝 Contributing

We welcome contributions to Chatty! Here's how you can help:

Getting Started

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Add tests for new functionality
5. Commit your changes (git commit -m 'Add some AmazingFeature')
6. Push to the branch (git push origin feature/AmazingFeature)
7. Open a Pull Request

Development Guidelines

• Follow existing code style and conventions
• Write comprehensive tests for new features
• Update documentation for any API changes
• Ensure all tests pass before submitting PR

Areas for Contribution

• 🐛 Bug fixes and improvements
• ✨ New features and enhancements
• 📚 Documentation improvements
• 🧪 Additional test coverage
• 🎨 UI/UX enhancements

---

👨‍💻 Developer

Kellspell

Full Stack Blockchain Developer

About the Developer

Kellspell is a passionate full-stack blockchain developer with expertise in:

• 🔗 Blockchain Development - Solidity, Smart Contracts, DeFi
• ⚛️ Frontend Technologies - React, JavaScript, Modern CSS
• 🔧 Backend Systems - Node.js, Express, Database Design
• 🧪 Testing & DevOps - Automated Testing, CI/CD, Cloud Deployment

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• OpenZeppelin - For secure smart contract implementations
• Hardhat Team - For excellent Ethereum development tools
• React Team - For the amazing frontend framework
• Socket.io - For real-time communication capabilities
• Ethereum Community - For continuous innovation and support

---

Built with ❤️ by Kellspell

If you found this project helpful, please give it a ⭐