---
title: "Showcase: LEAGUES - The visual football app"
description: Discover how LEAGUES transformed football storytelling with Capacitor, creating an immersive mobile experience for fans with live streams and highlights.
date: 
  created: 2025-07-27
  updated: 2025-07-27
authors:
  - robingenz
categories:
  - Capacitor
  - Ionic Framework
  - Showcase
---

# Showcase: LEAGUES - The immersive football viewing app

LEAGUES is a football app that tells match stories through short portrait format videos. Built with Capacitor, it combines live streaming with curated highlights and exclusive interviews.

<!-- more -->

## Introduction

[LEAGUES](https://www.leagues.football/){:target="_blank"} is a 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. LEAGUES combines live streaming with curated highlights in an easily digestible format.

<div markdown>
![LEAGUES Screenshot](/blog/showcase-leagues/leagues-1.jpg){ width="220" }
![LEAGUES Screenshot](/blog/showcase-leagues/leagues-2.jpg){ width="220" }
![LEAGUES Screenshot](/blog/showcase-leagues/leagues-3.jpg){ width="220" }
</div>

## Features

LEAGUES provides live streaming 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.

Short portrait format videos showcase key match highlights, and users receive a push notification when new content becomes available. Beyond match coverage, LEAGUES features exclusive interviews with players and club officials.

Users browse the app with swipe gestures. The infinity scrolling system handles multiple video elements smoothly, 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 uses 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 also uses a wide range of Capacitor and Cordova plugins, 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 2 people over 4 years, who also worked on other parts of the product including the website and HLS streaming infrastructure. Peter Wingen, the CPO, leads the development efforts at LEAGUES GmbH.

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. Additionally, keeping the experience consistent across iOS and Android while using native features required careful planning and testing.

## 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."

## Related Posts

- [Showcase: Appreciation Jar — Messages App](./showcase-appreciation-jar.md)
- [Showcase: CostPal - Price tracking app for Costco](./showcase-costpal.md)
- [Showcase: MyBodyTutor — Nutrition Coaching App](./showcase-mybodytutor.md)

## Conclusion

If your team already writes TypeScript for the web, follow Peter's rule: keep business logic and UI in the web app and use Capacitor as a thin bridge, with native code isolated in well-defined plugins. Two developers built LEAGUES for iOS and Android that way while also running the website and the HLS streaming infrastructure.

Before you write a custom plugin, check the plugin list above and the official Capacitor and Cordova plugins for one that already covers the native API you need.

*Download LEAGUES on the [App Store](https://apps.apple.com/us/app/leagues-football/id1572628190){:target="_blank"} or [Google Play Store](https://play.google.com/store/apps/details?id=football.leagues.app){:target="_blank"}.*

**You want to showcase your Capacitor app?** Reach out to us at [support@capawesome.io](mailto:support@capawesome.io). We would love to feature your app in our next showcase post!