Craig A Holliday

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

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

TL:DR

Challenge: The client had developed an internal tool to manage media encoding workflows for their prominent media streaming company. However, they sought to upgrade and modernize its front end, aiming to make it more efficient and user-friendly. The tool was intricate, 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:

  • Undertook the responsibility of revamping the frontend with React, while effectively coordinating with other members, ensuring a cohesive build.
  • Integrated the customer’s in-house UI component library, which provided foundational UI elements.
  • Constructed lists and forms for each of the approximately 20 entities, ensuring efficient data manipulation.
  • 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.
  • Utilized 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.