🏁 Mario Kart Race Tracker 🏁

🏆 What is this?

A comprehensive Mario Kart race tracking application that records race results, calculates detailed statistics, tracks achievements, and provides in-depth performance analysis for up to 4 players. All data is stored locally in your browser.

📊
6 Different Views

Navigate between Achievements, Stats, H2H, Analysis, Activity, and Trends tabs. Each provides insights into your racing performance.

🏆
5 Achievement Categories

Win Streak (consecutive 1st), Hot Streak (consecutive podiums), Clutch Master (better than average), Momentum Builder (improving positions), Perfect Day (all top-12 in a day).

💾
Auto-Save & Backup

All data auto-saves to local storage. Auto-backup every 10 minutes. Export/import JSON files for manual backups. Full undo/redo history.

🎮
Multiple Input Methods

Quick Add widget (🏁+), sidebar Add Race form, direct number entry (1-24), stepper buttons (+/-), or position picker dropdown.

📈
Advanced Analytics

Position heat maps, recent streak visualization, sweet spot analysis, performance trends chart, activity calendar, and H2H statistics.

🎨
Customization

Dark/light themes (dark recommended), custom player icons/emojis, configurable player count (1-4, optimized for 3), and date filtering.

🚀 Quick Start Guide

  1. Configure Players: Open sidebar (☰) → Click 👤 Manage Players → Set 1-4 player names and feel free picking icons
  2. Add First Race: Enter positions (1-24) for each player → Click "🏁 Add Race"
  3. Explore Views: Click tabs at top - Achievements shows progress, Stats compares players, H2H shows matchups, etc.
  4. Filter by Date: Use sidebar date controls - All Time, Today, Last 7/30 days, or custom date ranges
  5. Backup Data: 📤 Export to save JSON file. 📥 Import a JSON file. Auto-backup runs every 10 minutes

📊 Visualization Guide

🏆 Achievements

Track milestones and streaks across 5 categories:

  • 🏅 Win Streak: Consecutive first place finishes
  • 🔥 Hot Streak: Consecutive podium finishes
  • 💥 Clutch Master: Consecutive races finishing better than average
  • 🚀 Momentum Builder: Consecutive races with improving positions
  • 📅 Perfect Day: All races in a day were top-12 finishes

🌡️ Position Heat Map

Shows frequency of finishing positions in ranges:

  • 1-6: Top tier finishes
  • 7-12: Mid-tier finishes
  • 13-18: Lower tier finishes
  • 19-24: Bottom tier finishes

📈 Recent Streak

Your last 10 race positions at a glance with gradient colors

🎯 Sweet Spots

Visualizes frequency for each specific position (1-24):

  • Each bar represents one position
  • Brighter colors = more frequent finishes
  • Helps identify your most common positions

⚠️ Disclaimers

  • Mobile View: The app is not fully optimized for mobile yet. The Trends chart in particular may not display correctly on smaller screens.
  • Dark Mode Preferred: The app is designed with dark mode as the primary theme. Light mode is functional but may have minor visual inconsistencies.
  • Player Count: The app is optimized for 3 players. Using 1, 2, or 4 players may result in some visual spacing issues.
  • Data Storage: All data is saved locally in your browser's local storage. This means:
    • Data persists between sessions on the same device/browser
    • Clearing browser data will delete all race history
    • Data doesn't sync across devices
  • Player Tracking: Players are saved based on their position slot (e.g., Player 1, Player 2) and not by name. This means that Player 1's results will always appear in the leftmost position, even if the name changes later. Player statistics and positions are tied to their assigned number, not their current name label. I intend to improve this in the future, but for now this works for my usage.

🔧 Technical Details

  • Data Format: Race data stored as JSON with date, timestamp, and player positions (1-24)
  • Browser Storage: Uses local storage
  • Auto-Backup: Runs every 10 minutes, includes all races and player configurations
  • Validation: Real-time input validation, duplicate position detection, range checking
  • No Server Required: Fully client-side application, no internet needed after loading

💡 Tips:

  • Click achievement bars to expand and see detailed progress
  • For 2-player games, stats automatically show green (winner) and red (loser)
  • Export your data regularly as backup - local storage can be cleared by browsers
  • Use date filters to analyze specific sessions
  • The "Expand Active" button shows only achievements with current streaks
  • Position picker in sidebar remembers your last selection for faster entry
  • Hold mouse over visualizations for detailed tooltips and counts
  • Charts and stats update immediately after adding each race