A modern, interactive football/soccer tactics board with AI-powered coaching assistance. Design training drills, visualize formations, and get intelligent suggestions from an AI coach—all in a sleek web interface.
- Multiple pitch layouts: Full field, half field, goal area (box), or empty canvas
- Drag & drop players, balls, cones, goals, and agility ladders onto the pitch
- Rotate and label items with jersey numbers or custom names
- Responsive design that works on desktop and mobile
- Movement lines — Show player runs (solid yellow arrows)
- Pass lines — Illustrate passing patterns (dashed blue arrows)
- Dribble lines — Indicate dribbling paths (dotted white arrows)
- Drag line endpoints to adjust, or drag the whole line to reposition
- Chat with an AI assistant that understands football tactics
- Ask for drill setups like "Create a 4v2 rondo" or "Show a corner kick setup"
- One-click visualization — Apply AI-generated formations directly to the pitch
- Save & load tactical sessions to local storage
- Undo/redo history for all actions
- Export to PNG — Download your tactics as an image
- Node.js (v18 or higher recommended)
- A Gemini API key for AI Coach features
# Clone the repository
git clone https://github.com/yourusername/tacticalmaster.git
cd tacticalmaster
# Install dependencies
npm install
# or with pnpm
pnpm installCreate a .env.local file in the project root:
GEMINI_API_KEY=your_gemini_api_key_herenpm run devOpen http://localhost:5173 in your browser.
- Select a pitch layout when the app starts (or click "Pitch" in the navbar to change later)
- Add items from the sidebar — players, goalkeeper, ball, cones, goals, or agility ladder
- Switch tools in the toolbar to draw movement, pass, or dribble lines
- Click items to select them, then edit labels or delete
- Open AI Coach (purple button) to get AI-generated drill suggestions
- Save your session and export as an image when done
| Action | How |
|---|---|
| Move items | Drag with cursor tool selected |
| Draw lines | Select a line tool, then drag on pitch |
| Edit label | Click item, then type in toolbar |
| Delete | Select item/line, click trash icon |
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool & dev server |
| Tailwind CSS | Styling |
| Lucide React | Icons |
| Google Gemini AI | AI coaching |
| html-to-image | PNG export |
tacticalmaster/
├── App.tsx # Main app component, state management
├── components/
│ ├── Pitch.tsx # Interactive pitch canvas
│ └── AICoach.tsx # AI chat interface
├── services/
│ └── geminiService.ts # Gemini API integration
├── types.ts # TypeScript type definitions
├── constants.ts # Item & line configurations
└── index.tsx # App entry point
MIT
Built for coaches, by someone who should probably be outside on a pitch instead of writing code.