16hawks.com

A website used to to give my volleyball players feedback on their gameplay

Inspiration

    During my senior year of college, I served as an assistant coach for a volleyball team. Early in the season, while studying abroad in Manchester, England, I missed their first tournament. A parent recorded the matches and uploaded them to YouTube, which allowed me to watch and assess the team's skill level. As I watched, I noticed numerous moments I wanted to discuss with the players. However, I knew I needed a practical way to share this feedback. Writing a document with timestamps felt too cumbersome—and let’s face it, players weren’t going to read through that. That’s when I decided to create a website where the coaching staff could leave notes directly tied to specific moments in the videos.

How I built this project

    Time was of the essence for this project. Once I committed to building the website, I got to work immediately. Based on prior experience with another project, I knew I would need a database. I chose MySQL because I wanted to gain more experience with it. I started by designing the database, which became the foundation for the rest of the project. The Notes table stored timestamps, player references, and game IDs, allowing for flexible queries by game or player. Separate Player and Game tables managed player details (like names and numbers) and game information (such as video URLs and titles)
    With the database in place, I turned to the front end. My goal was simplicity and functionality, so I kept the development process efficient and focused. Using Bootstrap, AJAX, HTML, CSS, and JavaScript, I quickly built a minimalist interface. Looking back, I realize that with the skills I’ve gained since then, I could have implemented the front end with Svelte and TailwindCSS for a more modern and polished experience. But at the time, I prioritized getting the product out quickly, and it worked. The website’s core functionality was intuitive and effective. Players and coaches could select a game and player name, view the corresponding video, and see a list of notes alongside it. Clicking on a note skipped the video to the relevant timestamp, streamlining the feedback process.
    The most challenging part of this project was hosting the website. It was my first time navigating this process, and I decided to use an AWS EC2 instance. AWS was unfamiliar territory for me, but I saw it as an opportunity to learn. An EC2 instance seemed like a logical starting point—it was free for the first year and offered the flexibility I needed. However, setting it up required a lot of trial and error. I spent hours researching how to host a public website and attach a domain to the instance. Ultimately, I followed an online guide step-by-step to get everything up and running. This was the final piece of the puzzle, and it marked a significant milestone in my development journey.

Conclusion

The players benefited immensely from this project. They received detailed feedback tied directly to their gameplay—feedback that would have been impossible to deliver during matches. For me, this project was equally valuable. It introduced me to AWS, taught me how to spin up an EC2 instance, and gave me experience developing a product under tight time constraints. I learned to lean on the tools I already knew to quickly deliver a functional solution, which boosted my confidence in my ability to build practical, useful tools. This project opened the door to future endeavors, showing me that with determination and creativity, I could bring my ideas to life.

Technologies

  • HTML

  • CSS

  • JavaScript

  • Python

  • Flask

  • AWS (EC2)

  • MySQL

  • Bootstrap

  • AJAX

  • Ubuntu