What it does
This project allows users to watch gameplay videos, scrub through frames, and create custom GIFs from selected moments.
How we built it
We developed the frontend using React and Expo, and built the backend with Python and Flask for the server. We also utilized mplsoccer to access soccer-specific data.
Challenges we ran into
One challenge we faced was saving and downloading the frames generated from the data. We discovered a conflict with Matplotlib, which we were able to resolve. Another problem that we ran into was integrating the frontend with the backend, as we initially struggled to transfer data from the backend to our React webpage. This was resolved using Flask CORS.
Accomplishments that we're proud of
We implemented caching and optimized frame loading, reducing processing time by up to 40%. We also successfully achieved full integration between the frontend and backend. Beyond programming, we improved our efficiency by clearly defining tasks and applying lessons learned from previous hackathons.
What we learned
Through this project, we gained experience in visualizing data and in building servers with integrated frontend-backend workflows.
What's next for Video Analysis: Soccer
Future improvements include adding overlay tools that allow users to annotate and mark up video frames for tactical analysis.
Built With
- expo-asset
- expo-image
- expo.io
- flask
- gif.js
- javascript
- kloppy
- matplotlib
- mplsoccer
- node.js
- python
- react
- typescript
Log in or sign up for Devpost to join the conversation.