Token RACE

Learn crypto trading through competitive betting - where every race teaches you real market dynamics.

Comment

Token Race: A Web3-First Crypto Betting Platform

Inspiration

Token Race was inspired by the gap in crypto trading education - traditional paper trading lacks the emotional intensity and real-time dynamics of actual crypto markets. We wanted to create a platform where crypto enthusiasts could learn trading psychology and strategy execution through a gamified betting experience on real token price movements. The goal was to provide a risk-free environment that feels more engaging than traditional learning platforms while helping users develop the skills needed for successful crypto trading.

What it does

Token Race is a decentralized crypto betting platform where users connect their Web3 wallets and bet on vetted tokens using USDC. Users compete in races based on token price performance, with flexible race durations from minutes to months. The platform features real-time price tracking, dynamic leaderboards, and a dual authentication system - wallet connection for immediate access to core features, with optional email authentication for enhanced features like bet history tracking and notifications. The platform supports multiple networks (Ethereum, Polygon, Sepolia) and provides a responsive, mobile-optimized interface with beautiful animations and a cyberpunk theme.

Key Features

  • Web3-First Authentication: Instant access with wallet connection
  • Real-time Price Tracking: Live updates during races
  • Multi-chain Support: Ethereum, Polygon, and Sepolia networks
  • Dynamic Race Duration: Flexible timing from minutes to months
  • Responsive Design: Optimized for desktop and mobile
  • Smart Contract Backend: Deployed and tested on Sepolia testnet

How we built it

Thanks to Bolt.new, we were able to rapidly prototype and develop Token Race with incredible speed and efficiency. The platform was built using modern web technologies:

Frontend Stack

// React 18 with Vite for fast development
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';

// Tailwind CSS for styling
import './index.css';

// RainbowKit + wagmi for Web3 integration
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { WagmiConfig } from 'wagmi';

Smart Contract Backend

We developed and deployed custom smart contracts on the Sepolia testnet to handle race creation, betting logic, and reward distribution. The contracts include race management, USDC integration for betting, and automated race finalization with performance-based reward distribution.

Here's the deployed TokenRace smart contract: https://sepolia.etherscan.io/address/0x8A13f3747481a077e062895d58105AFbEF6ACE36

Backend Architecture

-- Supabase PostgreSQL with Row-Level Security
CREATE TABLE users (
  id uuid PRIMARY KEY REFERENCES auth.users(id),
  wallet_address text UNIQUE,
  email text,
  created_at timestamptz DEFAULT now()
);

CREATE TABLE bets (
  id serial PRIMARY KEY,
  user_id uuid REFERENCES users(id),
  race_id text NOT NULL,
  token_address text NOT NULL,
  amount bigint NOT NULL,
  timestamp timestamptz DEFAULT now()
);

Real-time Data Flow

// React Query for data management
import { useQuery, useMutation } from '@tanstack/react-query';

// WebSocket for live updates
const useWebSocket = () => {
  const [socket, setSocket] = useState(null);
  // Real-time price and race status updates
};

// Smart contract integration
const useContract = () => {
  const { data: contract } = useContract({
    address: RACE_CONTRACT_ADDRESS,
    abi: RACE_ABI
  });
};

Bolt.new's intelligent code generation helped us set up the initial project structure and boilerplate code in minutes rather than hours, allowing us to focus on the unique aspects of our application.

Challenges we ran into

Even with Bolt.new's assistance, we faced several technical challenges:

Smart Contract Development

Developing the smart contract backend presented challenges in managing multiple concurrent races, implementing efficient betting logic, and ensuring gas optimization while maintaining security. We solved these through careful state management, reentrancy protection, and event-driven architecture for frontend synchronization.

Authentication Complexity

// Dual authentication system
const AuthProvider = ({ children }) => {
  const [walletUser, setWalletUser] = useState(null);
  const [emailUser, setEmailUser] = useState(null);

  // Coordinating between Web3 and Supabase auth
  const syncUserData = async () => {
    // Complex state management logic
  };
};

Real-time Synchronization

  • Challenge: Managing price updates across multiple networks
  • Solution: Implemented efficient WebSocket connections with React Query
  • Result: Seamless real-time updates without UI lag

Multi-chain Support

// Network switching with wagmi
import { useNetwork, useSwitchNetwork } from 'wagmi';

const supportedChains = [
  { id: 1, name: 'Ethereum' },
  { id: 137, name: 'Polygon' },
  { id: 11155111, name: 'Sepolia' }
];

Accomplishments that we're proud of

✅ Web3-First Platform: Instant access to core betting features with wallet connection
✅ Smart Contract Backend: Fully deployed and tested on Sepolia testnet
✅ Integration Testing: Complete end-to-end testing of Web3 functionality
✅ Real-time System: Robust handling of price updates and race status changes
✅ Multi-chain Support: Seamless operation across Ethereum, Polygon, and Sepolia
✅ Database Security: Row-Level Security ensuring data privacy
✅ Responsive Design: Mobile-optimized interface with smooth animations
✅ Rapid Development: Delivered fully functional platform in record time with Bolt.new

What we learned

Development Acceleration

Bolt.new dramatically accelerated our development process, allowing us to focus on unique application logic rather than boilerplate code. The AI-assisted development approach reduced our development time by approximately 60%.

Smart Contract Development

We learned valuable lessons about gas optimization, security best practices, and efficient storage patterns. The integration between smart contracts and frontend required careful event handling and state synchronization to ensure a seamless user experience.

Web3 Best Practices

// Wallet connection patterns
const { connect, disconnect, isConnected } = useAccount();
const { data: balance } = useBalance({
  address: account?.address,
  token: USDC_CONTRACT_ADDRESS
});

// Contract interaction patterns
const { write: placeBet } = useContractWrite({
  address: RACE_CONTRACT_ADDRESS,
  abi: RACE_ABI,
  functionName: 'placeBet'
});

User Experience Insights

  • Crypto community values instant access and minimal friction
  • Progressive enhancement works exceptionally well in Web3 applications
  • Real-time data management requires careful performance optimization
  • Multi-chain development demands robust error handling
  • Smart contract integration requires careful UX design for transaction flows

What's next for Token RACE

Immediate Roadmap

  • [ ] Sepolia Launch: Open platform for public testing on Sepolia testnet
  • [ ] Real-time Leaderboards: Advanced analytics and social features
  • [ ] Analytics Dashboard: Performance tracking and strategy analysis
  • [ ] Mobile App: Native mobile experience for on-the-go access

Future Enhancements

  • [ ] Mainnet Deployment: Production deployment on Ethereum mainnet
  • [ ] Additional Networks: Support for more blockchain networks
  • [ ] DeFi Integration: Advanced DeFi protocol integrations
  • [ ] Community Features: Strategy sharing and mentorship programs
  • [ ] Advanced Betting: More sophisticated betting mechanisms

Technical Improvements

// Planned analytics implementation
const useAnalytics = () => {
  const [performance, setPerformance] = useState({});
  const [strategies, setStrategies] = useState([]);

  // Advanced performance tracking
  // Strategy effectiveness analysis
  // Community insights
};

With Bolt.new's continued assistance, we expect to implement these features much faster than traditional development timelines, maintaining our rapid iteration cycle while ensuring code quality and best practices.

Ready for Sepolia Testnet Launch: Our smart contracts have been thoroughly tested and are ready to welcome participants to try the platform on the Sepolia testnet.

Built with ❤️ using Bolt.new for accelerated development

Built With

  • rainbowkit
  • react
  • sepolia
  • supabase
  • tailwind
  • vite
  • wagmi
  • walletconnect
Share this project:

Updates