GameOnMaps

Inspiration

The idea for GameOnMaps was born from the classic traveler's regret: the "if only I had known" moment. We were sick of getting home from a trip, only to see a thrilling Formula 1 race, a legendary tennis match, or a local derby on TV that happened just around the corner from where we were staying. GameOnMaps is our answer to that sports fan FOMO (Fear Of Missing Out), ensuring you never again miss a chance to be part of the live action.

What it does

GameOnMaps is a web application for sports-loving travelers. Simply enter your travel destinations and dates, and GameOnMaps presents an interactive map and a curated list of live sporting events happening nearby.

Key features include:

• Smart Event Matching: Intelligently finds events within your travel dates and up to 100km from your destinations.
• Chronological Map: Visualize events on a Google Map with custom, numbered markers that follow your trip's timeline.
• Personalized Itinerary Builder: Add events to a personal "My Events" schedule to build your ultimate sports tour.
• Export & Share: Export your sports itinerary as a text file or share it with friends with a single click.
• Advanced Filtering: Filter events by sport and league to zero in on the action you care about most.

How we built it

We built GameOnMaps in a flash using a modern web stack, kicking things off with Bolt.new for rapid project setup.

• Frontend: React with TypeScript and Vite gave us a fast and type-safe development experience. The UI is built with Tailwind CSS for a clean, responsive design.
• Interactive Mapping: The core map functionality is powered by the Google Maps JavaScript API. We created custom map markers to display event details in a user-friendly way.
• Backend & Data: We used Supabase for our backend, with a serverless Edge Function acting as our API to fetch and serve event data.
• Core Logic: Our secret sauce is a custom event-matching algorithm in TypeScript that uses the Haversine formula to match events to itineraries based on geographic proximity and date ranges.
• Deployment: We used Netlify for continuous deployment, making it incredibly easy to go from a git push to a live site in minutes.

Challenges we ran into

• The Quest for Data: Our biggest hurdle was sourcing a reliable, comprehensive feed of international sports events. Sifting through various APIs was a classic data-wrangling challenge to find a source that could power our global vision.
• The Ticketing Maze: Linking events to a reliable ticketing provider proved to be another puzzle. With no universal ticketing API for sports, especially for lower-tier leagues, we had to get creative in how we directed users to potential ticket sources.
• Taming the Map with State: Juggling the app's state was a major challenge, especially since it directly impacted our interactive map. Keeping itineraries, filtered events, user selections, and map markers in sync required some serious React wizardry to prevent the map from throwing a tantrum. Getting those chronological markers to appear correctly was a huge victory!

Accomplishments that we're proud of

• 11,000+ Events and Counting! We successfully aggregated a massive dataset of over 11,000 sporting events from around the world. This firehose of data is the lifeblood of our app.
• AI-Powered Itinerary Intelligence: We implemented an AI-assisted layer to handle the heavy lifting of processing itinerary uploads and suggesting ticketing options, making the user experience smoother and smarter.
• The "My Events" Itinerary Builder: We love our sleek, modal-based itinerary builder. It lets users curate their list of events and then export or share it, with a premium feel that makes planning fun.
• The Chronological Map Markers: A small detail with a big impact: the event markers on the map are numbered according to your travel itinerary, making it easy to follow your trip's timeline at a glance.
• A Polished and Responsive UI: We didn't just want it to be smart; we wanted it to look sharp. We poured a lot of effort into crafting a polished, responsive UI that looks great on any device.

What we learned

• Big Data is a Big Challenge: We learned that wrangling clean, reliable sports data from across the globe is surprisingly tough. It's a scattered ecosystem that required some serious digital detective work to unify.
• The Ticketing Wild West: We discovered that the global ticketing landscape is chaotic! There's no single source of truth for sports tickets, especially outside of major leagues.
• The Power of Serverless: Using Supabase Edge Functions was a fantastic experience that allowed us to quickly build a robust API without worrying about managing a server.
• It's the Little Things That Matter: We learned that small UI/UX details, like those chronological map markers, can make a huge difference. A clean and intuitive UI is just as important as powerful backend logic.

What's next for GameOnMaps

• The Ultimate Sports Travel Planner: We want GameOnMaps to be the one-stop shop for sports travel. Next up: integrating travel suggestions—like flights and hotels—that align with your curated sports itinerary.
• More Event Sources: We'd love to integrate with more sports data APIs to provide an even wider range of events, from major leagues to local games.
• User Accounts & Saved Trips: Introducing user accounts would allow travelers to save their itineraries and access them from any device.
• Smarter Notifications: We envision a notification system that can alert users when a new event matching their travel plans is announced, so they never miss an opportunity.

Built With

• bolt.new
• google-maps
• google-places
• netlify
• openai
• react
• supabase
• tailwind
• typescript
• vite