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!
We started to work on this project in 2017 and are still including new features
The development team consisted of 6 members: 2 UI/UX designers, 3 front-end and back-end engineers, and a project manager
Angular, Node.js — for a quick start, Sass, JSON Web Token Authentication (jwt-auth), D3 and NVD3
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.
Feedback from developers and opensource community
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.
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.
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.
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.
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.
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 GitHub — 850 stars — thanks to a thoughtful marketing plan implemented by our team and a high solution’s quality.
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 maps
In the Dashboard 2.0 version, our goal was to extend the technical side of the product and add the following things:
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.
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.
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.
AG-grid tables for dashboard
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 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!
Dashboard widgets
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.
Share your name, working email and a short brief to understand what is your project about:
