Betty

Betty is a mobile-first prediction markets app that reimagines how users interact with forecasting platforms. Inspired by Tinder's intuitive swipe UX, Betty transforms the traditionally complex world of prediction markets into an engaging, gamified experience where making predictions is as simple as swiping right for "Yes" or left for "No.", or down for skipping the question.

Users deposit USDC to their in-app wallet (multichain), then configure their bet amount per prediction from $0.05 to $1.00. Each swipe automatically places a bet, creating a frictionless flow where users can rapidly move through dozens of predictions on topics ranging from AI and technology to finance, crypto, and sports.

Key features include:

• Swipe-based prediction interface with smooth drag gestures and visual feedback (YES/NO/SKIP indicators appear as you swipe)
• Multichain USDC deposits with non-custodial wallet
• Configurable micro-stakes that make prediction markets accessible to everyone
• Real-time balance tracking displayed prominently in the header, showing remaining predictions based on your bet size
• Prediction history and stats to track your accuracy over time

Betty democratizes prediction markets by lowering the barrier to entry, both in UX complexity and financial commitment. Instead of researching odds and placing calculated bets, users can trust their gut and swipe through predictions in seconds, making forecasting feel more like a social experience than a financial one.

Betty is built with React + Vite.

Frontend Stack:

• React 18 with functional components and hooks for state management
• React Router v6 for client-side navigation between screens (Welcome → Wallet → Predict → Profile → Stats)
• Tailwind CSS for rapid UI development—we started with HTML/CSS mockups and converted them to React components, keeping Tailwind classes intact for consistency
• Custom React Context (WalletContext) for global wallet state management, persisted to localStorage

The Swipe Mechanic was the trickiest part. We implemented it from scratch using native touch/mouse events rather than relying on a library, giving us full control over the UX:

• onTouchStart/onMouseDown captures the initial position
• onTouchMove/onMouseMove calculates drag offset and applies real-time CSS transforms (translate + rotate)
• onTouchEnd/onMouseUp determines swipe direction based on a 100px threshold
• CSS animations handle the card flying off-screen in the chosen direction

Hacky but notable: The "Demo: Simulate deposit" feature lets hackathon judges test the full flow without needing real USDC. It's a simple modal that calls deposit(amount) on our context, production would verify on-chain transactions, but for demo purposes, this creates a convincing end-to-end experience in seconds.

Crypto Integration is designed for multi-chain support with a static deposit address for the MVP. The bet deduction logic lives in placeBet(), which atomically checks balance and deducts the configured amount per swipe. Skipping is free—only YES/NO predictions cost money.

Note: this is all a demo, and is not live on mainnets.