MTG Match Tracker

A web application for Magic: The Gathering players to track their match history, analyze win rates, and improve their game performance.

Features

• Match Recording: Track matches with detailed information:

  • Your deck choice
  • Opponent's deck
  • Format (Standard, Modern, Pioneer, etc.)
  • Game results (Best of 3)
  • Optional opponent name

• Deck Management:

  • Auto-populated deck lists from MTGGoldfish metagame data
  • Add custom decks on the fly
  • Format-specific deck lists

• Statistics:

  • Visual win/loss ratio with charts
  • Overall win rate percentage
  • Match history with timestamps

• User Features:

  • User authentication
  • Persistent match history storage
  • Dark/Light theme toggle

Technology Stack

• React 18
• Vite
• Firebase Authentication
• Chart.js for statistics
• Web scraping capabilities for deck data

Getting Started

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Firebase Setup

1. Create a Firebase project
2. Enable Email/Password and Google authentication
3. Copy your Firebase configuration
4. Update src/firebase.js with your config:

   const firebaseConfig = {
     apiKey: "your-api-key",
     authDomain: "your-auth-domain",
     projectId: "your-project-id",
     storageBucket: "your-storage-bucket",
     messagingSenderId: "your-messaging-sender-id",
     appId: "your-app-id"
   };

Deck Data

The application uses two sources for deck data:

1. Web scraping from MTGGoldfish (updated via npm run scrape)
2. Fallback default deck lists

To update deck data manually:

npm run scrape       # Basic scraping
npm run scrape:debug # Scraping with detailed logs

Features in Detail

Match Recording

• Record match results in a Best of 3 format
• Track both your deck and your opponent's deck
• Optional opponent name recording
• Format selection for proper deck list filtering

Statistics

• Visual representation of win/loss ratio
• Detailed match history with timestamps
• Format-specific statistics

Theme Support

• Light and dark mode support
• Persistent theme preference
• Automatic system theme detection

Authentication

• Email/Password registration and login
• Google authentication
• Persistent session management

Project Structure

src/
├── components/     # React components
├── contexts/       # Context providers
├── data/          # Static data and defaults
├── hooks/         # Custom React hooks
├── utils/         # Utility functions
└── firebase.js    # Firebase configuration

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

License

MIT License - feel free to use this project for personal or commercial purposes.