An Angular admin dashboard that cuts 500 development hours

Now admin dashboards are undoubtedly one of the most popular trends in front-end development. Providing software engineers with the ability to create websites and applications much faster and easier, they have secured a foothold in the market for years to come. Since the use of dashboard templates can help customers save thousands of dollars, here both sides — client and developer — gain an advantage.

Keeping pace with the trends, we built a custom dashboard that offers dozens of web components, has a modern intuitive interface and enables programmers to cut hundreds of development hours. Another plus is that our admin dashboard — it doesn’t matter what version you are using — is easy to tailor to your business needs. 

See how we created a solution that allows dev teams to automate the process of making software and seamlessly extend their projects. It is noteworthy that there are 3 parts of the product history that include HTML, Angular, and Dashboard 2.0. Let’s get started!

Projects details

Project duration

We started to work on this project in 2017 and are still including new features

Project team

The development team consisted of 6 members: 2 UI/UX designers, 3 front-end and back-end engineers, and a project manager

Technology stack

Angular, Node.js — for a quick start, Sass, JSON Web Token Authentication (jwt-auth), D3 and NVD3

Opensource

This admin dashboard is an internal project of our company that is available for use. Since our software house is an active contributor to open-source development and trusted by the open-source community, we made this product open-source.

Problem

Being a custom software development company that specializes in building quality mobile and web solutions, we constantly monitor both market and development trends. As we always strive to enhance our internal processes and build products that add value to customers, we keep track of innovative tools and approaches that help us reach these goals. 

About 2 years ago, our engineers analyzed the market and spotted a great opportunity to take a niche. We had already had a Material Dashboard Lite that was created a long time ago, so we decided to launch a new cool admin dashboard on the base of it.

Project goal

The main goal was quite ambitious. We wanted to build a product that would let programmers cut up to 500 development hours and customers who want to create a software solution — save up to $15,000-20,000. Another aim was to make our solution open source so that specialists from all over the world would be able to use it and contribute as well. 

Admin dashboard development

As mentioned above, this 2-year project embraced 3 stages and several product versions — HTML, Angular, and 2.0. Here at CreativeIT, we are proud that each of them gained recognition among developers worldwide and our company became trusted by the open-source community on GitHub.

1. HTML

In the beginning, we had Material Dashboard Lite developed a long time ago. As new cutting-edge technologies are being introduced by leaps and bounds, some are fading into insignificance and becoming outdated. If no, we believe that still, if you can improve, you should. Well, we decided to integrate a new perspective library by using it as a base of our open source product.

664
stars on GitHub
583
likes and featured on UpLabs
#1
on GitHub trending in HTML category

Our engineers started with making 3 pages in HTML that doesn’t rely on any JavaScript frameworks, jQuery-free, aims to be responsive, and is optimized for cross-device usage. All the components were created using CSS (SCSS), JavaScript (es6), and HTML5.

A new version of Material Dashboard Lite was well-received and got positive testimonials. For instance, engineering manager at Google, wrote to us:

Playing around with your customisations this looks quite well done. I haven't seen enough folks playing around with darker Material Design variants with MDL so this is awesome to see.

Philip Daineka
Addy Osmani, Engineering Manager at Google, who works on Chrome & Web Platform and is a creator of MDL library

2. Angular

The second step was to migrate the user dashboard to Angular. At this stage, our team added plenty of new great components and pages. As we wanted to focus on business systems, analytics, and data visualization, our new admin dashboard template included a bunch of graphs, tables, widgets, and many other useful elements.

Originally, we decided to make an Angular web dashboard on the base of the Material Design Lite library. However, there was no select control, so our engineers delivered a missed component in 10 different options. As a result, the Material Angular Select component was created. In fact, it is a part of the end product but moved to a separate repository.

Once an Angular version was released, we published it on Product Hunt. We had already had a successful launch on GitHub850 stars — thanks to a thoughtful marketing plan implemented by our team and a high solution’s quality.

#7
of the day on ProductHunt
724
upvotes on ProductHunt
850
stars on GitHub
#10
on GitHub Trending Developers
#1
 in typescript category

Based on Google Material Design and built on top of Angular, this admin template allows programmers to create quality Big Data apps that ensure high response speed. The product perfectly suits for building data visualization and data management web applications. 

Our web dashboard also contains 2 layouts, more than 10 pages, and 40+ components that can be easily tailored to the customer’s business-specific needs. What’s important, it involves smart maps, tables, filters, pagination, and auth.

Having a dark theme and beautiful user-friendly design, Material Angular Dashboard makes the front-end creation process a real pleasure. Furthermore, it enables engineers to cut up to 500 (!) development hours.

Custom Google maps with clusters

3. Dashboard 2.0 - COMING SOON!

In the Dashboard 2.0 version, our goal was to extend the technical side of the product and add the following things:

Node.js-based backend

Starter Backend Bundle is the vital minimal of Material Angular Dashboard integrated with Node.js backend. It contains JWT Authentication for both UI and backend and basic REST API with pagination. The dashboard is based on Angular, Express.js, Passport.js, REST API, and has customizable styles made with Sass.

Serverless architecture on AWS Lambda

Another cool thing that we implemented was serverless architecture. The biggest advantage of serverless is that it allows both businesses and developers to delegate issues like infrastructure maintenance, server management, resource allocation, and capacity provisioning to a third-party.

Furthermore, it ensures high scalability of the product — scaling goes automatically in both directions depending on the need — as the frequency of function execution increases or decreases. Zero-system administration, faster deployment, and simple adoption are other important benefits that encouraged us to employ this type of architecture.

Concerning pricing, here you pay only for the computing resources that you consume (the number of function calls) — there is no charge when your code is not running and there is no additional load on the system.

To implement serverless cloud architecture, we decided to turn to AWS Lambda as one of the most trusted cloud providers. Our team used a serverless framework CLI that was created for serverless deployment to AWS Lambda.

So, you can start your project with our dashboard without thinking about servers, infrastructure support, and other technical challenges and reduce development costs as a result.

Integrated AG-grid tables

As our product focuses on solving business tasks, we needed to implement various tables with lots of functions and possibilities. To this end, our engineers integrated ag-Grid, the best JavaScript grid that provides such functionality as data grouping and aggregation, filtering, real-time updates, data trees, data export, and much more. Thus, you can find some free features with dark material design.

we used the most popular table grid as a base

User authorization

Besides a general authorization through login and password, we implemented auth via social networks. As a result, users of this web dashboard are able to sign in via their Facebook, Google, or LinkedIn accounts.

Starter Kit

Starter Kit is an empty admin template that has no components. Due to this element, your software engineers won’t have to delete all the unnecessary project parts and will be able to start their work immediately. Hence, you’ll have another 3-6 development hours saved.

At the moment, Dashboard 2.0 is being prepared for the release. See it on the market and GitHub soon!

Based on Angular Material Dashboard

If you have questions about this project or want to build your own, feel free to contact our team! We will connect you with the required specialist who will help you resolve your issues. Having extensive experience in Angular development, we are ready to offer you meaningful recommendations and the required assistance.

Got a project to discuss?
Contact us!

We provide consultancy on development, project roadmapping, and work planning. 

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