Deyan Koba

Mobile case study · 2020–2023

S4Energia

A cross-platform self-service app that gives energy customers one place to manage electricity and gas contracts, bills, consumption, and meter readings.

Angular 17 · Ionic 7 · Capacitor 5 · iOS · Android

screenshot

The product

Everyday energy services, made mobile

I developed the original S4Energia application between September and October 2020. It was my first Ionic project and my first Angular application released to production, with a single codebase serving both Android and iOS customers.

The app connects to services maintained by Trieste Innovation Technology and turns account, supply, billing, and consumption data into focused mobile journeys. In 2023, I migrated the project's native layer to Capacitor and modernized it with Angular 17, Ionic 7, standalone components, and lazy-loaded routes.

Product views

The interface organizes complex utility data into a small set of direct, task-oriented journeys designed for everyday use on a phone.

S4Energia dashboard for electricity, gas, and customer details
Account dashboardElectricity, gas, bills, and personal data in one place.
Electricity consumption chart divided into tariff bands
Consumption insightsUsage history visualized by month and tariff band.
Energy bills with payment status and PDF download actions
Bill managementPayment status, deadlines, and document downloads.
Guided gas meter self-reading interface
Gas meter readingA guided input and confirmation flow for readings.

Engineering scope

From customer journeys to native delivery

01

Customer experience

I implemented authentication, registration and GDPR acceptance, customer details, and dashboards that adapt to each user’s electricity and gas supplies. Customers with multiple POD or PDR contracts can select and manage the right service from the same account.

  • Authentication
  • GDPR flows
  • Multi-contract
  • Dynamic branding
02

Energy workflows

The mobile interface brings together paginated bill history and PDF downloads, electricity and gas consumption charts, contract data, and a guided gas meter-reading flow with validation, confirmation, and feedback states.

  • Chart.js
  • Infinite scroll
  • PDF bills
  • Meter readings
03

API & application state

I integrated the mobile client with authenticated HTTP services for account data, invoices, consumption, app configuration, and readings. Ionic Storage preserves session and supply context, while reactive configuration streams allow backend-managed logos and onboarding artwork.

  • Capacitor HTTP
  • RxJS
  • Ionic Storage
  • REST APIs
04

Native platform delivery

Capacitor provides the native bridge for iOS and Android builds, Firebase push-token registration, status bar and splash-screen behavior, and clipboard access. I also prepared platform-specific app icons, launch assets, and native project configuration for release.

  • Capacitor 5
  • Push notifications
  • Android
  • iOS

What this project represents

A production app evolved without losing its purpose

S4Energia marks both an early production milestone in my Angular journey and the kind of modernization work that followed: preserving established customer flows while renewing the architecture, native runtime, and delivery path beneath them.