Barmer App - Bonus Modul
IBM iX / Barmer
Die Barmer App ist die offizielle Mobile-App von Barmer, einer der größten gesetzlichen Krankenkassen Deutschlands. Das Bonus Modul belohnt Mitglieder für gesunde Gewohnheiten und Vorsorge. Mitglieder können Geldprämien erhalten, indem sie Gesundheitsaktivitäten wie Impfungen, Check-ups, Sportvereinsmitgliedschaften und mehr dokumentieren. Die Bonus-Funktion steht auch als eigenständige Web-App zur Verfügung.
Projektüberblick
Als Senior Frontend Developer habe ich über 230 Commits im Bonus Modul geliefert, über die React Native Mobile-App, die React Web-App und Shared Packages hinweg. Das Projekt ist als Monorepo organisiert, mit separaten Apps für Mobile (iOS/Android) und Web, die Business Logic und UI-Komponenten über interne Packages teilen.
Wichtige Beiträge
Beleg-Upload Flow
Kompletten Workflow für Beleg-Uploads umgesetzt, inklusive Foto-Upload und Validierung. Enthalten sind Dateigrößen-Validierung (max 16MB), Dokumentenlimits und sauberes Error Handling mit userfreundlichem Feedback.
Timeline & Activity Tracking
Timeline Interface für Bonus-Aktivitäten, Status und Auszahlungsverlauf gebaut. Detailansichten mit Status-Chips, Last-Updated Indikatoren und korrekter Back Navigation über Web und Mobile implementiert.
Alert & Notification System
Alert-System (B300 Alerts) für wichtige Nutzerkommunikation entwickelt, inklusive Bestätigungen, Ablehnungen und Infomeldungen. Dismissible Hints mit Accessibility-Support umgesetzt.
Accessibility Improvements
Component Accessibility verbessert, inklusive korrekter Role Ansagen für Buttons, Selects und Bottom Sheets. Probleme behoben, bei denen interaktive Elemente ihren Zweck nicht korrekt an Screenreader kommunizierten.
UI Component Fixes
Zahlreiche UI Issues behoben, u.a. Header Truncation im Dashboard, Landscape Scrolling für Error Messages, konsistente Input Abstände, Dialog Scrollbarkeit auf iOS und korrektes Labeling für Drei-Punkte-Menüs.
Opt-Out & Settings
Opt-Out Flow für Nutzer implementiert, die das Bonusprogramm verlassen möchten, inklusive Screen Layouts, Confirmation Dialogs und Backend- Integration.
Dynamic Content
Dynamische Hint-Texte gebaut, die sich je Bonuszeitraum und Submission Status anpassen. Nutzer erhalten so stets relevante Infos zu ihrem Bonusstatus und möglichen Aktionen.
Technologie-Stack
Mobile
- React Native
- TypeScript
- Barmer Puls UI
- Inversify (DI)
Web
- React
- TypeScript
- Barmer Puls UI
- Shared Components
Architecture
- Lerna Monorepo
- Yarn Workspaces
- Nx
- Shared Packages
Testing
- Jest
- React Testing Library
- ESLint
- Husky