🏁 A performance dashboard that turns raw force plate and NordBoard exports into coach-ready insight 🏈
ProTech is a full-stack athlete performance dashboard built for UC Davis Football. It tracks Force Plate and NordBoard testing data for every athlete, lets coaches compare performance across time and across teammates, generates AI-written player overviews from that data, and handles athlete photo uploads with automatic, pose-aware cropping.
🌟 Features
- Athlete Cards: Each athlete gets a profile with year-over-year photos and testing history.
- Force Plate & NordBoard Tracking: Metrics are charted over time and can be compared across athletes.
- AI-Generated Player Overviews: A short, coach-facing written summary is generated from an athlete's analytics and cached so it isn't regenerated on every page load.
- Pose-Aware Photo Cropping: Uploaded athlete photos are automatically cropped to a clean, consistent full-body frame.
- Protected Recruitment & Alumni Routes: Supabase authentication gates access to recruitment and alumni data.
- Bulk Data Import: CSV/XLSX exports from testing equipment can be uploaded and parsed directly into the dashboard.
🔑 How It Works
1. 📊 Data Pipeline
Raw exports from force plate and NordBoard testing sessions start as CSV/XLSX files. Python scripts in Data/ clean and normalize these exports, and one-off Node scripts (upload_nordboard_data.js, upload_cmj_data.js) bulk-load the processed data into Supabase. From there, the dashboard's /upload endpoint also accepts CSV/XLS/XLSX directly for ad hoc entry. The backend parses the sheet with xlsx and hands the rows back to the frontend as JSON.
2. 📈 Metrics & Comparison
The frontend fetches an athlete's stored testing data straight from Supabase and renders it with Chart.js/Recharts inside ForcePlate and NordBoard components. An AthleteComparisonChart component lets a coach line up two athletes' metrics side by side to see how someone stacks up against a teammate.
3. 🤖 AI-Generated Player Overviews
Rather than sending raw numbers to an LLM, the frontend first runs its own trend analysis on an athlete's metrics and only sends the computed analytics to the backend. The backend (generateOverview.js) builds a prompt from that analytics summary and calls an LLM (Groq by default, OpenRouter also supported) to produce a short, coach-facing written overview. Each overview is hashed against its input analytics (contextHash) and cached in Supabase, so the same overview isn't regenerated, and re-billed, every time the page loads. A skipCache flag lets a coach force a fresh regeneration.
4. 🖼️ Pose-Aware Photo Cropping
Instead of asking whoever uploads a photo to manually crop it, the backend runs the image through a MoveNet pose-detection model to find body keypoints (shoulders, hips, knees, ankles, and a head anchor from the nose or eyes). From those keypoints it computes an axis-aligned bounding box, using ankle position for the bottom edge, a head-anchor-based estimate for the top, and shoulder/elbow/hip/knee spread for the sides, pads it slightly, and crops the image with Sharp. If the model can't find a confident full-body pose (partial body, bad angle, low confidence), the upload is rejected with a clear "try a clearer full-body photo" message rather than saving a bad crop. Successful uploads are stored in Supabase at /<athleteId>/<year>.jpg, and any existing photo for that year is archived rather than overwritten.
5. 🔐 Auth & Protected Routes
Supabase handles authentication, and recruitment and alumni pages are wrapped behind a ProtectedRoute component so that sensitive athlete data isn't publicly browsable.
💻 Technology
| Layer | Stack |
|---|---|
| Frontend | React 19, Vite, Tailwind CSS, Radix UI, Chart.js / Recharts |
| Backend | Express (Node.js) |
| Database & Storage | Supabase (auth, athlete data, image storage, LLM overview cache) |
| AI | Groq (default) / OpenRouter for player overview generation |
| Computer Vision | TensorFlow.js + MoveNet (pose detection), Sharp (image cropping) |
| Data Tooling | Python and Node scripts for CSV/XLSX cleaning and bulk uploads |
Deployment: Frontend on Vercel, backend on Render.
🤝 Contributing
- Project Manager: Sachin Venkat
- Project Members: Munneth Gill, Devin Sidhu, Jessica Ting, Yuvi Riyar, Advik Gupta
🎯 Areas of Improvement
- Automated Data Ingestion: Reduce reliance on manual CSV/XLSX uploads by connecting directly to force plate and NordBoard export pipelines.
- Expanded Metrics: Bring in additional testing modalities beyond force plate and NordBoard as the program's data collection grows.
- Historical Trend Detection: Let the AI-generated overviews flag multi-season trends, not just a single testing snapshot.
- Mobile-Friendly Views: Optimize the dashboard for coaches reviewing data from the field or weight room.