Year
2026
My Role
Designer & Developer
Industry
Sports
I developed a training planning platform tailored specifically for volleyball coaches, designed to streamline how trainings are built, organized, and shared. The platform allows coaches to create exercises with interactive court sketches, assemble them into structured training sessions, and manage their team's roster by position. Each exercise can be drawn out on a volleyball court, placing players, drawing movement arrows, and adding objects like pylons, benches, matts, and balls, so the intent of every drill is crystal clear. The system features user signup and authentication, ensuring secure access for coaches.
Visit Project user authentication neededExtra details for the nerds
A major focus of the project was the interactive sketch editor, built from scratch using SVG. It supports full drag-and-drop on desktop and tap-to-place interaction on touch devices, with a unified coordinate system that handles both mouse and touch input seamlessly. Coaches can position players by their volleyball role (outside hitter, opposite, middle blocker, setter, libero, and coach), draw solid or dashed movement arrows, and arrange equipment on the court, all of which is serialized efficiently to the database and rendered back as thumbnails throughout the app.
Considerable attention went into optimizing database reads and writes. Exercises are scoped to teams using array-contains queries, variant groups are batch-fetched to minimize round trips, and a forking system lets coaches adapt shared exercises without altering the original. The platform also includes a thoughtful backward-compatibility layer, so older sketches continue to render correctly even as the data model evolves.
The code is clean, type-safe, and built with maintainability in mind, shared TypeScript types, reusable components, and a consistent design system throughout.
Established features I'm proud of
_Real-time notifications when a teammate shares a training with you
_A customizable avatar editor with live SVG colorization
_A personal preferences center, including mobile-optimized reorder modes and forward/backward training planning
_Exercise favouriting and a shared exercise library across the team
Key details of this project // tl;dr
01
User signup and authentication using Google Firebase
02
Interactive SVG court sketch editor, place players by position, draw movement arrows, and add equipment, with full desktop and touch support
03
Create exercises and assemble them into structured trainings, setting duration per drill within a few clicks
04
Team-scoped data with efficient array-contains queries and batched variant fetching for fast performance
05
Share trainings with teammates, complete with real-time notifications
06
Customizable avatars, favouriting, and a personal preferences center for a tailored experience
