wintracker

A mobile-first web application for tracking wins and losses in competitive matches between friends. Built entirely as a vibe-coded project.

Description

Wintracker allows users to maintain records of their competitive match results against various opponents. Users can create accounts, add opponents, and track their win/loss statistics over time. The application supports editing match history, managing opponent lists, and provides a clean interface for viewing performance data.

Main Workflows

1. User Registration/Login: Enter name to create new account or access existing account
2. Opponent Management: Add new opponents to track matches against
3. Match Tracking: Record wins and losses for each opponent
4. Data Management: Edit match results, update opponent names, delete records
5. History Viewing: Review complete match history and statistics
6. Report Generation: Generate reports with the biggest win and loss rates based on user data

Tech Stack

Frontend

Database

Architecture Overview

Frontend Architecture

• Component Structure: React functional components with TypeScript interfaces
• State Management:
  • Global user state managed by Zustand store
  • Server state managed by TanStack Query for caching and synchronization
• Data Flow: Unidirectional data flow with custom hooks for database operations
• UI Components: Mantine component library with custom styling
• Internationalization: i18next for multi-language support
• Routing: URL-based user persistence without traditional routing

Database Architecture

• Database: PostgreSQL hosted on Neon (serverless)
• Tables:
  • users: User accounts with unique names
  • matches: Win/loss records linked to users and opponents
• Relationships: Foreign key constraints between users and matches
• Indexes: Optimized queries with indexes on user_id and opponent names
• Data Integrity: Unique constraints and check constraints for data validation

Data Layer

• Connection Management: Singleton pattern for database initialization
• Query Abstraction: Dedicated query modules for users and matches
• Type Safety: TypeScript interfaces for all data structures
• Error Handling: Comprehensive error management with user feedback
• Validation: Input sanitization and validation utilities

Setup

1. Clone the repository
2. Install dependencies: npm install
3. Set up environment variables in .env.local (see .env.template for reference)
4. Run development server: npm run dev