Dynamic Tournament Bracket Pro

A high-performance, professional-grade tournament bracket engine for React. Designed to replicate the iconic aesthetic of the jQuery Bracket library while providing modern React features like drill-down match reporting, real-time AI generation, and full responsiveness.

🏆 Key Features

• Iconic Aesthetic: Replicates the grey/gold/white theme with high fidelity, including the signature status badges (1st, 2nd, 3rd) and triangular pointers.
• Tournament Types:
  • Single Elimination
  • Double Elimination
  • Double Elimination (No Secondary Final)
  • No Comeback (Loser bracket terminates at 3rd/4th place)
• Match Drill-Down: Click any match to open a detailed modal for entering scores for individual games.
• Best-of-N Support: Configure matches for Best of 1, 3, or 5 games.
• Dynamic Resizing: Real-time adjustment of team widths, score widths, match margins, and round spacing via CSS variables.
• AI Integration: Powered by Google Gemini to generate themed tournament brackets from simple text prompts.
• Mobile First: Features a "Compressed View" mode that scales the bracket down for small screens, using team codes or initials.

🚀 Technical Stack

• Framework: React 19 (ESM)
• Styling: Tailwind CSS + Custom CSS Variables
• Intelligence: Google Gemini API (gemini-3-flash-preview)
• Language: TypeScript

📂 Project Structure

• /components: Modular React components for the bracket layout and match logic.
• types.ts: Robust TypeScript interfaces for tournament data structures.
• geminiService.ts: AI logic for generating themed tournaments.
• bracket-styles.css: The core layout engine and "retro-modern" theme.

🛠️ Usage

Basic Initialization

import { TournamentBracket } from './components/TournamentBracket';
import { BracketData } from './types';

const myData: BracketData = {
  type: 'single',
  rounds: [
    {
      id: 'r1',
      title: 'Finals',
      matches: [
        { 
          id: 'm1', 
          bestOf: 3, 
          participants: [
            { id: '1', name: 'Team Alpha', score: 2, status: 'winner' },
            { id: '2', name: 'Team Beta', score: 1, status: 'loser' }
          ],
          statusLabel: '1st'
        }
      ]
    }
  ]
};

function App() {
  return <TournamentBracket data={myData} />;
}

Custom Scaling

You can pass configuration parameters to adjust the layout dynamically:

const config = {
  teamWidth: 150,
  scoreWidth: 50,
  matchMargin: 80,
  roundMargin: 100
};

📱 Mobile Responsiveness

The component supports a mode="compressed" prop. When active, team names are shortened and spacing is optimized for touch devices, as requested by client specifications.

Built with precision for high-stakes tournament management.