When watching my nephew’s junior tennis matches, I often forget what the score is. After looking at existing tennis scorekeeper apps and not seeing any with the features I wanted, I decided to build my own. In this post, I will talk about the app I built and the design decisions behind it.
Most junior tennis events I've watched play 1 set matches where the first player to win 4 games with tiebreak at 3-3 or 6 games with tiebreak at 5-5 is the winner. The players spin a racket at the start of the match to determine who serves first. At an event, a player usually plays 3 or 4 sets, each against a different opponent. This differs from pro tennis where matches are best of 3 sets (or 5 at grand slams) where each set is first to 6 games with tiebreak at 6-6.
DesignTo support both junior and pro style scoring in my app, the user is given the option to play a tiebreak at the start of each game and can start a new set anytime. To support 1 set matches, the user is allowed to change the player serving first at the start of each set, which defaults to the receiver from the previous game. Since the user has more options, it is possible to make mistakes. For example, starting a new set at 4-0 when playing a 6 game set or giving a point to the wrong player. To handle these cases, I included an undo function. To persist the match state across page reloads and screen locks, all updates to the match state are saved to local storage.
ImplementationI chose to make the app a client side web app to leverage the browser’s built in IndexedDB storage for persisting match state. I used React to build the app.
Demo!
The app is available here.
