!The Problem: The Lost Geography of the Global Game
Existing sports apps reduce the beautiful game to endless, contextless lists. When 50+ matches are happening simultaneously—from a 3. Liga match in Slovakia to a Division One game in Ghana—a standard list completely strips away the geographic magic and scale of the sport. Furthermore, fans are increasingly forced to wade through gambling ads and subscription paywalls just to check live scores.
The Solution: An End-to-End Product Vision
Futbolis.live reintroduces spatial awareness to live sports. By plotting matches dynamically on a 3D globe, the platform restores the sense that football is a living, worldwide phenomenon.
As a design engineer, I wanted to prove that a solo creator equipped with AI-enabled tools like v0 (and a lot of Diet Coke) could deliver a fully functional, highly scalable product vision end-to-end. Designed entirely ad-free, it is built in anticipation of the continent-spanning 2026 World Cup.
Engineering Impact: High Scale on a Solo Budget
Surviving API Rate Limits at Scale
Live sports data is expensive. Querying the sports API per user would have incurred thousands of dollars in overage fees or crashed the app immediately.
The $19/Month Fix
I engineered a 60-second server-side caching strategy via Next.js route revalidation (/api/matches). This ensured that whether there was 1 user or 100,000 concurrent users hitting the site during a World Cup match, the architecture only made 1 API call per minute. This allowed me to serve massive global traffic on a base-tier $19/month API plan.
The Geocoding Fallback Chain
The API provides stadium names, but not coordinates. To plot matches accurately, I engineered a multi-layer geocoding fallback system:
Static Cache
Instant lookup for ~500 major stadiums with precise lat/lng.
City-Level Geocoding
Dynamically geocoding the city if the stadium is unknown.
Country Centroid
Defaulting to the country's geographic center.
National Logic
Mapping to the home team's capital for international friendlies.
Visual System & UX: Designing for Data Density
Iterating rapidly, I focused on creating a UI that felt premium, immersive, and highly responsive to real-time data.
Macro to Micro Navigation
The global view features a clean, dark-themed Mapbox UI with a translucent, glassmorphic right sidebar. It allows users to scan global clusters of live games while scrolling through bilingual (English/Spanish) match cards.
Immersive Selected States
Clicking a match initiates a rapid "fly-to" animation, dropping the user right into the host city. I implemented bold, environmental typography (e.g., a massive "Capiata, Paraguay" overlay) to ground the user in the location. The sidebar dynamically shifts from a list view to a deep-dive match view, complete with possession bars, shot statistics, and a timeline of match events (goals, cards).
Desktop: Expanded match view with stats, events timeline, and stadium location
Solving the Clustering Problem
When multiple matches kick off in Europe simultaneously, the map dynamically clusters markers, updating color temperatures as density increases to prevent visual overload.
Mobile-First Rethink
A desktop sidebar fails on mobile. I built a completely independent MobileCarousel component. It uses a bottom-sheet architecture that "snaps" swipeable cards into focus, temporarily hiding other matches to reduce cognitive load, all while the background map dynamically tracks the selected card's location.
Mobile: City label overlay with bottom-sheet match card
Bilingual empty state with peak hours indicator
2026The Roadmap to World Cup 2026
Futbolis is actively evolving. The upcoming roadmap includes:
- Push notifications for real-time goal alerts in followed matches.
- "Follow a team" mode that automatically tracks and fly-to-animates a team's marker.
- Historical Replay to scrub back through a match's timeline visually.