WildCards

Connect to Strava to upgrade your cards!
Trade and battle with friends
View your collection
Visit stadiums to collect cards!
Keep collecting cards to add to your user
View your collection
Pick cards from collection to train!

Inspiration

Our team was inspired by collecting trading cards as children, and would have loved a streamlined, virtual way to collect, trade, and even compete using our cards. WildCards allows people of all ages to collect player cards by venturing out to stadiums and arenas, encouraging both physical activity and community building.

What it does

Our app uses your device’s location to let you unlock new packs of player cards based on the stadiums and arenas you visit. Each pack is tied to where you are, making every location a unique opportunity to grow your collection. As you collect cards, you can upgrade your players by completing workouts through Strava. Then, put your team to the test by competing in battles with friends. Trade cards, build your ultimate roster, and collect them all.

How we built it

WildCards is a web app built to run in an iPhone browser.

The foundation is React + Vite, deployed via Vercel. Every time we pushed to GitHub, Vercel deployed automatically, which meant we could iterate fast and always have a live demo ready.

All the data is stored in Supabase, with player and stadium data web scraped from public sources. We have complete rosters of real NWSL and CBB athletes with their stats, teams, and home stadiums pinned to real latitude and longitude coordinates.

The map itself runs on Leaflet.js with a retro tile visual layer, and we use the browser's native Geolocation API to track user locations in real time. When a user gets within 100 metres of a real stadium, the app gives them the option to open a pack.

For the exercise integration, we used the Strava API. When a user connects their account, any workout logged automatically converts into rating points for your chosen player. One minute of exercise means one point.

The card art, retro design system, and all the game logic were all iterated with Claude as our coding co-pilot throughout the hackathon.

Challenges we ran into

We initially aimed to integrate with smartwatches, specifically through Apple Health. However, we discovered that the HealthKit API is limited to iOS applications, which we had not developed. As a result, we pivoted to using the Strava API, which provides similar functionality in a more accessible way.

Throughout the ideation process, we frequently encountered challenges in determining the right direction and scope for the project. Through thoughtful discussion and collaboration, we were able to find compromises and ultimately bring our shared vision to life.

Accomplishments that we're proud of

We’re proud of building a fully functional, mobile-first experience that blends real-world location with gameplay. The GPS-based pack opening system, powered by a Haversine distance check, successfully ties digital rewards to physical stadium visits, creating a unique and engaging mechanic.

We also implemented a complete social ecosystem, including real-time-feeling trading, a structured best-of-3 battle system with lock-ins, and an ELO ranking system backed by Postgres and server-side logic. Designing and enforcing game rules required careful coordination between the frontend and backend.

Additionally, we’re proud of delivering a polished user experience under a strict time constraint, with features like onboarding flows, animated pack openings, and a notification system, all without requiring users to install an app.

What we learned

We learned how to scope and prioritize features effectively in a fast-paced, collaborative environment. Throughout development, we had to make tradeoffs between ambition and feasibility, ultimately focusing on delivering a cohesive and polished core experience.

On the technical side, we gained experience integrating geolocation into a web application, designing game state systems (such as battles and ELO ranking), and managing consistency between client and server. We also learned the importance of enforcing critical game logic on the backend to prevent client-side exploits.

Finally, we learned to adapt quickly when faced with constraints, such as pivoting from Apple HealthKit to the Strava API, and how to find alternative solutions that still align with our original vision.