0%
100%

Creating a web application for data visualization and analytics

How we developed a custom web app using our Angular Material Dashboard that helped the client reduce costs and receive a beautiful intuitive design.

Before
we transform our opensource dashboard to the analytical platform
After
we transform our opensource dashboard to the analytical platform

Client

Professor at a world-famous prestigious educational institution in the USA was looking for a trustworthy Angular development company to create a web app using an admin dashboard template.

Client feedback

They combine a range of skills and exceptional responsiveness. It's very difficult to find both of these in one place, and CreativeIT is doing that at a competitive price. Also, they're very transparent and have excellent communication skills.

Philip Daineka

Projects details

Project duration

We worked on this project for 3,5 months, from September till December 2018.

Project team

The project team consisted of 3 specialists: UI/UX designer, front-end developer, and project manager

Technology stack

Angular, Node.js backend, Sass, SQLite - lightweight database, Jwt - auth, D3 and nvd3, Material Angular dashboard

Project duration

We worked on this project for 3,5 months, from September till December 2018.

Project team

The project team consisted of 3 specialists: UI/UX designer, front-end developer, and project manager

Technology stack

Angular
Node.js
Node.js
Sass
SQLite - lightweight database
Jwt - auth
D3 and nvd3
Material Angular dashboard

Problem

The client worked with complex sets of data that he wanted to present in a visual way. One of the main requirements was to implement a dark theme which was a completely new trend for enterprises. The platform’s design had to be user-friendly and modern. 

When searching for an IT service vendor, the customer stumbled upon the products of CreativeIT. He saw that Material Design Dashboard fully corresponded with his requirements and decided to develop a web application based on it.

Project goal

The customer wanted to develop an analytics and data visualization platform from scratch. The principal objective was to build an Angular web application that would have a modern intuitive design and allow the client to visualize large amounts of data.

Challenges and features

We created a React admin dashboard template that provides web developers with the following functionality:

Based on our Material Dashboard Design

Since the client really enjoyed fresh and dark design theme and wanted to cut development costs, his choice of our dashboard was pretty obvious. Angular Material Dashboard offers a variety of business components and design elements, which enabled us to reduce the time for creating UI/UX web design.

Based on Angular Material Dashboard

Dashboard widgets

Customized Google maps with clusters and info window.

One of the main features of the end application is a big map with various filters that allows to easily visualize data. We added clusters of different sizes and having 3 levels that show a number of things in different countries, cities, and even offices. To implement this functionality, our engineers used a built-in database of countries and cities.

Custom Google maps with clusters

Custom maps for dashboard

AG grid

Our developers integrated the most popular table grid that enables to include filters, pagination, and other tools to easily work with tables and large data amounts.

we used the most popular table grid as a base

AG-grid tables

Different roles and levels of access.

We created a system with one global admin role who can add users and share different access permissions such as view and edit all data or just some parts.

Solution

The customer provided us with several wireframes for creating UI/UX design of the future solution. This helped us understand his needs and expectations. As soon as the project idea and requirements were analyzed, we modified those wireframes and delivered a great modern design. 

When it was approved by the client, our web engineers developed front-end for data display and back-end — for organizing data. The use of an Angular Material Dashboard allowed us to easily display graphs and charts and expand product functionality.

As a result, the client got a web application that enables data visualization and analytics of complex sets of data.

we transform our opensource dashboard to the analytical platform

Main screen

Tools and management side

We had weekly calls with the customer where we discussed the progress and demonstrated intermediate results. Our team also provided him with time tracking reports. We mostly used email and Slack to stay in touch.

Got a Project to Discuss?
Contact us!

Share your name, working email and a short brief to understand what is your project about: 

Name
Email
Briefly tell us about your project
Thanks for filling out our form!
We’ll take a look at your message and get back to you shortly
Oops! All fields are required, please check the correctness of the data.

You might also like...