Blockchain Bets Dashboard - Codebase Analysis

Project Description: A data-driven analytics platform designed to aggregate and visualize betting handle distribution across multiple markets for each game and team, similar to a Bloomberg Terminal for sports investing.

Tech Stack & Architecture

Frontend: React 18 with Material-UI (v5.11.8)
Routing: React Router DOM v6
State Management: Context API with useReducer pattern
Data Visualization: ApexCharts and React-ApexCharts
Real-time Updates: Socket.io client for live data streaming
HTTP Client: Axios for API communication
Styling: Material-UI with custom theme system

Repository #1: dashboard-frontend

Main Application Layout:

Dashboard layout with responsive sidebar navigation
Protected routes with authentication guards
Admin panel for user and credit management
Multi-breakpoint responsive design (mobile, tablet, desktop)

Key Pages/Sections:

Plays - Main betting data dashboard
ROI Matrix - Return on investment analysis
Data - Raw data visualization
Systems - Betting system management
Settings - User profile and preferences
Admin Panel - User management, invites, credits

Core Betting Data Features

Data Aggregation & Display:

Handle Tracking: Aggregates total wager amounts across multiple sportsbooks
Market Segmentation: Organizes data into six categories:
- Side betting (Team A vs Team B)
- Total betting (Over/Under)
- Moneyline betting
Per-Team Analysis: Calculates each team's share of betting money
Cash Percentage Tracking: Shows distribution of betting handle

Real-time Data Management:

Live streaming of betting odds and handle data
Socket.io integration for real-time updates
Historical money movement tracking via /money/movement/history API
Archive service for historical betting data analysis

Data Visualization Components:

DataTable: Main table displaying games, odds, and betting percentages
Money Movement: Historical tracking of betting line and handle changes
Details Panel: Expanded view with game-specific data
ROI Matrix: Strategic betting analysis based on historical performance

Key Data Structures

Game/Match Object:

{
  eventId: number,
  leagueId: number,
  startDateTime: string,
  awayTeamName: string,
  homeTeamName: string,
  odds: {
    currentAwayValue: string,
    currentHomeValue: string,
    // Historical odds data
  },
  consensus: {
    totalCash: number,
    totalCashHomePercentage: number,
    totalCashAwayPercentage: number,
    // Handle distribution data
  },
  roi: number,
  // Team-specific archive data
}
        

Market Categories Supported:

NFL, CFB, CBB, NBA, MLB, NHL
Special categories: "TOP 10", "ROI 10"

Advanced Features

Money Flow Analysis:

Tracks betting handle distribution across multiple sportsbooks
Identifies market patterns through handle percentage analysis
Real-time cash percentage calculations
Market inefficiency detection

ROI Matrix System:

Historical performance analysis
Playoff vs regular season betting strategies
Risk assessment and bet sizing recommendations
Win percentage tracking across different scenarios

User Management:

Role-based access (User vs Admin)
Credit system for access control
Dashboard access permissions
Profile management with avatar uploads

API Integration

Key Endpoints:

/stream - Main data feed for live betting information
/money/movement/history - Historical money movement data
User authentication and settings endpoints
Admin panel management endpoints

Real-time Features:

WebSocket connections for live updates
Automatic data refresh cycles
Handle/odds movement tracking
Blinking animations for recent updates

Responsive Design

Three breakpoint system (mobile < 720px, tablet 720-979px, desktop > 980px)
Different table layouts for each breakpoint
Collapsible side panels
Touch-optimized interfaces

Data Source Integration

Primary Data Source: BettingData.com

Main Portal: Game center aggregating multiple sportsbooks
JSON API: Bootstrap endpoint providing comprehensive game data
Consensus API: Real-time betting handle distribution
Historical API: Money movement and consensus history

Data Types Extracted:

Live Odds: Current betting lines from multiple sportsbooks
Betting Handle: Total cash amounts and percentage distribution
Consensus Data: Public betting patterns and market sentiment
Live Scores: Real-time game scores and status updates
Historical Data: Money movement trends and archive data

Repository #2: dashboard-json-fetcher

Purpose: Pure JSON Data Extraction Service

Technology: Node.js with Puppeteer (headless Chrome automation)
Bootstrap Data Fetching: Pulls comprehensive game data from BettingData.com's API
Smart Caching: MongoDB storage with 20-minute cache expiration
Data Validation: Ensures payload contains all required fields (Leagues, Groups, Events, Scores, Odds, Consensus)
Scheduled Execution: Configurable cron schedule for automated data collection

JSON Data Structure Retrieved:

{
  Leagues: [...],        // NFL, NBA, CBB, etc.
  Groups: [...],         // Game groupings by date/league
  Events: [...],         // Individual games with team info
  Scores: [...],         // Live scores and game status
  Odds: [...],           // Current betting lines
  Consensus: [...]       // Betting handle distribution
}
        

Repository #3: dashboard-streamer

Purpose: Real-time Data Processing and API Server

Technology: Express.js server with Socket.io, Puppeteer, MongoDB
Data Merging: Combines JSON data from fetcher with real-time DOM scraping
League Filtering: Processes only valid leagues (NFL, CFB, CBB, NBA, MLB, NHL)
Game Categorization: Organizes games into "Watching", "Current", "Final" categories
ROI Calculation: Computes return on investment and consensus analytics
Team ID Synchronization: Matches team information across data sources

Key Service Components:

StreamService: Processes and merges data from multiple sources
ScrapeService: Real-time web scraping for live updates
HttpService: Continuous streaming and WebSocket management
Archive Extraction: Historical money movement data collection

Complete Data Flow Process

            Step 1: Data Extraction (json-fetcher)
            Puppeteer navigates to BettingData.com game center
Intercepts API calls to bootstrap endpoint
Extracts raw JSON data containing all games, odds, consensus
Stores in MongoDB with timestamp for intelligent caching


            Step 2: Data Processing (streamer)
            Retrieves cached JSON data from json-fetcher
Scrapes additional DOM data for real-time updates
Merges JSON and DOM data sources intelligently
Calculates consensus percentages and ROI values
Categorizes games by status (upcoming, live, final)
Extracts comprehensive historical money movement data
Serves processed data via REST API and WebSocket connections


            Step 3: Real-time Updates (streamer)
            Continuously monitors BettingData.com for live changes
Detects updates in odds, scores, betting percentages
Pushes real-time changes via Socket.io to frontend
Sends Slack notifications for significant market movements


            Step 4: Visualization (frontend)
            Receives initial data payload via /stream endpoint
Establishes WebSocket connection for real-time updates
Displays betting handle distribution and percentages
Renders money movement history and ROI analysis

        

Data Processing Details

Technical Implementation Details:

Data Sources: Two specialized repos handle data ingestion - a JSON fetcher and real-time streamer for comprehensive sportsbook API coverage
Update Frequency: Variable based on betting activity - multiple times per minute during high activity, every few minutes or longer during low betting volume hours
Handle Calculation: Raw betting amounts from all sources are aggregated with no weighting or normalization applied - pure sum totals
Money Classification: System tracks total betting amounts only - data source doesn't differentiate between sharp vs public money or provide individual bettor information
Caching Strategy: 20-minute cache expiration for JSON data with real-time DOM updates for immediate changes

Key Tracked Data Points

For Each Game:

Total Cash: Aggregate betting handle across all sportsbooks
Cash Percentages: Home vs Away team betting distribution
Current Odds: Live betting lines from multiple books
Money Movement: Historical changes in handle and lines
ROI Data: Calculated profitability metrics and recommendations
Live Scores: Real-time game scores and status updates

Market Categories:

Side Bets: Team vs Team wagering analysis
Total Bets: Over/Under betting patterns
Moneyline: Straight win/loss betting trends

System Architecture Summary:

This sophisticated sports betting analytics platform aggregates and visualizes betting market data in real-time, functioning as a Bloomberg Terminal equivalent for sports betting. The three-tier architecture features:

Data Extraction Layer: Automated JSON fetching with intelligent caching
Processing Layer: Real-time data merging, analysis, and streaming
Presentation Layer: Professional React dashboard with live updates

The system provides comprehensive market analysis tools, real-time streaming capabilities, and responsive design optimized for professional betting analysis and market inefficiency detection.

Technical Specifications

Performance & Reliability:

Update Frequency: Variable based on market activity - from multiple updates per minute to periodic refreshes during low activity
Data Persistence: MongoDB for caching and comprehensive historical data storage
Real-time Method: WebSocket connections with intelligent DOM monitoring
Error Handling: Slack integration for system monitoring and automated alerts
Scalability: PM2 ecosystem with cron-based restarts and production optimization

Complete Dependencies Overview

Frontend Dependencies (dashboard-frontend):

"dependencies": {
  "@emotion/react": "^11.10.5",
  "@emotion/styled": "^11.10.5", 
  "@mui/material": "^5.11.8",
  "@mui/x-date-pickers": "^6.18.6",
  "apexcharts": "^3.37.0",
  "axios": "^1.3.3",
  "dayjs": "^1.11.7",
  "react": "^18.2.0",
  "react-apexcharts": "^1.4.0",
  "react-router-dom": "^6.8.1",
  "socket.io-client": "^4.6.1",
  "uuid": "^9.0.0"
}
        

Backend Dependencies (streamer & json-fetcher):

"dependencies": {
  "@slack/bolt": "^3.17.1",
  "axios": "^1.3.4",
  "express": "^4.18.2",
  "mongodb": "^6.5.0",
  "mongoose": "^8.3.2",
  "puppeteer": "^20.2.0",
  "socket.io-client": "^4.6.1",
  "node-cron": "^3.0.3",
  "fast-xml-parser": "^4.4.1",
  "ioredis": "^5.3.2"
}
        