PeerWattX - Decentralized Peer-to-Peer Energy Trading Platform

A cutting-edge decentralized platform for peer-to-peer energy trading built with Next.js, Three.js, and advanced Web3 technologies. Experience the future of sustainable energy trading with immersive 3D visualizations and real-time market data.

✨ Features

🎨 Revolutionary UI/UX

• 3D Animations: Stunning Three.js visualizations with floating energy orbs and particle systems
• Glass Morphism: Modern backdrop blur effects and translucent components
• Framer Motion: Smooth page transitions and micro-interactions
• Gesture Controls: Advanced touch and mouse interactions
• Responsive Design: Optimized for desktop, tablet, and mobile devices

⚡ Core Trading Features

• Real-time Trading: Live order book with WebSocket connections
• Smart Order Matching: Automated peer-to-peer energy trading
• Market Analytics: Advanced charting with Recharts integration
• Price Alerts: Customizable notifications for market movements
• Portfolio Management: Track energy generation, consumption, and earnings

🔗 Blockchain Integration

• Web3 Wallet Support: Connect with MetaMask, WalletConnect, and more
• Smart Contracts: Deployed on Ethereum with Hardhat
• Real-time Data: Live blockchain data with Wagmi hooks
• Secure Transactions: Multi-signature wallet support
• Gas Optimization: Efficient smart contract interactions

📊 Energy Management

• Live Monitoring: Real-time energy generation and consumption tracking
• Source Analytics: Solar, wind, and renewable energy breakdowns
• Carbon Footprint: CO₂ savings calculator and environmental impact
• Efficiency Metrics: Performance analytics and optimization suggestions
• Forecasting: AI-powered energy prediction models

🔔 Advanced Features

• Real-time Notifications: Interactive notification center with 3D bell animations
• User Profiles: Comprehensive profile management with achievements
• Market Overview: Live pricing, volume, and trader statistics
• Dark/Light Themes: Customizable interface preferences
• Export Tools: Data export and sharing capabilities

🛠️ Technology Stack

Frontend

• Next.js 14: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first styling
• Three.js: 3D graphics and animations
• Framer Motion: Animation library
• ShadCN/UI: Modern component library

3D & Animations

• @react-three/fiber: React renderer for Three.js
• @react-three/drei: Useful helpers for R3F
• GSAP: High-performance animations
• Recharts: Data visualization
• Lucide Icons: Beautiful icon library

Web3 & Blockchain

• Wagmi: React hooks for Ethereum
• ConnectKit: Wallet connection interface
• Ethers.js: Ethereum library
• Hardhat: Smart contract development
• Solidity: Smart contract language

Backend & Database

• Prisma: Database ORM
• PostgreSQL: Primary database
• Next.js API Routes: Serverless functions
• WebSocket: Real-time data streaming

🚀 Quick Start

Prerequisites

• Node.js 18+ and pnpm
• Git
• MetaMask or compatible Web3 wallet

Installation

1. Clone the repository

git clone https://github.com/your-username/Web3Hackathon-PeerWattX.git
cd Web3Hackathon-PeerWattX

2. Install dependencies

pnpm install

3. Environment setup

cp .env.example .env.local

Edit .env.local with your configuration:

# Database
DATABASE_URL="postgresql://username:password@localhost:5432/peerwattx"

# Blockchain
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="your_walletconnect_project_id"
NEXT_PUBLIC_ALCHEMY_API_KEY="your_alchemy_api_key"

# API Keys
NEXT_PUBLIC_COINMARKETCAP_API_KEY="your_coinmarketcap_api_key"

4. Database setup

npx prisma generate
npx prisma db push
npx prisma db seed

5. Smart contract deployment

npx hardhat compile
npx hardhat deploy --network localhost

6. Start development server

pnpm dev

Open http://localhost:3000 to see the application.

📁 Project Structure

Web3Hackathon-PeerWattX/
├── app/                          # Next.js App Router
│   ├── api/                      # API routes
│   │   ├── auth/                 # Authentication endpoints
│   │   ├── orders/               # Trading order management
│   │   ├── trades/               # Trade execution
│   │   └── forecast/             # Energy forecasting
│   ├── dashboard/                # Main dashboard page
│   └── page.tsx                  # Landing page
├── components/                   # React components
│   ├── dashboard/                # Dashboard-specific components
│   │   ├── DashboardHeader.tsx   # Navigation header
│   │   ├── EnergyStats.tsx       # Energy statistics
│   │   ├── TradingInterface.tsx  # Trading interface
│   │   ├── MarketOverview.tsx    # Market data
│   │   ├── EnergyVisualization.tsx # 3D energy visualizations
│   │   ├── UserProfile.tsx       # User profile management
│   │   └── NotificationCenter.tsx # Notification system
│   ├── ui/                       # Reusable UI components
│   ├── WalletConnection.tsx      # Wallet connection interface
│   └── LoadingScreen.tsx         # 3D loading screen
├── contracts/                    # Smart contracts
│   ├── EnergyToken.sol          # Energy token contract
│   ├── EnergyMarketplace.sol    # Trading marketplace
│   └── MockUSDC.sol             # Test currency
├── lib/                         # Utility libraries
│   ├── blockchain/              # Web3 utilities
│   └── env.ts                   # Environment configuration
├── hooks/                       # Custom React hooks
├── prisma/                      # Database schema and migrations
├── public/                      # Static assets
└── styles/                      # Global styles

🎯 Key Components

WalletConnection Component

• 3D animated background with floating energy orb
• ConnectKit integration for multiple wallet support
• Glass morphism design with backdrop blur effects
• Responsive feature cards with hover animations

Dashboard System

• DashboardHeader: Real-time market data, user profile, notifications
• TradingInterface: Live order book, buy/sell forms, price charts
• EnergyStats: Generation/consumption tracking, efficiency metrics
• MarketOverview: Live pricing, volume charts, trader leaderboards
• EnergyVisualization: 3D flow charts, AI forecasting, interactive tabs

3D Animations

• Three.js particle systems and energy visualizations
• GSAP timeline animations for smooth transitions
• Interactive 3D elements with mouse/touch controls
• Real-time data-driven visual effects

🔐 Smart Contracts

EnergyToken (ERC-20)

// Represents energy units in the ecosystem
contract EnergyToken {
    function mint(address to, uint256 amount) external;
    function burn(uint256 amount) external;
    function transfer(address to, uint256 amount) external returns (bool);
}

EnergyMarketplace

// Handles peer-to-peer energy trading
contract EnergyMarketplace {
    function createOrder(uint256 amount, uint256 price) external;
    function executeOrder(uint256 orderId) external;
    function cancelOrder(uint256 orderId) external;
}

📊 Database Schema

Core Models

• Users: Trader profiles and authentication
• Orders: Buy/sell energy orders
• Trades: Executed transaction records
• EnergyData: Generation and consumption metrics
• Forecasts: AI-powered energy predictions

🎨 Design System

Color Palette

• Primary Green: #00ff88 - Energy and growth
• Electric Blue: #0099ff - Technology and innovation
• Dark Background: #000000 to #1a1a1a - Modern aesthetic
• Glass Effects: rgba(255,255,255,0.1) - Translucent elements

Typography

• Headers: Inter font family, bold weights
• Body: Inter regular, optimized for readability
• Code: JetBrains Mono for technical elements

Animations

• Entry: Smooth fade-in with scale transforms
• Hover: Subtle scale and glow effects
• Loading: Spinning energy orbs and pulsing elements
• Transitions: Page changes with slide and fade effects

🧪 Testing

# Run unit tests
pnpm test

# Run integration tests
pnpm test:integration

# Run smart contract tests
npx hardhat test

# Test coverage
pnpm test:coverage

🚀 Deployment

Vercel Deployment

pnpm build
vercel --prod

Docker Deployment

docker build -t peerwattx .
docker run -p 3000:3000 peerwattx

Smart Contract Deployment

# Sepolia testnet
npx hardhat deploy --network sepolia

# Ethereum mainnet
npx hardhat deploy --network mainnet

🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Use semantic commit messages
• Add tests for new features
• Update documentation as needed
• Ensure responsive design compatibility

📄 License

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

🙏 Acknowledgments

• Three.js Community for incredible 3D graphics capabilities
• Framer Motion for smooth animation primitives
• Wagmi Team for excellent Web3 React hooks
• ShadCN for beautiful UI components
• Vercel for seamless deployment platform

📞 Support

• GitHub Issues: Report bugs or request features
• Discord: Join our community server
• Documentation: Read full docs
• Email: support@peerwattx.com

---

Built with ❤️ for a sustainable energy future