-
-
Figma Workflow
-
App Welcome Page
-
App Home Page
-
App Camera Page
-
App Library Page
Inspiration
Ever since 2nd grade, I’ve been a die-hard soccer fan.
The first time I tried to edit and share my own match highlights, I was defeated by the frame-by-frame hunting → timeline alignment → export grind—my excitement fizzled out, and I lost a valuable chance to review my play.
So I teamed up with equally sports-obsessed Hackathon mates, fused my CS background with our love for other sports, and built ClipGoal AI: a one-tap highlight generator that will soon evolve into stats + motion-correction for any ball sport (soccer, basketball, volleyball, …)―putting AI in service of passion.
What it does
| Feature | How it works |
|---|---|
| AI-powered auto-highlighting | Mobile Vision-Camera + YOLO detects ball / goal / key events in real-time |
| Serverless clip assembly | Detection fires a Kafka event → FastAPI trims & stitches clips |
| Highlight library & instant sharing | “Library” tab in the Expo app, vertical scroll browsing, one-tap share |
| Motion analysis & data dashboards | Future: OpenCV / TorchScript pose estimation → heat maps, shot charts |
| Spatial visualisation | Supabase + PostGIS render movement and shot density layers |
How we built it
| Layer | Tech stack | Purpose |
|---|---|---|
| Frontend | React Native · Expo · TypeScript | Cross-platform app; Vision-Camera live stream |
| Model | YOLOv8 (ONNX / TorchScript) | On-device / cloud object detection, highlight trigger |
| Backend | FastAPI · Docker · Kubernetes | Inference API, job orchestration |
| Task queue | Kafka → Celery + Redis | Decouple clipping / thumbnails / uploads |
| Data | GraphQL Gateway · PostgreSQL | Unified API + metadata store |
| Hosting | Supabase (Auth / Storage) | Accounts & media CDN |
Challenges we ran into
After nailing the welcome & home pages, the camera system stalled: reliably spotting a scoring zone across all sports proved tricky. Relying solely on generic algorithms was overkill, so we simplified by classifying sports into “Ground-Sport” vs “Goal-Oriented Sport” buckets, cutting both workflow and algorithmic complexity.
Accomplishments we’re proud of
Under brutal time pressure, we shipped a functional MVP that already meets the highlight-editing and training-video needs of everyday athletes.
What we learned
- The new React Native + Expo build pipeline & live debugging (
npx expo start) - How to write custom Vision-Camera Frame Processor plugins
- First exposure to event-driven design and bringing Expo Camera into production
What’s next for ClipGoal AI
- Full motion-correction mode – AI-powered coaching for amateurs
- Richer data dashboards – player stats & in-game performance visualisation
- More sports support – extend to additional ball sports with custom event rules
Built With
- expo.io
- react-native
- supabase
- typescript
- yolo
