Case study · Coatings manufacturing · Global

Modernizing Magni Group’s Quality Assurance Platform (Phase 1 & 2)

Magni Group Inc. is a global leader in coating and corrosion protection systems, serving the automotive and industrial sectors.

Its Quality Assurance (QA) department ensures product consistency, compliance, and process reliability. Over time, Magni’s legacy system—developed in Microsoft Access with Visual Basic—became outdated and limited in functionality.

It lacked scalability, mobile accessibility, and modern user experience, leading to operational inefficiencies. To address this, Magni partnered with M RANK to modernize its QA platform through a structured, multi-phase digital transformation initiative.

Project Overview

The modernization effort was divided into two phases

  • Phase 1 – Frontend Modernization & UI/UX Redesign: Establish the foundation of a web-based, cloud-ready QA application with a focus on navigation design (Switchboard & Sub-Switchboard), responsive layouts, and user experience.
  • Phase 2 – Backend Development, API Integration & Cloud Migration: Extend the application with backend logic, secure APIs, database migration to cloud infrastructure, and user role management to complete the functional system.

Phase 1 – UI/UX Modernization

Objective

To create a responsive, modular, and intuitive Switchboard navigation system that replaces the legacy Access interface and sets the base for backend integrations.

Challenges

Non-responsive, table-based UI not suited for modern web or mobile.

Limited scalability due to tightly coupled Visual Basic code.

No centralized login or user control.

Complex navigation causing inefficiencies in QA workflows.

Our approach

M RANK adopted a React-based modular frontend strategy supported by Figma for UX prototyping.

A responsive Switchboard / Sub-Switchboard design was developed with reusable components and seamless navigation flow.

UI/UX prototypes in Figma

Switchboard & Sub-Switchboard design and development

Login/Logout authentication flow

Component-based React architecture

Placeholder API setup for future backend

Manual QA testing for UX validation

Technology Stack

Frontend

HTML5, CSS3, React

Backend

API integration (Phase 2)

Database

MS SQL (planned migration)

Methodology

Agile / Weekly Sprints

Environment

Magni Server / AWS Cloud

Version Control

Great Lakes Digital Partners Git Repository

Results

  • Delivered a responsive and intuitive UI/UX for QA operations.
  • Simplified user navigation through the Switchboard model.
  • Improved cross-browser and mobile accessibility.
  • Established a scalable, maintainable frontend ready for backend integration.

Phase 2 – Backend Development & Cloud Integration

Objective

To transform the Phase 1 frontend into a fully operational web application by integrating backend APIs, migrating the database to the cloud, and implementing role-based access control for secure QA operations.

Challenges

Migrating legacy MS Access data to MS SQL without downtime.

Building secure, high-performance APIs for all QA modules.

Designing a robust authentication and authorization system.

Ensuring synchronization between on-premise and cloud data during transition.

Our approach

M RANK extended the Phase 1 architecture into a complete full-stack solution, integrating backend services while maintaining performance, data integrity, and user experience.

API Development: RESTful APIs built with Node.js and Express for all QA workflows (Batch Info, Raw Materials, QC Reports, etc.)

Database Migration: MS SQL schema modernization and migration to AWS RDS Cloud.

Authentication & Authorization: Role-based access control for Admin, QA Manager, and Operator levels using JWT.

Data Sync Services: Scheduled synchronization between on-prem and cloud databases to ensure real-time accuracy.

Testing & Validation: Integrated testing pipeline for API endpoints and system-wide UAT.

Technology Stack

Frontend

React (Phase 1 enhanced)

Backend

Node.js, Express.js, RESTful APIs

Database

MS SQL on AWS RDS

Authentication

JWT / OAuth2

Deployment

AWS EC2 / Elastic Beanstalk

QA & Monitoring

Postman Tests, AWS CloudWatch

Methodology

Agile – Biweekly Releases

System Modules

Batch Management: Create, track, and update batch data in real time.

Raw Material Editor: Secure editing of raw material inputs and validation.

QC Reports & Charts: Dynamic data visualization and report generation.

Product Specifications: Integrated data retrieval via API services.

Failed QC Transmission: Error tracking and alert system for QA follow-up.

Results & Impact

  • Seamless migration from legacy Access system to modern web architecture.
  • End-to-end automation of QA data processing and reporting.
  • Enhanced security through role-based authentication and controlled access.
  • 99% reduction in manual data handling and report generation time.
  • Real-time visibility and traceability across QA operations.
  • Improved system performance and cloud scalability.

Overall Outcomes

System Performance

Improved from slow, local Access files to cloud-based real-time processing.

Accessibility

Enhanced to web and mobile responsive design.

Data Integrity

Automated API sync replaced manual errors.

Scalability

Enabled elastic cloud scaling.

User Management

Introduced role-based control system.

Reporting

Automated charts replaced manual exports.

Conclusion

Through close collaboration with Magni Group’s QA team, M RANK successfully delivered Phase 1 and Phase 2 of the modernization program, evolving the legacy MS Access application into a fully functional, cloud-based QA platform.

The solution improved operational efficiency, data reliability, and user experience while laying a scalable foundation for future automation and analytics capabilities.

This project exemplifies M RANK's expertise in enterprise application modernization, combining technical precision with user-focused design to deliver measurable business impact.

Have a similar problem?

Tell us what's slowing your business down. We'll reply with an approach, a timeline and an estimate.