Orpak – CMS (Fuel Retail & Fleet Management)

Frontend Developer · 2017 · 1 year · 10 people · 6 min read

Delivered a highly interactive, enterprise-grade CMS for a global fuel retail leader — complete with a custom CSS design system, multi-lingual and RTL support, multi-theme architecture, and a fully responsive layout serving fleet operators and gas station networks across multiple countries

Overview

Built Orpak's core CMS platform — a feature-rich, data-intensive web application used by fuel retail operators and commercial fleet managers worldwide. The system enables businesses to monitor gas station networks, track fuel usage, manage loyalty programs, and operate fuel card systems, all from a single, customizable dashboard. Developed in Angular with a team of 10 frontend engineers, with a strong emphasis on scalability, global accessibility, and design consistency.

Problem

Orpak's existing tooling was fragmented across regions and business units, making it difficult for operators to get a unified view of their fuel retail and fleet operations. The platform needed to serve a global customer base — spanning languages, text directions, and brand identities — while remaining performant and maintainable at scale. There was no unified frontend design language, leading to inconsistent UI patterns that slowed development and created a disjointed operator experience. Additionally, enterprise clients required white-label theming to align the platform with their own brand standards.

Constraints

  • Must support multiple languages and right-to-left (RTL) text direction for global markets
  • White-label theming required for enterprise clients with distinct brand identities
  • Highly interactive dashboard with complex data visualizations must remain performant on standard hardware
  • Coordinating frontend consistency across a team of 10 developers without a pre-existing design system
  • Responsive layout must serve both desktop workstations and field tablets used at fuel stations

Approach

Worked within a 10-member frontend team using Angular, establishing shared standards through a purpose-built Orpak CSS library and style guide before feature development began. This front-loaded investment in design infrastructure paid dividends throughout the project — reducing UI inconsistencies and accelerating component development. Implemented i18n using Angular's built-in internationalization support, extended with custom RTL layout logic for Arabic and Hebrew markets. Multi-theme support was achieved through a CSS custom properties architecture, allowing runtime theme switching without code changes. Maintained regular touchpoints with the product owner to align on priorities and demo incremental progress.

Key Decisions

Build an internal Orpak CSS library and style guide before feature development

Reasoning:

With 10 frontend developers working in parallel, inconsistent styling decisions would compound quickly and become expensive to reconcile later. Establishing a shared CSS library and documented style guide upfront ensured every developer worked from the same visual language, reducing review overhead and producing a cohesive UI without constant design arbitration.

Alternatives considered:
  • Use Angular Material as-is with no custom system
  • Allow each developer to style independently and consolidate later
  • Adopt a third-party design system like PrimeNG or Bootstrap

CSS custom properties for multi-theme architecture

Reasoning:

Runtime theme switching without recompilation was a hard requirement for white-label clients. CSS custom properties allow theme variables to be overridden at the root level, enabling instant brand switching without rebuilding the application. This approach also kept theme logic out of component files, maintaining clean separation of concerns.

Alternatives considered:
  • SCSS variable-based theming (compile-time only)
  • Angular Material theming with multiple compiled stylesheets
  • Inline style overrides per client configuration

Angular i18n with custom RTL layout layer

Reasoning:

Angular's built-in i18n tooling handled translation management well, but RTL support required additional layout logic — mirroring flex directions, adjusting icon alignment, and flipping positional utilities. Building a thin RTL layer on top of the base stylesheet allowed RTL behaviour to be toggled via a single attribute on the root element, keeping component templates clean and direction-agnostic.

Alternatives considered:
  • Separate RTL stylesheet maintained in parallel
  • Third-party RTL library (e.g. rtlcss)
  • Manual per-component RTL overrides

Tech Stack

  • Angular
  • TypeScript
  • RxJS
  • SCSS
  • CSS Custom Properties
  • CSS Logical Properties
  • Angular i18n
  • Angular Material
  • Karma
  • Jasmine

Result & Impact

  • 10 frontend developers
    Team Coordinated
  • Multi-region with RTL
    Markets Supported
  • Multiple white-label themes
    Theme Variants
  • Full app CSS library & style guide
    Design Coverage

The Orpak CMS became the operational backbone for fuel retail and fleet clients across multiple geographies. The CSS library and style guide established during this project reduced UI inconsistencies across the team and served as a long-term reference for future development. Multi-lingual and RTL support unlocked markets in the Middle East and Europe, while multi-theme architecture gave enterprise clients the brand ownership they required. The responsive layout extended the platform's reach from desktop operations centres to field tablets at fuel stations.

Learnings

  • Investing in a shared design system before feature development pays compounding benefits on large teams — it is not overhead, it is infrastructure
  • RTL support is not a last-mile concern — it needs to be factored into layout architecture from day one to avoid costly retrofits
  • CSS custom properties are the right tool for runtime theming; compile-time solutions do not meet the flexibility demands of white-label enterprise products
  • Product owner alignment through regular demos builds trust and reduces the risk of late-stage scope mismatches
  • On a 10-person frontend team, code review standards and shared conventions matter more than individual technical skill — consistency is a multiplier
  • Complex, data-heavy dashboards require deliberate performance budgeting — change detection strategy and lazy loading must be planned, not patched

Design System & CSS Architecture

Before a single feature was built, the team established the visual and structural foundation of the platform:

  • Orpak CSS library — a comprehensive internal component library covering typography, spacing, color tokens, form elements, data tables, and dashboard widgets
  • Documented style guide defining naming conventions, layout patterns, and component usage rules adopted across all 10 developers
  • SCSS architecture using a layered structure (base → tokens → components → utilities) for maintainability at scale
  • CSS custom properties enabling runtime theme switching without application recompilation
  • Reusable dashboard components — stat cards, KPI tiles, data grids, and chart containers built once and consumed consistently across the platform

Multi-Lingual & Multi-Directional Support

Built for a truly global operator base with full internationalisation:

  • Angular i18n integration supporting multiple languages with locale-aware number, date, and currency formatting
  • RTL layout layer enabling seamless right-to-left rendering for Arabic and Hebrew markets via a single root-level attribute
  • Direction-agnostic component design with flex and grid layouts that mirror correctly without per-component overrides
  • Locale-specific formatting for fuel volumes, currency symbols, and date conventions across regional deployments

Multi-Theme & Responsive Interface

Delivered an enterprise-ready UI that adapts to both brand and device:

  • White-label theming system allowing enterprise clients to apply their brand colors, typography, and logo with zero code changes
  • Multiple pre-built theme variants covering light, dark, and client-specific configurations
  • Fully responsive layout optimised for large desktop workstations in operations centres and field tablets at fuel station forecourts
  • Accessible UI patterns ensuring operability across input methods and meeting baseline WCAG contrast standards

Fleet & Fuel Retail Operations Dashboard

The CMS hub for day-to-day fuel retail and fleet management:

  • Gas station network monitoring with live status indicators for each location in the operator’s network
  • Fuel usage analytics tracking consumption trends by vehicle, driver, and fleet segment
  • Fuel card management with transaction history, card issuance, and spend controls
  • Loyalty program integration linking vehicle identification to customer reward profiles for personalised experiences
  • Route optimisation insights surfacing efficiency opportunities based on historical trip and fuel data
  • Convenience store management tools for inventory, promotions, and forecourt operations
All projects