React App to display all of your golf stats
Individual Project
Frontend Developer
React + TailwindCSS + Three.js + Figma
2024
Challenge
My brother, a fellow developer, approached me wanting a UI for his golf tracker called Albatross. Being a Tarheel, his only design requirement was to incorporate UNC blue.
In terms of functionality, the UI needed to:
display statistics generated by his program
show a schedule of upcoming tournaments
present past tournament's outcomes, namely: date, name of the tournament, course, tour, score and final position
Process
I wanted the UI to scream golf. My brother is an avid golfer, no matter the time of day he'll find the nearest golf course and go play. Therefore I started by listing out adjectives and nouns that could be used in association.
golf ball, grass, sun, rain, sweat, green, nature, clouds, alligators (near Hilton Head Island), hazard, sand, clubs, caddy, golf cart, polo, childhood, eagle, bogie, mini golf, flag, coach, scorecard and range.
Love, determination, consistency, passion, stress-reliever, peaceful, and competitive.
I used these words to start my design, laying out the placement of data first in the form of a low fidelity wireframe and transferring it to a Figma design. I cherry picked some similar words such as sun, clouds, grass, peaceful, and consistency to really transfer the golf course onto a digital space.
Figma Design
Solution
The end result was a UI that represented all things golf. I coded the front-end using React and TailwindCSS and then the simple backend structure utilized Three.js. I had a 3d model of a cloud from Sketchfab which was my main reason for using Three.js, however, evidently I had a hard time using the cloud canvas in multiple areas without significantly affecting the load times of the page.
The features of the final product include:
display statistics generated by his program
dynamic grass background based on statistic (which unfortunately, for now, isn't showcased in the video)
display full schedule of upcoming tournaments
present past tournament's outcomes, namely: date, name of the tournament, course, tour, score and final position
Dark and light theme
Takeaway
My brother was very pleased with the site, it was clean and effective at showcasing all of his data. I really appreciated TailwindCSS for being very easy to use. I think it would be nice to go one step further and display the data for each round, drawing design themes from a physical golf scorecard. Additionally, the functionality to input scores directly on the UI would be the main next step here.