ABL Configuration App

ABL is a German manufacturer of electric vehicle charging infrastructure, producing wallboxes and charging stations for home and commercial use. The Configuration App enables installers and end users to set up, configure, and manage ABL charging stations via WiFi and Bluetooth connectivity.

Project Overview

As the primary developer, I built and maintained the ABL Configuration App from its early stages. The app communicates directly with ABL wallboxes over local WiFi networks and Bluetooth, enabling device setup, firmware updates, network configuration, and system management. Over 1,300+ commits spanning multiple years of development, including React Native upgrades and continuous feature additions.

Key Contributions

Device Communication

Implemented the core communication layer for connecting to ABL wallboxes via WiFi Access Point mode and local network connections. Built robust connection handling with automatic reconnection, timeout management, and error recovery. The app runs a local HTTP server to facilitate device communication.

QR Code Scanning

Integrated camera-based QR code scanning using Vision Camera for device discovery and onboarding. Implemented barcode detection, handled device-specific camera issues on Samsung devices, and added support for ultrawide camera lenses. Built manual input fallback for cases where scanning isn't possible.

Firmware Updates

Built the firmware update system allowing users to update their wallbox firmware over-the-air. Implemented update progress tracking, error handling for stuck updates, and proper device state management during the update process.

Network Configuration

Developed comprehensive network setup flows including WiFi configuration, LTE/mobile data setup, and Ethernet (LAN) connectivity. Implemented WiFi password management, network switching operations, and proper handling of different connection scenarios (AP mode, LAN, extender).

Controller & Extender Management

Built the system for managing controller devices and their associated extenders (satellite charging points). Implemented device grouping, extender discovery via mDNS, and the workflow for adding extenders to controller groups over LAN connections.

Multi-language Support

Implemented internationalization using i18next with support for German, English, French, Spanish, Italian, and Dutch. Integrated with Lokalise for translation management, including upload and download scripts for keeping translations in sync.

State Management

Built the application state architecture using MobX for reactive state management. Implemented stores for device state, controller configuration, connection status, and user preferences. Added React Query for server state management and caching.

UI Components

Developed the component library using NativeWind (Tailwind CSS for React Native). Built reusable components including custom dropdown menus, loading overlays, modal dialogs, and form inputs with React Hook Form integration.

Error Tracking & Analytics

Integrated Sentry for crash reporting and error tracking with session replay capabilities. Added Mixpanel for analytics to track user behavior and connection attempts. Implemented proper error context and tagging for searchable error logs.

React Native Upgrades

Performed multiple React Native version upgrades throughout the project lifecycle (up to RN 0.75). Handled breaking changes, updated native dependencies, fixed Xcode 15 build issues, and maintained compatibility with the latest iOS and Android requirements.