Designing Orange's Service Management Platform: Architecture First

When I started at Orange in January 2020, I wasn't just joining as a developer—I was brought in to architect the entire frontend for their service management platform. This was a greenfield project, and the decisions I made would affect the team for years to come.

The Requirements

Orange needed a comprehensive platform where customers could: - View their consumption (data, calls, messages) - Manage their bills and payment methods - Get support and troubleshoot issues - Manage their account and services

Millions of Orange customers would eventually use this platform. No pressure, right?

Architecture Decisions

I started with the fundamentals:

1. Module Structure I designed a modular architecture where each major feature (billing, consumption, support) was its own lazy-loaded module. This kept bundles small and load times fast.

2. State Management For state, we used a Redux-style pattern with NgRx. Every state change was traceable, making debugging easier and time-travel debugging possible during development.

3. API Layer I created a comprehensive service layer that abstracted API communication. This made it easy to mock APIs during development and swap endpoints between environments.

The Component Library

From day one, I built a reusable component library: - Buttons, inputs, cards—all the basics - Complex components like consumption charts - Specialized widgets for bill visualization - Mobile-responsive by default

Every component had: - Unit tests - Storybook documentation - Accessibility considerations - TypeScript interfaces

Angular 10 Features

We leveraged Angular 10's strengths: - Strict mode for better type safety - Improved tree-shaking for smaller bundles - Enhanced template diagnostics - Better performance with differential loading

The Backend Side

I also contributed to the NodeJS backend: - RESTful APIs using Express - MongoDB for flexible data storage - JWT authentication - Rate limiting and security middleware

Cloud-Native on GCP

We deployed on Google Cloud Platform, using: - Kubernetes for container orchestration - Docker for containerization - Cloud Load Balancing for traffic distribution - Cloud Storage for static assets

CI/CD with GitLab

I set up comprehensive GitLab CI pipelines: - Lint checks on every commit - Unit tests that had to pass - E2E tests in staging - Automatic deployment to development - Manual approval for production

Docker Everything

Every environment was Dockerized: - Development containers with hot reload - Testing containers with headless browsers - Production containers optimized for size

This ensured consistency—if it worked on my machine, it worked everywhere.

Documentation Culture

I established documentation as a first-class concern. Every architectural decision was documented in Confluence: - Architecture diagrams - Component documentation - API specifications - Deployment procedures - Troubleshooting guides

Team Collaboration

Working in Scrum with a Product Owner, 4 developers, and 2 testers, I learned the importance of: - Clear communication about technical decisions - Involving the team in architecture discussions - Pair programming for knowledge transfer - Code reviews that teach, not just critique

The Challenges

Not everything was smooth: - Integrating with legacy Orange systems required creative adapters - Performance optimization for users on slower connections - Accessibility requirements were strict (as they should be) - Security reviews caught issues we had to address

The Wins

But we overcame them: - Lazy loading reduced initial load time by 60% - Service workers enabled offline viewing of bills - Responsive design worked beautifully on all devices - Accessibility audit passed with flying colors

What I'm Most Proud Of

The architecture I designed scaled. As the team grew and features were added, the modular structure held up. New developers could onboard quickly because the patterns were consistent. Tests caught bugs before users did.

Key Lessons

- Invest time in architecture upfront—it pays dividends - Documentation isn't optional for sustainable projects - Cloud-native design makes scaling easier - CI/CD isn't overhead—it's insurance - Good architecture enables good development

The Impact

The platform launched successfully, serving millions of Orange customers. The architecture I designed became the foundation for future Orange web applications. Sometimes, the best code is the code that makes other developers' jobs easier.