User Interface of an Internal Tool for a Popular Media Streaming Company

TL;DR

Challenge: The client had developed an internal tool to manage media encoding workflows for their media streaming company. They wanted a modern front end that was faster and easier to use. The tool was complex, managing roughly 20 different entities, each with its unique CRUD operations and, in some cases, complex relationships with other entities.

Solution: As a Senior Developer, collaborating with a team of 5:

• Rebuilt the frontend in React, coordinating with the rest of the team.
• Integrated the customer’s in-house UI component library, which provided foundational UI elements.
• Built lists and forms for each of the roughly 20 entities.
• Employed technologies like Storybook for component development and testing, React Testing Library for UI testing, and Jest for other tests.

Tech Stack:

• React for frontend development.
• Client’s internal UI component library for UI elements.
• React context for managing application state.
• Fetch API for data requests from the REST backend.
• Storybook for component development in isolation.
• React Testing Library and Jest for thorough testing.

Project Goals

For this project, we worked with a customer who had been building an internal tool to manage media encoding workflows for a popular media streaming company.

This customer wanted to improve their application and modernize the front end using React.

This internal tool created, read, updated, and deleted around 20 different entity types. Every entity had UI for all the CRUD operations; some entities had more complex relationships with other entity types.

Functions

• Senior Developer on a team of 5
  • 1 team lead
  • 1 team member for the backend
  • 3 team members (including myself) for the frontend

Features

• React Application
• Used the customer’s internal UI component library
  • This library had basic components for the team to use
• React context for basic application state
• Request data from a REST API with Fetch
  • We did not have to manage any data caching for this simple project
• Lists and forms for each of the around 20 entities.
• Used Storybook for building and testing components in isolation
• React Testing Library for UI tests
• Jest for non-UI tests.

Project Outcomes

• Version 1.0 of the application was completed and deployed for the customer on their internal infrastructure.
• The source code was provided as a part of the final deliverable so that a new team could pick up the project for future updates.

Personal Takeaways

This was a great project to work on with the senior members of our team. We had all the knowledge to deliver a well-built, well-tested product on time.

The customer also knew and understood exactly what they wanted, which will always help build a product that meets their needs.

The internal tool was also an integral part of the encoding workflow, so this project had a meaningful impact on the company.