UI/UX Development of SaaS App for Data Science

Technology Stack

ReactJS
Redux Toolkit
TypeScript
Storybook

The Client

This data science app is a configurable SaaS-based platform that companies can buy and install to store and visualize data. The application allows companies to create huge custom databases for mailing lists, bills, invoices, CRMs, HR management, managing and sharing documents, etc., and use them for analytics in the future. Companies of any size can install this software to view data in beautiful graphical formats. Those tired of looking at boring data sheets can use this software to visualize raw data in color-coded graphs.

The Challenge

The client who contacted us for this project already had the backend environment set up. But, the app’s frontend dashboard wasn’t ready. As a result, raw data would remain stored as raw information in the backend. It was impossible to discern anything from them. This was when the client sought Capital Numbers’ help to create a front-end dashboard that would transform random backend data into insightful charts.

We had comprehensive knowledge of Data Structures and Algorithms (DSA). So, we knew the challenges and programmatic ways of translating backend data into front-end charts. We had thorough concepts of basic data structures like Arrays and Linked lists and advanced data structures like Disjoint Sets. So, the client trusted us with this project that needed handling massive and dynamic data sets for visualizations.

The client also asked us to add several cosmetic changes to the frontend dashboard. For example, we needed to custom-integrate new sliders, buttons, icons, grids, overlays, side scrolls, dropdowns, panels, clocks, event-based calendars, and other components.

Moreover, we needed to convert the existing JavaScript code into TypeScript to make the codebase error-free, reusable, and more secure. We needed to handle all of these and suggest improvements when required. We also had to do the app's unit testing to ensure the data stores reflected the visual story well.

The Solution

Capital Numbers began by studying the system’s backend. We focused on two areas: developing the interface layering and syncing backend data with the front-end.

Firstly, to build a robust interface, we implemented React.js. The best part about React is that it’s perfect for rendering data-driven UIs. React is lightweight, scalable, and easier to debug. Its declarative components help construct dynamic UXs - just what we needed. So, React was a preferred library in this case.

However, React alone wasn’t enough to handle all the data complexities. So, we used the Redux Toolkit (RTK) to manage the data stores. With RTK in place, we didn’t have to hand-write the data storage and fetching logic because RTK comes with add-ons that take care of it.

Next, we had to develop a vast ecosystem of UI elements like sliders, icons, buttons, scrolls, graphs, charts, calendars, etc. To this end, we used Storybook. Storybook is a configurable ecosystem of UI components, similar to a Bootstrap environment. So, we implemented Storybook’s ready-made UI environment to avoid fussing over APIs, code, or logic. Our experts also added documentation that future UI teams could refer to and rely upon.

In addition to all of these, we worked towards reducing bugs. So, we migrated the code from JavaScript (JS) to TypeScript (TS), which is known for its security. But, we moved files from JS to TS in small batches to ensure nothing broke in the migration process.

This project also needed the handling of multiple code repositories. It was, therefore, crucial to have the right repo management strategy in place. So, we used Lerna, which helped us package all code repositories into unified Monorepo for easier code maintenance.

Moreover, this project required us to embed custom controllers for backend-frontend data syncs. The controllers would be a glue between the Model (backend logic) and View (front-end dashboard). The controllers would help display visual elements on the front end as and when someone would add data in the backend. We had to be cautious at this stage to ensure the controllers kept data synced between the backend and the front end seamlessly.

Once done with everything, we checked for the code quality using ESLint. Our team also performed thorough unit testing for all UI components using Jest and Enzyme. After ensuring everything appeared as they were supposed to, we sent the product to the client. The client found no errors in our code quality and directly deployed the product in their chosen server with the help of their DevOps team.

We also, build the automation testing for the application to test it from end-to-end functionality using Cypress.

Results

The outcome of this continuous maintenance and feature enhancement project delivers a powerful GUI that helps with data visualization easily. Data analysis is much easier now. Our team of 9-10 UI/UX experts did an excellent job relying entirely on custom components, not third-party tools for data visualizations. And this led our client to appreciate our work even more.

Here’s a rundown of what we achieved:

Backend-to-frontend Sync

Our custom controllers help reflect backend data on the frontend with 100% accuracy.

JS-to-TS Migration

We improved the app’s security levels by moving all files from JavaScript to TypeScript.

Data Visualization for Insights

Our data visualization components allow users to extract meaningful insights for informed decisions.

String Patterns and Data Sorting

We demonstrated a sound idea of handling complex data strings in this project, and our client was pleased with it.

React-Redux Skills

Our React-Redux engineering skills further helped us tackle all the complexities of this enormous data science app.

Configurable Settings/Workspaces

Companies can configure the parent settings of this app and enter new settings/workspaces with custom databases like CRMs, Portfolios, Reports, etc., to suit their needs.

History View

We also created a history view that shows thumbnails of all the workspaces users previously opened.

Unit testing with Jest and Enzyme

With Jest and Enzyme, we could scrutinize every backend logic of the app individually and independently.

End-to-end Testing with Cypress

We also conducted end-to-end frontend testing using Cypress to ensure the visual structures look good.

End-to-end Consultations

We offered end-to-end consultations for dashboard design and all the integrations.

Open Communication

Our team communicated with the client for every code management and milestone work on Slack, Google Meet, and GitLab.

Information Visualization Made Handy

The client is delighted with what Capital Numbers delivered and how. Information visualization is handy now.