Soccer Training Drill Creation & Management Platform

Web application for creating and managing training drills for soccer coaches
Design player positions and movement paths on an interactive canvas and share with team members via announcements.

Visit Site

1 / 5

Roles

PlanningDesignFrontendBackend

Tech Stack

React

TypeScript

Redux Toolkit

Fabric.js

Supabase

Ant Design

Styled Components

Key Features

Training Drill Editor: Drag-and-drop placement of players, balls, cones, ladders, and equipment on soccer field canvas
Player Movement Paths: Visualize player movements with various path types including straight, curved, and wave lines
Personal Library: Save created training drills and manage with public/private settings
Public Library: Search training drills shared by other coaches by category
Team Announcements: Send announcements with attached training drills to team members, with bulk sending to multiple teams

Key Achievements

Fabric.js Canvas Customization: Implemented drill editor-specific object system and interactions for players, equipment, and shapes
Custom Undo/Redo System: Self-implemented history system tracking canvas state history and restoring object relationships
Bezier Curve Path Generation: Convert player movement paths to smooth curves using Catmull-Rom algorithm
Object Relationship Tracking: Automatic synchronization of related objects on move/delete via player-path line parent-child relationship management
SVG Image Pipeline: Implemented canvas → SVG conversion → Storage upload → URL generation flow
Redux Non-Serializable State Management: Middleware configuration for managing Fabric.js objects in Redux
Social OAuth Integration: Authentication with 4 providers (Kakao, Google, Facebook, Apple) and role-based user mapping

#Soccer

#Sports

#Canvas Editor

#Fabric.js

#Training Management

#SaaS