Craig A Holliday

User Interface for an Internal Live Media Testing Tool

Only general information is provided for this project because this project is under an NDA

TL:DR

Challenge: RealEyes possessed tools for generating live streams tailored for various live playback scenarios. However, the absence of a user interface made it cumbersome for developers to initiate testing promptly. The primary challenge was to bridge this gap and facilitate ease of use.

Solution: Wearing the hats of both the Product Owner and Developer:

  • Clearly charted out all the requirements essential for the project.
  • Spearheaded the design and development of a React application that interfaces with the live stream creation tool via a REST API.
  • Incorporated functionalities for fundamental CRUD operations.

Tech Stack:

  • React as the foundational framework for application development.
  • React Query for efficient management of API state and network requests.
  • Tailwind for sleek and adaptable styling.

Project Goals

At RealEyes, we had tools to create live streams for testing different live playback scenarios. These tools never had UI to manage the live streams, making it difficult for any developer to start testing quickly.

We needed to build a React application to provide an easy way for developers to use this tool.

This application needed to:

  • Provide a basic UI for CRUD operations
  • Interact with the live stream creation tool via a REST API

Functions

  • Product Owner
    • Defined all the project requirements.
  • Sole developer
    • Developed all the features for this project.

Features

This application was straightforward.

  • React Query for network requests and API state management
  • Tailwind for styling
  • Normal React for everything else

Project Outcomes

The POC was completed for this project and deployed. This allowed developers to take full advantage of the tool for day-to-day testing.

Personal Takeaways

This was a great, simple project to work on in some downtime between our team’s contracts. I experimented with React Query and Tailwind, which I had not worked with until this project.