PubGolf App

A little be rum- I mean fun

This was a project I threw together over a weekend. During the COVID lockdown, I watched a lot of the YouTube group Sidemen and they did a video where they played pub golf. I thought the game looked fun and thought to try and have a go with some friends. I noticed there wasn't an app for keeping track of the game's scores so I quickly threw together a simple Vue app.

How it works

Click start game, enter the names of the players, then add the hole (the name of the bar) and the par (the number of sips you should finish your drink in). Then click play.

You will be presented with a score table where you can enter the number of sips a player took on a certain hole. The app will automatically deduct that hole's par and calculate the player's total score.

To end the game and start a new one, simply click the finish button.

Redesign

Once the functionality was complete, I decided to work on improving the UI as the current rushed design looked very poor in my opinion. The yellow was meant to be similar to that of a cartoon beer while the logo was just quickly thrown together being two word put together with one being a different color to the other.

First I decided to define my color scheme to be Green, Yellow and White:

• Green would be the primary color on the background like a grass green. A nod to the golf side of the app

• Yellow for the same reason as before being similar to a cartoon beer yellow

• White would be used for the inputs as a scorecard would usually be written on white paper

Next I designed a logo. I am not a designer so I kept it simple and used a website called Looka which is an AI powered platform for designing a logo I created a simple logo.

I then seperated the add players and pars forms so the user does one at a time and improved how it displays what the player has added. With chips showing the added players and a table showing the added pars. Finally on the page displaying the scorecard, I updated it to use the new colors and made the table look like an actual scorecard with a white background.

Improvements

Given the opportunity, there are many improvements I'd like to make to the app. For example:

• Teams Feature: Can group players into teams and see team's total score instead of having to work it out themselves.

• Challenges: The Sidemen would have challenges to do alongside the game which when completed would remove x amount from their score. I'd like to add this feature as it gives a groups non-alcoholic drinkers something to do.

• Ad banner: A small ad banner which wouldn't drastically affect the app's performance would be a way to generate some money from the app.

• Users system: If there were enough users, I'd work on a backend allowing users to signup, create a game and allow other players to join. This means the game could be seen on more than one phone. The backend server opens up many more opportunities as well.

June 2023 Update: Adding the teams

Having a bit of free time, I decided to try and add some of the previously mentioned features to the app to increase its value. I began with the teams feature as that in my opinion appeared to be the most useful.

I added the form to add teams to the Vuex state, but then I had to question how to assign the players to the team. And with that I was reexamining the whole UX. I decided that the user's journey would work better if they first add what the course was going to be. So they would begin by adding the hole (pubs) and the pars (sips). Then they would optionally add the teams. If they hadn't added any teams, the form was the same. If they had then they would see a list of each team and an input to add a player to the team. See screenshot below:

With this done, I then had to ponder what was the best way to show the teams score on the scoreboard, rather than making the user add up each players score themselves. I ended creating a finish page which would display the winning team or if there were no teams the winning player and a table below which showed their order and total scores. See screenshot below:

With that added, I now had a working teams feature which was entirely optional.

July 2023 Update: Adding the Challenges

Not long afterward, I wanted to add the final major feature to this version of the app which was challenges. Whilst I thinking about it, I remembered that the Sidemen also did penalties whenever someone: spilled their drink, fell over, thrown up etc. To keep it simple, Since they were so similar, I just added it as part of this update.

To start with I added the form which added the challenges and their value to the Vuex state. I also added 2 getters which would filter the array by if their value was positive or negative. If it was positive, it was a penalty else it was a challenge. I decided to have this form appear after adding the teams but before adding the users. See screenshot below:

With that done, I then added a column to the scorecard for challenges and penalties allowing the user to add multiple penalties to one player and vice versa for the challenges. The players were also put in order of their team so it was easy to keep track.

With this update the user journey had been overhauled and was now:

1. Open app

2. Click start game

3. Enter the location and number of sips

4. Enter the team names or leave blank

5. Enter any challenges or penalties for the game

6. Add the players, either to each team or just the game

7. View and update scorecard

8. Click finish and click confirm to end the game

9. View leaderboard

10. Click restart to begin again from step 2

Near the end of the game

With the teams feature and challenges added, the only thing left is a small ad banner which wouldn't drastically affect the app's performance would be a way to generate some money from the app. Once that was added, the purchase of a domain would be ideal for it to be hosted rather than using the Netlify domain.

I don't think I'll add a user system to this and would instead have it redesigned and remake it if I wanted to add more advanced features. I'm likely to start learning svelte soon this would be a good project to try and remake in it.

I feel like this project just shows how great it is to be a developer. Don't have an app for that? Don't want to do that task? Just build an app and automate it.