Showcase: LEAGUES - The immersive football viewing app

LEAGUES is revolutionizing how football fans experience the beautiful game through their innovative mobile app. Built with Capacitor, this app brings the stadium atmosphere directly to your pocket with immersive storytelling and live streaming capabilities.

Introduction

LEAGUES is a cutting-edge football app developed by LEAGUES GmbH in Stuttgart, Germany, that transforms how fans consume football content. Built with Capacitor, this cross-platform application delivers an immersive experience that makes users feel like they're right in the stadium, even when watching from home.

The app focuses on telling football stories through short portrait format videos, highlighting the most important moments of matches with professional production quality. What sets LEAGUES apart is its unique approach to football content delivery - combining live streaming with curated highlights in an easily digestible format.

Features

LEAGUES offers a comprehensive suite of features designed to enhance the football viewing experience. At its core, the app provides live streaming capabilities for Regionalliga Südwest and West matches through their Match Pass subscription service. Users can follow games in real-time with the live audiovisual match ticker, which delivers updates as they happen, complete with goal replays and highlights presented in an engaging "Full-Story" format.

The app excels at storytelling through short portrait format videos that showcase key match highlights, making it easy for fans to catch up on the most important moments. When new content becomes available, users receive push notifications to stay connected to the action. Beyond match coverage, LEAGUES features exclusive interviews with players and club officials, providing insider perspectives that bring fans closer to their favorite teams.

The user experience is designed for seamless navigation through intuitive swipe gestures, allowing users to effortlessly browse through content. The app's high-performance infinity scrolling system handles multiple video elements smoothly, ensuring optimal playback even with heavy video content. Multi-device support means fans can enjoy the experience whether they're on mobile, tablet, or TV, while the redesigned timeline focuses on goals, highlights, and videos for faster content delivery.

Monetization

LEAGUES operates on a freemium model with their Match Pass subscription service. While the app is free to download and use for basic features, users can upgrade to Match Pass to access live streaming of Regionalliga Südwest matches. Additionally, some features are only accessible to members of specific clubs, creating exclusive content for club communities.

The company has chosen not to implement traditional in-app purchases, instead focusing on subscription-based revenue through their streaming service and club-specific access. This model aligns well with their content strategy and provides a sustainable revenue stream while keeping the core app experience free.

Development

LEAGUES leverages a modern technology stack built around web technologies:

• Capacitor for cross-platform mobile development
• Vue.js 3 with TypeScript for the frontend framework
• Ionic Framework for UI components
• Tailwind CSS for styling
• Firebase for authentication and real-time database
• Vite for build tooling

The team has also leveraged a wide range of Capacitor and Cordova plugins to enhance the app's functionality, including:

@awesome-cordova-plugins/core
@awesome-cordova-plugins/social-sharing
@awesome-cordova-plugins/vibration
@capacitor/android
@capacitor/app
@capacitor/browser
@capacitor/clipboard
@capacitor/core
@capacitor/device
@capacitor/filesystem
@capacitor/haptics
@capacitor/ios
@capacitor/keyboard
@capacitor/local-notifications
@capacitor/network
@capacitor/push-notifications
@capacitor/share
@capacitor/splash-screen
@capacitor/status-bar
capacitor-blob-writer
capacitor-plugin-app-tracking-transparency
cordova-plugin-vibration

The app was developed by a lean team of just 2 people over 4 years, who also worked on other parts of the product including the website and HLS streaming infrastructure, demonstrating the efficiency that can be achieved with modern web technologies and Capacitor. Peter Wingen, the CPO, leads the development efforts at LEAGUES GmbH, showcasing how small teams can build sophisticated applications when using the right tools and approaches.

The development team faced several unique technical challenges during the project. Creating smooth infinity scrolling with multiple video elements required careful optimization, leading the team to implement a video player that is constantly repositioned via position:absolute and only loads new videos when needed. This approach ensures smooth performance even with heavy video content, which is crucial for the app's core functionality. Additionally, maintaining a consistent experience across iOS and Android while leveraging native features required careful planning and testing to ensure users get the same high-quality experience regardless of their platform.

Q&A

Q: Why did you choose Capacitor for LEAGUES?

Peter Wingen (CPO): "Capacitor is easy to integrate and significantly enhances the modern web and app development landscape. Our development team works with TypeScript and VueJS – by using Capacitor, we can seamlessly bring existing web technologies to mobile platforms. This saves development effort, reduces technical complexity, and allows us to be productive quickly."

Q: What's your satisfaction level with Capacitor?

Peter: "We're very happy with Capacitor - I'd rate it 10/10. The ability to use our existing web development skills while still accessing native mobile features has been game-changing for our small team."

Q: What would you improve about Capacitor?

Peter: "I would improve the debugging experience for native functionality, especially when working with custom plugins. While the overall developer experience is great, troubleshooting native issues across platforms can sometimes be time-consuming and less transparent compared to web debugging."

Q: What's your most valuable tip for Capacitor developers?

Peter: "Treat your web codebase as the core of your application and use Capacitor primarily as a thin bridge to native features. Keep your business logic and UI within your TypeScript/VueJS app, and isolate native code in well-defined plugins. This approach keeps your app maintainable, testable, and future-proof across platforms."

Q: What are your future plans for LEAGUES?

Peter: "We're focusing on adding more interactivity to the app. Our goal is to make the football viewing experience even more engaging and immersive for our users."

Conclusion

LEAGUES exemplifies how Capacitor can empower small teams to build sophisticated, cross-platform applications that compete with native apps. By leveraging web technologies like Vue.js and TypeScript, the team at LEAGUES GmbH has created an app that delivers premium football content to thousands of users across iOS and Android.

The app's success demonstrates that with the right approach and technology choices, even a two-person team can build and maintain a feature-rich mobile application that serves a passionate user base. LEAGUES proves that Capacitor isn't just about code sharing - it's about enabling teams to focus on what matters most: creating great user experiences.

Download LEAGUES on the App Store or Google Play Store to experience the future of football storytelling.

You want to showcase your Capacitor app? Reach out to us at support@capawesome.io. We would love to feature your app in our next showcase post!