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.
Ongoing Collaboration
Impressed by our DSA knowledge, the client wants to stick around with us to enhance this data science app further with added implementations.
Great Reviews
97 Out Of 100 Clients Have Given Us A Five Star Rating On Google & Clutch
P. Attur
CIO, Hudson Regional Hospital
"Capital Numbers was easy to work with, and they were always available."
Michael Wendlandt
Senior SEO Manager, GrowthLeads
"They seem very professional compared to the company I worked with before."
Jorge Quintero
COO, Blue Lagoon Jets
"Their fast response was impressive."
DeVon Favors
Founder, Creating Favors LLC
"They have an excellent staff and great communication."
Bob Norberg
CMO, Cloud Age Solutions
"They were quick and efficient and their work was very good."
Scott R. Wells
Visionary, ConversionFormula
