React View Layer for OTT Streaming Software

The Client

The client is an audio and video streaming technology provider, delivering software solutions and hardware to customers in need of media-management capabilities. Its portfolio includes players, encoders, cloud-based audio platforms, and complete solutions for streaming over the internet — solutions that serve players within the hospitality and retail landscapes.

INNERLUXES was engaged to work on the view layer of the client's application. The existing view layer already used AngularJS as its front-end technology, but it was experiencing a functionality deficit, so INNERLUXES implemented a new view layer with a more robust set of functionalities.

Approach and Collaboration

React was the clear choice for the user interface, with React-Redux used for the APIs (Redux-Saga and reducers). INNERLUXES used mock requests and responses to integrate the API documentation with the application. From the outset, the client was ready to move full-speed ahead with development, which let the team proceed without roadblocks by proactively eliminating uncertainties. To support cross-border collaboration, INNERLUXES catered to the client's time zone, matched its business hours, and adapted to its internal processes — so development progressed as smoothly as it would in a shared workspace.

Building the React View Layer

INNERLUXES used react-bootstrap to implement base-level components. On top of the basic presentation components, the team implemented a mid-level component to keep the look and feel of all elements homogeneous across the application: every component inherited attributes from the base component using a shared base CSS applied across the app, and the already-developed AngularJS portal provided all the screens for reference.

The result was a React application that complements the existing streaming environment. Because Redux supports only synchronous data flow, INNERLUXES implemented a simple user flow to respond to actions, data, and updates: the middleware first handles the asynchronous calls, then mediates the data response — communicating with reducers to handle the responses synchronously. INNERLUXES completed the API documentation and delivered an adaptable view layer.

The Impact

• A new React view layer replacing the functionality-deficient AngularJS view layer.
• React-Redux with Redux-Saga and reducers for API handling, integrated via mock requests/responses.
• A homogeneous component system (react-bootstrap base + mid-level component + shared base CSS).
• A middleware user flow bridging asynchronous calls and synchronous Redux data flow.
• Completed API documentation and an adaptable view layer — streaming software that runs more efficiently and needs less maintenance.

Technologies and Tools

React, React-Redux, Redux-Saga, reducers, react-bootstrap, Yarn 0.18.1; AngularJS (legacy view layer / screen reference); shared base CSS.