User Interface for an Internal Live Media Testing Tool

TL;DR

Challenge: RealEyes had tools for generating live streams tailored for various live playback scenarios. But without a user interface, it was slow for developers to start a test. The goal was to make the tool easy to use.

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

• Clearly charted out all the requirements essential for the project.
• Led 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 API state and network requests.
• Tailwind for 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.