Architecting RMC/BFM's IPTV Platform: Where Content Meets Code
When SFR approached me to architect their RMC/BFM IPTV streaming application, I knew this would be a project where performance wasn't just important—it was everything. Streaming video to thousands of concurrent users doesn't tolerate mediocrity.
The Vision
RMC and BFM are major French news and radio networks. The goal: deliver their live content, TV guides, and on-demand programming through a modern, responsive web application. Users expected Netflix-quality UX, and we had to deliver.
Why Angular 13?
We chose Angular 13 for several reasons: - Strong TypeScript support - Robust framework for complex applications - Excellent tooling and ecosystem - Built-in features for performance optimization
But we didn't just use Angular—we built it right.
The NX Monorepo
Early on, I pushed for NX as our monorepo solution. Why? Because we knew we'd have multiple applications (web, mobile web, admin panels) sharing code. NX gave us: - Shared component libraries - Consistent code standards across projects - Powerful code generation - Intelligent build caching
It was a game-changer for our productivity.
The Live TV Module
Building the live TV experience required careful attention to streaming protocols. We used Shaka Player, configuring it for optimal performance across different network conditions. Buffering, bitrate adaptation, error recovery—every detail mattered.
The TV Guide Challenge
A TV guide is deceptively complex. You're displaying schedules across channels and time, handling timezone conversions, dealing with last-minute program changes. We built a reactive system using RxJS that could update the guide in real-time as schedules changed.
Analytics Integration
French media companies take audience measurement seriously. We integrated: - Médiamétrie for official audience measurement - AT Internet for detailed web analytics - Didomi for GDPR-compliant consent management
Each integration required careful implementation to ensure accurate tracking without impacting performance.
SEO with Server-Side Rendering
For content discoverability, we implemented Angular Universal for server-side rendering (SSR). Every page was pre-rendered on the server, making it crawlable by search engines while still providing a rich single-page application experience.
Reactive Programming Everywhere
RxJS became our secret weapon. Every data stream—from API calls to user interactions to real-time schedule updates—was modeled as observables. This gave us powerful composition, error handling, and the ability to cancel operations cleanly.
The Backend
While the frontend got the glory, the NodeJS backend did the heavy lifting: - Proxying streaming protocols - Caching TV guide data in MongoDB - Serving APIs for content metadata - Handling user authentication and preferences
Performance Obsession
We optimized ruthlessly: - Lazy loading for routes - Image optimization and lazy loading - Service workers for offline capability - Bundle size analysis and tree shaking - Memory leak detection and elimination
The SCSS Architecture
We built a comprehensive design system in SCSS, with: - CSS variables for theming - BEM methodology for class naming - Responsive mixins for breakpoints - Animation utilities for smooth transitions
Key Learnings
Building a streaming platform taught me: - Performance is a feature, not an afterthought - Reactive programming shines in real-time applications - Monorepos with NX scale better than multiple repos - SSR is crucial for content-heavy applications - Never underestimate the complexity of TV scheduling
The Result
We delivered a platform that handled thousands of concurrent streams smoothly. Users could watch live TV, browse guides, access on-demand content, all with a responsive, polished interface. The analytics integrations provided valuable insights, and SEO brought organic traffic.
Personal Pride
This project showcased what modern web development can achieve. From architecture to implementation to optimization, every decision was intentional. And it worked.