PredictMeBro

Problem Statement

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 MarketsTraditional prediction markets are complex and intimidating for everyday usersHigh barriers to entry with complicated interfaces and processesLimited real-time engagement and community interaction📊Unreliable Sentiment DataCurrent sentiment analysis tools lack human intuition and contextCentralized platforms can manipulate or bias prediction outcomesNo transparent way to track collective market sentiment over time💰Missed Opportunities for Crowd IntelligenceIndividual predictions are often less accurate than collective wisdomNo easy way to monetize prediction skills and market knowledgeLimited platforms that combine social sentiment with financial incentivesOur Solution✅Simple Yes/No Voting InterfaceIntuitive binary choice system that anyone can understand and useReal-time voting results with live updates across all connected devicesSeamless wallet integration for secure, blockchain-based participation🌐Decentralized & TransparentBlockchain-based voting ensures transparency and immutabilityReal-time synchronization across multiple devices and usersCommunity-driven predictions with verifiable on-chain results⚡Gamified Prediction ExperienceEarn rewards for accurate predictions and active participationSocial features with live user counts and community engagementBeautiful, responsive interface with instant feedback and notificationsFeatures🍞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

Solution

How It's Made🏗️Technical ArchitecturePredictMeBro 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 effectsBlockchain 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 supportReal-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 notificationsSmart Contract Architecture// Multi-network deployment strategy Flow Testnet: 0x903F029e949b090216799AC53fdE6AaE343151b1 Ronin Testnet: 0x2b86c3b937a37Bc14c6556a59CF388180081BB95🎯Key Design Decisions1. Simplified UX ApproachBinary Voting: Reduced cognitive load with simple Yes/No choicesVisual Feedback: Immediate visual confirmation for all user actionsProgressive Enhancement: Works without wallet connection, enhanced with it2. Multi-Chain StrategyFlow: Primary chain for fast, low-cost transactions and better UXRonin: Gaming-focused blockchain for broader ecosystem integrationDynamic Contract Loading: Automatic contract selection based on route3. 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 devices4. State Management StrategyTanStack Query: Server state management with caching and synchronizationWagmi State: Blockchain state management with automatic updatesLocal State: React hooks for component-level state managementSupabase: Real-time data synchronization across users🛠️Development ApproachType-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 ArchitectureAtomic Design: Reusable UI components with consistent stylingCustom Hooks: Business logic separation with reusable hooksProvider Pattern: Context providers for global state managementReal-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 PhilosophyGlass-morphism DesignBackdrop Blur Effects: Modern, elegant visual hierarchyGradient Overlays: Beautiful color transitions and depthCard-based Layout: Consistent, scannable information architectureAccessibility FirstKeyboard Navigation: Full keyboard accessibility supportScreen Reader Support: Semantic HTML and ARIA labelsColor Contrast: WCAG compliant color schemesResponsive Design: Mobile-first approach with touch-friendly interactionsPerformance OptimizationCode Splitting: Dynamic imports for optimal bundle sizesImage Optimization: Optimized assets with proper loading strategiesCaching Strategy: Aggressive caching for static assets and API responses🔐Security & Best PracticesSmart Contract SecurityMulti-signature Wallets: Admin functions require multiple signaturesReentrancy Guards: Protection against reentrancy attacksAccess Control: Role-based permissions for contract functionsFrontend SecurityInput Validation: Client and server-side validationXSS Protection: Sanitized user inputs and CSP headersWallet Security: Non-custodial approach with user-controlled private keys📈Scalability StrategyDatabase DesignSupabase PostgreSQL: Scalable relational database with real-time capabilitiesRow Level Security: User-based data access controlConnection Pooling: Efficient database connection managementCaching LayerTanStack Query: Intelligent client-side cachingCDN Distribution: Global content delivery for static assetsEdge Functions: Serverless functions for real-time processing