Volley Stats is a comprehensive volleyball match stat tracking application. It allows the user to keep track of player statistics during matches, see a visual representation of how each player performs over the course of a season, along with full team statistics. This will provide coaches with vital information on the performance of players and teams in certain key areas of the game, thus allowing them to understand where improvement is needed either in following training sessions or in real time during the match.

How It Started

As a developer, I am always wanting to start a new project. Do I currently have a project on the go? Yes? Well, then it's time to start a new one.

Volleyball is the constant theme throughout my life and my personal projects, so why stop now! I was asked by my club head coach to help track the stats for his Women's 1 team. He handed me a piece of paper with a printed Excel spreadsheet, a pen, and told me to keep a tally of all the stats within each field. It was in all parts pretty self-explanatory. However, when it came to the actual match and a player contacted the ball, I had to find the player's name on the sheet, track it across to the relevant stat box, jot down the stat, and by the time I looked up, 2 other players had made contact with the ball that needed recording. After the match, I handed the sheet back and asked the coach what he does with them. He types all the stats out into a spreadsheet where it will display all the stats and give him a visual representation of the match and season. That's when I thought to myself - I can make a better way of doing this.

Goals

Regarding my learning pathway, TypeScript is the obvious next step in my progress. So I wanted a project that allowed me to improve my already existing skills whilst pushing me to learn something new. So, my primary goal of this project is to create a portfolio piece allowing me to showcase my current expertise and that of what I learn.

Secondly, it does solve a real-world problem for my volleyball club. I mentioned earlier about the stats spreadsheet. This application is more than just digitising that. My club has 9 teams each playing anywhere from 10-20 matches per season. Volley Stats will allow all the team's coaches to create and track the stats of their players. As a result of this, it will allow the club as a whole to identify the weak parts of their game so that they can target training sessions with specific skills to help improve.

Expected Challenges

TypeScript: Beyond the learning opportunity, TypeScript's type system will prevent data corruption during live match tracking by catching errors at compile time rather than during critical game moments.
Stat tracking interface: Building an interface that is usable during a fast-paced game is going to be tricky. This might be one of those features that sees many iterations as a result of user testing.
Scalable state architecture: Designing TypeScript interfaces and Zustand stores that can handle complex volleyball club operations while remaining maintainable as features expand from basic stat tracking to advanced analytics.

Technology

Next.js: I wanted to focus on learning TypeScript and complex state management, so I have decided to use a familiar framework so I can focus on learning.
TypeScript: Outside of learning a new language, TypeScript will ensure the statistical data remains accurate during real-time match tracking.
Zustand: I needed a state management tool and have previously used and got along with Zustand. So logically it was the right choice.
TailwindCSS: Trusty old Tailwind. I use this for all my projects as it feels very natural and arguably helps me implement my designs much faster than regular CSS.

The Plan

As this project has some real-world application, I want to get it to a stage for being user tested as soon as possible. With that in mind, I have stripped a few features away that are relevant to the final product but not for the MVP. Right now, these features are what's important for the project:

Club management: Allow the user to create and set the current season. Create teams, players, and matches.
Stat tracking: Allocate players to a match and track match stats using an intuitive system.
Visual stats: Display the final statistics of the match - overall team stats and individual player stats. Season statistics also - view full team stats or individual player stats for the season.