PredictMeBro

A decentralized sentiment prediction market platform where users can vote "Yes" or "No" on various predictions and market outcomes. Built with Vite + React, TanStack Router for routing, and Wagmi for Ethereum wallet integration.

The Problem We Solve

🔍 Lack of Accessible Prediction Markets

• Traditional prediction markets are complex and intimidating for everyday users
• High barriers to entry with complicated interfaces and processes
• Limited real-time engagement and community interaction

📊 Unreliable Sentiment Data

• Current sentiment analysis tools lack human intuition and context
• Centralized platforms can manipulate or bias prediction outcomes
• No transparent way to track collective market sentiment over time

💰 Missed Opportunities for Crowd Intelligence

• Individual predictions are often less accurate than collective wisdom
• No easy way to monetize prediction skills and market knowledge
• Limited platforms that combine social sentiment with financial incentives

Our Solution

✅ Simple Yes/No Voting Interface

• Intuitive binary choice system that anyone can understand and use
• Real-time voting results with live updates across all connected devices
• Seamless wallet integration for secure, blockchain-based participation

🌐 Decentralized & Transparent

• Blockchain-based voting ensures transparency and immutability
• Real-time synchronization across multiple devices and users
• Community-driven predictions with verifiable on-chain results

⚡ Gamified Prediction Experience

• Earn rewards for accurate predictions and active participation
• Social features with live user counts and community engagement
• Beautiful, responsive interface with instant feedback and notifications

Features

• 🍞 Sonner Toast: Beautiful toast notifications with multiple variants
• 🔗 TanStack Router: File-based routing with full TypeScript support
• 🏦 Wagmi Integration: Connect to Ethereum wallets and interact with blockchain
• ⚡ Vite + React: Lightning-fast development with React 19
• 🎨 Tailwind CSS: Utility-first CSS framework
• 📝 TypeScript: Full type safety throughout the application

How It's Made

🏗️ Technical Architecture

PredictMeBro is built using a modern, scalable tech stack designed for performance, developer experience, and user accessibility:

Frontend Stack

• ⚡ Vite + React 19: Lightning-fast development with the latest React features
• 🎯 TypeScript: Full type safety throughout the application for robust development
• 🎨 Tailwind CSS: Utility-first CSS framework for rapid, responsive UI development
• 🧭 TanStack Router: File-based routing with full TypeScript support and type-safe navigation
• 📱 Responsive Design: Mobile-first approach with glass-morphism UI effects

Blockchain Integration

• 🔗 Wagmi v2: React hooks for Ethereum wallet connection and smart contract interaction
• ⚙️ Viem: Low-level Ethereum utilities for type-safe blockchain operations
• 🌊 Flow Blockchain: Primary blockchain for low-cost, fast transactions
• 🛡️ Ronin Blockchain: Secondary blockchain support for broader ecosystem reach
• 👛 Privy Authentication: Seamless wallet connection with multiple provider support

Real-time Infrastructure

• 📡 Supabase Realtime: PostgreSQL-based real-time data synchronization
• 🔄 Live Notifications: Cross-device toast notifications for pool creation and voting
• 📊 Live Updates: Real-time vote counts and pool status updates
• 🎯 Event Broadcasting: Custom event system for user actions and notifications

Smart Contract Architecture

// Multi-network deployment strategy
Flow Testnet: 0x903F029e949b090216799AC53fdE6AaE343151b1
Ronin Testnet: 0x2b86c3b937a37Bc14c6556a59CF388180081BB95

🎯 Key Design Decisions

1. Simplified UX Approach

• Binary Voting: Reduced cognitive load with simple Yes/No choices
• Visual Feedback: Immediate visual confirmation for all user actions
• Progressive Enhancement: Works without wallet connection, enhanced with it

2. Multi-Chain Strategy

• Flow: Primary chain for fast, low-cost transactions and better UX
• Ronin: Gaming-focused blockchain for broader ecosystem integration
• Dynamic Contract Loading: Automatic contract selection based on route

3. Real-time First Architecture

// Realtime notification system
usePoolNotifications() // Listen for pool creation events
useBroadcastPoolCreation() // Broadcast pool creation to other users
useVoteNotifications() // Live vote updates across devices

4. State Management Strategy

• TanStack Query: Server state management with caching and synchronization
• Wagmi State: Blockchain state management with automatic updates
• Local State: React hooks for component-level state management
• Supabase: Real-time data synchronization across users

🛠️ Development Approach

Type-Safe Development

// Complete type safety from contracts to UI
interface Pool {
  id: string
  question: string
  totalAmount: number
  yesVotes: number
  noVotes: number
  endsAt: string
  claimableAmount?: number
  isResolved?: boolean
}

Component Architecture

• Atomic Design: Reusable UI components with consistent styling
• Custom Hooks: Business logic separation with reusable hooks
• Provider Pattern: Context providers for global state management

Real-time Event System

// Event-driven architecture for live updates
export const EVENT_TYPES = {
  VOTE: 'vote',
  POOL_CREATED: 'pool_created',
  POOL_RESOLVED: 'pool_resolved',
  REWARD_CLAIMED: 'reward_claimed'
}

🎨 UI/UX Philosophy

Glass-morphism Design

• Backdrop Blur Effects: Modern, elegant visual hierarchy
• Gradient Overlays: Beautiful color transitions and depth
• Card-based Layout: Consistent, scannable information architecture

Accessibility First

• Keyboard Navigation: Full keyboard accessibility support
• Screen Reader Support: Semantic HTML and ARIA labels
• Color Contrast: WCAG compliant color schemes
• Responsive Design: Mobile-first approach with touch-friendly interactions

Performance Optimization

• Code Splitting: Dynamic imports for optimal bundle sizes
• Image Optimization: Optimized assets with proper loading strategies
• Caching Strategy: Aggressive caching for static assets and API responses

🔐 Security & Best Practices

Smart Contract Security

• Multi-signature Wallets: Admin functions require multiple signatures
• Reentrancy Guards: Protection against reentrancy attacks
• Access Control: Role-based permissions for contract functions

Frontend Security

• Input Validation: Client and server-side validation
• XSS Protection: Sanitized user inputs and CSP headers
• Wallet Security: Non-custodial approach with user-controlled private keys

📈 Scalability Strategy

Database Design

• Supabase PostgreSQL: Scalable relational database with real-time capabilities
• Row Level Security: User-based data access control
• Connection Pooling: Efficient database connection management

Caching Layer

• TanStack Query: Intelligent client-side caching
• CDN Distribution: Global content delivery for static assets
• Edge Functions: Serverless functions for real-time processing