Charting Success: Building a Foundation for Data Dashboards at NTT DATA Services

When I started at NTT Data Services, the team was missing a crucial front-end development skillset in creating their data dashboards. The data that was being collected from sensors in the real world was being sent to databases and APIs, but it was not shown to any users.

I worked closely with a visual designer on the team to realize the vision that the leadership team had for data dashboards that could be tailored to various use cases and a variety of customer needs in the public sector.

When working with the designer, I pointed out the various aspects of the dashboards she had built that were reusable, and got to work at creating those components in code.

I started with small-scale applications, built off of Create React App. From there, it became evident that there had to be a better way to reuse components, rather than copying and pasting the code from other apps I had built.

I did some research on how to easily reuse components for multiple applications, and came across a "monorepo" (single code repository) solution called NX. NX allows you to create components, applications, API routes, and servers all in the space repository. That means that whenever I needed to reuse a component I had built before, I simply needed to import it into the application. No more copy+pasting!

NX was a night/day shift in my productivity. It also required me to think in a completely different way about how I built components.

Rather than building a component for a specific use case, these components had to be reusable in how they accepted data, and how they were presented to the end user. This required a lot of architectural thinking to ensure that anything I built could be scaled or adapted for use with another project. Collaboration with stakeholders and designers was key, as we needed to start thinking 3 steps ahead when building our components.

To maintain visual consistency across all of the various components, I leveraged the Material UI component library (MUI). This library allowed me to make pixel-perfect components that matched the designs mockups that already used Material Design. It also made creating a dark theme super simple, as MUI uses a built-in theming system.

Overall, the component library I built for NTT Data Services was an amazing learning opportunity for me. The way I needed to plan out how to accept data and make things visually consistent was a good lesson in how to architect web applications. It also expanded my thinking as a developer. Instead of thinking about the short-term results I needed from an application, I started to think about how things I build can scale.