Burraco Score PWA

A Progressive Web App for tracking Burraco card game scores. Built with React, TypeScript, and Vite, this app can be installed on mobile devices and works offline.

Features

• Player Management: Add, edit, and delete players
• Match Tracking: Create and manage 1v1 matches
• Score Recording: Easy point entry with numeric keypad
• Automatic Winner Detection: Tracks when players reach the winning threshold
• Offline Support: Works without internet connection
• Mobile Installable: Can be installed as a native app on smartphones
• Data Persistence: All data saved locally on device

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd burraco-score

2. Install dependencies:

npm install

Running the Application

Development Mode

Start the development server with hot-reload:

npm run dev

The app will be available at http://localhost:5173

Production Build

Build the application for production:

npm run build

Preview the production build locally:

npm run preview

Usage

1. Add Players: Go to the Players tab and add at least 2 players
2. Create Match: Click "Create New Match" and select:
   • Two players
   • First dealer
   • Winning point threshold (default: 2,005)
3. Record Games: Add game results using the numeric keypad
   • Base points (multiples of 50)
   • Score points (multiples of 5)
4. Track Progress: View running totals and match history
5. Winner Declaration: The app automatically declares a winner when the threshold is reached

Game Rules

• A match consists of multiple games
• Each game records base points (50-point increments) and score points (5-point increments)
• First player to reach the winning threshold wins
• If both players reach the threshold in the same game, a tiebreaker is played

Installing as a Mobile App

iOS (Safari)

1. Open the app in Safari
2. Tap the Share button
3. Select "Add to Home Screen"
4. Name the app and tap "Add"

Android (Chrome)

1. Open the app in Chrome
2. Tap the menu (three dots)
3. Select "Add to Home Screen"
4. Confirm installation

Technology Stack

• Frontend: React 19 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS + shadcn/ui
• State Management: Zustand with localStorage
• PWA: Vite PWA Plugin
• Icons: Lucide React

Development

Project Structure

src/
├── components/     # React components
├── stores/        # Zustand state stores
├── types/         # TypeScript type definitions
├── utils/         # Utility functions
└── App.tsx        # Main app component

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Deployment

The app can be deployed to any static hosting service:

Vercel

npm i -g vercel
vercel

Netlify

npm run build
# Drag and drop the dist folder to Netlify

GitHub Pages

npm run build
# Push dist folder to gh-pages branch

Browser Support

• Chrome/Edge 90+
• Firefox 89+
• Safari 15+
• Chrome Android 90+
• Safari iOS 15+

License

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Support

For issues and questions, please open an issue on the GitHub repository.