/PropBet

PropBet is a modern React-based NBA sports betting web app featuring real-time player props, dynamic leaderboards, and innovative betting mechanics.

Primary LanguageTypeScriptMIT LicenseMIT

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
  1. Install dependencies:
npm install
  1. 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