UI/UX Development of SaaS App for Data Science

Technology Stack

  • ReactJS iconReactJS
  • Redux Toolkit iconRedux Toolkit
  • TypeScript iconTypeScript
  • Storybook iconStorybook
Client img

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 documents, etc., and use it 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 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 frontend 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 the frontend charts. We had thorough concepts of basic data structures like Arrays and LinkedList 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 reflect the visual story well.

The Solution

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 frontend.

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 (frontend dashboard). The controllers would help display visual elements on the frontend 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 backend and frontend seamlessly.

Once done with everything, we checked for the code quality using ESLint. Our team also performed a 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.

results icon

Results

The outcome of this 12-month project is a powerful GUI that helps with data visualization. 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.

dowload icon

Download this case study

  • Fill 1Created with Sketch.
  • Fill 1Created with Sketch.

Great Reviews

97 Out Of 100 Clients Have Given Us A Five Star Rating On Google & Clutch

James BurkeCapital Numbers 5/ 5
Jose RodriguezCapital Numbers 5/ 5
Jorge QuinteroCapital Numbers 5/ 5
Katherine MaoCapital Numbers 5/ 5
DeVon FavorsCapital Numbers 5/ 5
Bob NorbergCapital Numbers 5/ 5
Read More Reviews
  • Read Capital Numbers reviews on G2

We’d Love To Hear From You

Get Custom Solutions, Recommendations, Resumes, or, Estimates.
Confidentiality & Same Day Response Guaranteed!

What can we help you with?

Our Consultants Will Reply Back To You Within 8 Hours Or Less

  • Shovan
  • Dibakar
  • Indrajit
  • Avishek
700+ In-House Experts
25+ Awards in the last 9 Years
237+ Clients Worldwide
100+ Five Star Reviews On Clutch, Google and GoodFirms
Attach files Select files from your   or   or 

    Recent Awards & Certifications

    • CNBC
    • The economic times
    • Rise Top

    Step Into Our Development Center