Fan Fuel

Inspiration

Superstitious beliefs are very strong within the sports community. From wearing lucky socks while watching the game or firmly believing that your team will lose the match if you stand up in the middle of the game.

I had a similar experience last year during my final exam season when my cricket team was playing very badly. I made a bet with myself that if I study well for the next 4 exams, then my team will win. Surprisingly my team won the next 4 matches! Although in the end we lost in the playoffs, I realized how motivating a "silly" superstition can be. That's why I decided to use this experience to build Fan Fuel! With this web app you sports fans can increase their motivation to workout.

What it does

Fan Fuel is a motivation and exercise tracking tool that adds a unique twist to your fitness journey. This web app allows you to choose your favorite sports team and boost their "luck" by completing workouts.

On the dashboard page, you can track how much luck you've raised for your team ahead of a specific match, visualized through the Luck Meter. A countdown timer above the meter shows how much time remains until game day, creating a sense of urgency and helping you stay motivated. Furthermore, you can create workout goals in categories like strength, cardio, or flexibility.

Every time you complete a workout goal your team will gain points in the Luck Meter. This will give your team that extra boost of luck in the next match. Train hard because your favorite sports team's victory is on the line!

How I built it

I built this web app using Vite + React with TypeScript to ensure a fast and modern development environment that is scalable. For styling, I used Tailwind CSS, which helped me design a clean and responsive user interface that will help the user navigate my web app.

To fetch and format data on soccer match schedules, I integrated a third-party sports API. I used Python to handle the data processing and formatting before making it accessible to the front end.

For backend services, I chose Firebase for both authentication and cloud database support. This allowed me to implement a secure and fast login system with proper user authentication. I was able to securely store user data such as their favorite team and workout data in Firebase Firestore. This enabled real-time read/write access from the web app. This seamless integration allows users to track their workouts and see their impact on their team’s "luck" in real time.

Challenges we ran into

Two of the main challenges I faced were working with a cloud database and designing the user interface.

1. Firebase Database Structure & Rules: I encountered several issues ensuring the Firebase rules were properly configured to allow safe and specific read/write access (for example, when a user completes a workout rep). Additionally, I accidentally created two separate collections (users and userPreferences), which caused confusion and made data access more complicated due to the information being split across collections. I was eventually able to resolve these issues by watching tutorials and gaining a better understanding of how cloud databases work. I also learned how to make more effective API calls using custom React hooks, which helped clean up the data flow and improve my code.

2. UI Design & Layout: Designing a clean and intuitive UI also involved a lot of trial and error. However, my prior experience with Tailwind CSS allowed me to iterate quickly and efficiently. I was ultimately able to create a layout that clearly communicates my web app’s purpose and enhances the user experience.

What we learned

Throughout the creation of this project, I gained a lot of valuable experience in both frontend and backend development, as well as in overall app architecture.

I developed a better understanding of Firebase, particularly in setting up secure database rules, managing authentication, and structuring data collections effectively. I learned the importance of planning a clean and scalable database structure early on to avoid complications later. I improved in my ability to work with third-party APIs by using Python to fetch and format soccer match data. Working with Vite, React, and TypeScript helped me write more modular and maintainable code. I was also able to learn how to do browser routing and fetching data from the front-end. I improved my ability to design clean, responsive interfaces using Tailwind CSS.

Most importantly, I improved my problem solving abilities. Whether it was fixing database bugs or tweaking the UI, I am now more comfortable with debugging, reading documentation, and learning from tutorials when I am stuck.

What's next for Fan Fuel

1. Social Workout Groups: I plan to introduce a social component where users can create or join workout groups with friends, all supporting the same team. This will add a layer of peer-to-peer motivation and accountability. You don't want to let your sports team and your friends down by missing your goals or failing to raise enough luck. This feature could also include leaderboards or shared milestones to boost user engagement.

2. Fitness Platform Integrations: To make the workout logging process easier and more seamless, I want to integrate with popular fitness platforms like Strava, Fitbit, and Apple Watch Workouts. This would allow data such as step counts, calories burned, and logged workouts to automatically sync with Fan Fuel making it easier to use the web app and raise luck.

3. Support for More Sports Leagues: Fan Fuel is designed to be highly scalable to other sports since all the structures are already in place. I plan to expand additional sports leagues across various regions and countries. This will allow more fans to participate regardless of their favorite sport.

Built With

• api
• firebase-authentication
• firebase-hosting
• firesbase
• firestore-cloud-database
• python
• react
• tailwindcss
• typescript
• vite