Context & Problem

Many amateur and semi-pro teams track stats with paper sheets or messy spreadsheets.

This makes it hard to get consistent data across games, compare players, and see trends. Coaches needed a simple way to record stats during the game and then review performance later without becoming full-time data entry clerks.

My goal was to build a two-part system: a clean Laravel backend for data and a responsive React interface optimized for use during live games.

Domain Model & Architecture

I began by modeling the basketball domain in Laravel:

• Team, Player: basic roster data (number, position, active status).
• Game: opponent, type (friendly/official), location, date.
• GamePeriod: quarters or halves, timestamps.
• PlayerStatLine: per-game counter (points, rebounds, assists, steals, fouls, etc.).

The Laravel app exposes a REST API for creating games, updating stats, and retrieving reports. Authentication ensures only authorized coaches or managers can access a team’s data.

Coach-Focused UX

The React frontend is optimized for quick interaction during a live match.

The main screen shows:

• The selected game (score, period, time remaining).
• A table of active players with buttons for +1, +2, +3 points, rebound, assist, foul, etc.
• Visual cues for foul trouble and current scoring streaks.

Updating a stat requires only a single click or tap, and all changes are sent to the Laravel API. This design keeps the coach focused on the game, not on the interface.

Reporting & Visualizations

After each game, the team can access a report view that aggregates:

• Points and efficiency per player.
• Comparison between first and second half.
• Basic team metrics (rebounds, turnovers, fouls).

A charting library in the frontend displays line graphs or bar charts for points over time and team vs opponent scoring, using data from the Laravel API.