Ultimate Team Tracker
Inspiration
As a player on the UTSA Ultimate Frisbee team, I noticed a decline in team competitiveness and spirit. To counteract this, our leadership decided to introduce a ranking system that would foster friendly competition among players and encourage everyone to improve with each practice. However, tracking player metrics using Excel sheets proved to be tedious and unsatisfying—who wants to look at spreadsheets all day?
This realization inspired me to create an application that allows teams to track key metrics without the struggles and pains of using Excel. The goal was to develop a user-friendly platform that brings teams together and revitalizes the competitive spirit.
What it does
Ultimate Tracker is a web application that enables teams to monitor key player metrics in real time. Users can create teams, invite friends or teammates, and join existing teams using an invitation code. Within each team, players can easily track everyone's events and progress through an admin page. All data is stored in a Firestore database, providing teams with immediate access to their metrics and rankings. Team creators can also manage their teams and track their skills and metrics.
How we built it
The application is built using Next.js for the frontend framework, Tailwind CSS for styling, and Clerk for authentication management. Firestore serves as the database to store and synchronize player and team data. This tech stack allows for a seamless and responsive user experience.
Challenges we ran into
During development I found that my main challenge was creating a production level database system that worked with my application. Once I had created my system I then had to learn how to interact with firebase and how the read/write properties worked. This is what took the most time for me and was the most challenging.
Accomplishments that we're proud of
I am proud of how many features I was able to add within the 24 hour window. Currently, there is a home page where users can read about the services that my application provides. I also have authetication enabled through clerk, and if users sign in with a google account it personalizes their dashboard with their name. furthermore, after registering, users can either join a team with an invitation code, or they can create their own team by pressing create team. on the create team page users can create a team and add the different metrics they want to track for each player on that team. This then creates a team with an invitation code that can be shared. As players join the team the team dashboard will populate and show all of the players metrics and rankings according to their score. The team creator can also change and track everyone metrics at /dashboard/admin. within admin creators can also add new players and delete them manually.
As a solo hacker I think that the amount of features I was able to include is awesome, and on top of functionality I was able to create a very visually pleasing ui with tailwindcss.
What we learned
Throughout this project, we learned the importance of creating user-friendly interfaces and the value of real-time data in fostering team engagement. We gained experience integrating various technologies like Next.js, Tailwind CSS, Clerk, and Firestore to build a cohesive application. This project also taught us about the challenges of data management and the necessity of responsive design.
What's next for Ultimate Team Tracker
Moving forward, I plan to add more features to enhance the user experience:
- Advanced Analytics: Provide deeper insights into player performance and team statistics.
- Personalized Profiles: Allow players to customize their profiles and track personal progress over time.
- Mobile Application: Develop a mobile version for on-the-go access and convenience. This is a main feature I want to include in the future because ease of use and access is a main part of my application
My overall goal is to make Ultimate Tracker an amazing software tool for teams looking to boost competitiveness and team spirit.
Built With
- clerk
- css3
- firebase
- firebaseapi
- firestore
- html5
- javascript
- next.js
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.