MRANK
Modernizing Magni Group’s Quality Assurance Platform (Phase 1 & 2)
Client Overview
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 MRANK 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.
MRANK’s Solution Approach
MRANK 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.
Key Deliverables:
- 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.
MRANK’s Solution Approach
MRANK extended the Phase 1 architecture into a complete full-stack solution, integrating backend services while maintaining performance, data integrity, and user experience.
Key Implementations:
- 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, MRANK 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 MRANK’s expertise in enterprise application modernization, combining technical precision with user-focused design to deliver measurable business impact.