4Play - Golf Scoring App
A real-time golf scoring application built with React, Vite, and Supabase. Support for multiple game types, live leaderboards, and handicap calculations.
Features
- Live Real-time Scoring: All players in a group can see scores update instantly as they are entered on the course.
- Multiple Game Formats:
- 🏆 Stableford (Quota): Points-based scoring where players earn points per hole based on net score.
- ⚔️ 4-Ball Round Robin: Team-based match play where the best ball per team counts on each hole.
- 🎰 Skins: Individual competition where the lowest score wins the hole (optional carryover).
- 👑 Chairman: King of the hill format. Win a hole outright to become Chairman and earn points.
- Course Database: Built-in course data with pars and handicap differentials for accurate net scoring.
- Handicap Integration: Optional net scoring using player handicaps.
- Match Management: Create new rounds and share a 6-character join code with your group.
Tech Stack
- Frontend: React, Vite
- Styling: CSS (Inline styles)
- Backend/Database: Supabase (PostgreSQL)
- Realtime: Supabase Realtime Channels
Getting Started
Prerequisites
- Node.js (v18 or higher recommended)
- npm or yarn
- A Supabase account
Installation
-
Clone the repository
git clone <repository-url>
cd my-golf-app
-
Install dependencies
npm install
-
Set up Supabase
-
Start the development server
npm run dev
Database Schema
The app uses four main tables in Supabase:
matches: Stores the round details (code, course, game type, etc.)teams: Stores team assignments for team-based games like 4-Ballplayers: Stores player information (name, handicap, team)scores: Stores individual stroke counts per player, per hole
How to Use
-
Host a Game:
- Open the app and click "Start Round".
- Select your game type, course, and configure optional settings (handicaps, quota, carryovers).
- Enter the player names and handicaps.
- Share the generated 6-character code with your friends.
-
Join a Game:
- Click "Join Round" on the home screen.
- Enter the 6-character code provided by the host.
-
Scoring:
- Tap the score box for a player on a specific hole.
- The app will automatically calculate net scores, points, skins, or chairman status based on the selected game mode.
- The leaderboard at the top of the screen will update in real-time.
-
Finishing a Round:
- Click the "Finish Round" button pinned at the bottom of the screen to view the final summary.
