PropBet

PropBet is a modern web application for sports betting enthusiasts, focusing on NBA player props. Built with React, TypeScript, and Supabase, it offers a seamless and engaging betting experience with real-time updates and unique betting mechanics.

Live Demo

Visit the live application at: PropBet Web App

Features

Core Betting Features

• 🎯 Power Play System

  • 2-6 picks with higher multipliers
  • All picks must hit to win
  • Multipliers up to 37.5x

• 💪 Flex Play System

  • 3-6 picks with partial win payouts
  • Get paid even if you miss 1-2 picks
  • Multipliers up to 25x for all correct

User Experience

• 🏀 Real-time NBA player props with live odds
• 📊 Dynamic leaderboard system
• 👤 User authentication and profiles
• 💰 Virtual currency system
• 📱 Responsive design for all devices
• 🔄 Real-time updates
• 📈 Historical player performance data

Player Statistics

• 📊 Comprehensive player statistics from Supabase
• 🏀 Previous games performance tracking
• ⚡ Fast and efficient data querying
• 📅 Historical game data
• 🔍 Detailed box scores

Admin Features

• 🎮 Comprehensive admin dashboard
• 📈 User management system
• 🎲 Props management interface
• 💼 Bet status management
• 🔄 Automated props refresh system

Technology Stack

Frontend

• React 18 with TypeScript
• Tailwind CSS for styling
• Lucide React for icons
• Vite for build tooling

Backend & Services

• Supabase for database and real-time features
• Firebase Authentication
• Firebase Realtime Database
• The Odds API integration

Database Schema

Tables

• games - Stores game information

  • id: Game identifier
  • date: Game date
  • home_team_id: Home team identifier
  • away_team_id: Away team identifier

• box_scores - Player performance statistics

  • id: Box score identifier
  • player_id: Player identifier
  • game_id: Game identifier
  • points: Points scored
  • rebounds: Total rebounds
  • assists: Total assists
  • steals: Total steals
  • blocks: Total blocks
  • minutes: Minutes played
  • opponent: Opponent team

• players - Player information

  • id: Player identifier
  • name: Player name
  • team_id: Current team identifier

• teams - Team information

  • id: Team identifier
  • name: Team name

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• Supabase account
• Firebase account
• The Odds API key

Environment Setup

Create a .env file in the root directory with:

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_DATABASE_URL=your_database_url
VITE_ODDS_API_KEY=your_odds_api_key
VITE_ADMIN_EMAIL=admin_email
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Installation

1. Clone the repository:

git clone https://github.com/yourusername/propbet.git
cd propbet

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Project Structure

src/
├── components/         # React components
│   ├── BetSlip.tsx    # Betting interface
│   ├── Leaderboard.tsx# User rankings
│   ├── LoginPage.tsx  # Authentication
│   ├── Navbar.tsx     # Navigation
│   ├── Profile.tsx    # User profile
│   ├── PropCard.tsx   # Prop display
│   └── PropTabs.tsx   # Prop filtering
├── contexts/          # React contexts
│   └── AuthContext.tsx# Authentication state
├── lib/              # Utilities
│   ├── database.ts   # Firebase operations
│   ├── firebase.ts   # Firebase config
│   ├── supabase.ts   # Supabase client
│   ├── database.types.ts # Supabase types
│   ├── playerIds.ts  # NBA player IDs
│   ├── playerTeams.ts# Player team mappings
│   └── teamLogos.ts  # Team logo URLs
└── types.ts          # TypeScript definitions

Betting System Details

Power Play

| Picks | Multiplier | |-------|------------| | 2 | 3x | | 3 | 5x | | 4 | 10x | | 5 | 20x | | 6 | 37.5x |

Flex Play

| Picks | All Correct | 1 Miss | 2 Miss | |-------|-------------|---------|---------| | 3 | 2.25x | 1.25x | - | | 4 | 5x | 1.5x | - | | 5 | 10x | 2x | 0.4x | | 6 | 25x | 2x | 0.4x |

Contributing

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

License

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

Acknowledgments

• NBA data from The Odds API
• Team logos from NBA official resources
• Icons from Lucide React
• Database hosting by Supabase