Skip to content

Latest commit

 

History

History
123 lines (97 loc) · 2.87 KB

README.md

File metadata and controls

123 lines (97 loc) · 2.87 KB

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.