Project Overview
My Golf Scoreboard is a simple full-stack web application designed for tracking and displaying golf tournament scores in real-time. Built for an outing I took with my friends, the application provided an intuitive interface for scorekeeping and a live leaderboard that updates automatically as teams submit their scores. The system was designed for teams of two, and is configured to be course-aware, meaning it understands the par for each hole and displays scores relative to par (e.g., E, +2, -1), making it easy to see who’s leading at a glance.
I deployed the scoreboard on a Digitial Ocean droplet, which was facilitated by the Docker development pipeline. The system had to function seamlessly on mobile browsers for both the score entry interface and to navigate across the leaderboard landing page and rulebook - which was a great learning opportunity to debug using browser tools and physical hardware.
Features
Course-Aware Scoring
The scoreboard has the course scorecard configured, so the entries reflect the par for each hole on the course, automatically calculating and displaying scores relative to par. This makes it immediately clear which teams are performing well, whether they’re under or over par.
Real-Time Leaderboard
The leaderboard updates automatically every 30 seconds, ensuring spectators and participants always see the latest tournament standings. Teams are ranked by their total score relative to par, with visual indicators for the top three positions.
Team Authentication
Each team has secure login credentials, ensuring only authorized teams can submit scores. The system uses industry-standard JWT (JSON Web Token) authentication with bcrypt password hashing for security.
Mobile-First Design
The entire application is built with mobile devices in mind, making it easy for teams to enter scores directly from their phones while on the course. The responsive design adapts to larger screens for tournament displays.
Technical Stack
The frontend is built on React with TailwindCSS for basic styling. The backend uses FastAPI and SQLalchemy for simple, well-documented utilties for a REST API and database interactions. Everything is built in containers to easily spin up deployments when I want to run this app for an outing.
Skill-Building
This was a fun project to have a sandbox for full-stack web development, while creating a useful application for my golf outings with friends. A few of the highlights in my learning:
- API Design: Creating a well-structured REST API with proper authentication and error handling
- Database Design: Designing a normalized database schema that efficiently supports the application’s requirements
- User Experience: Building intuitive interfaces that work across devices and use cases
- DevOps: Containerizing the application for easy deployment and scaling
- Real-World Deployment: Acquiring domain names, configuring DNS, using production separation for docker workflows