[DMP 2026]: MMU-UI - Angular 16 to Angular 19 + Zard UI Migration

[drtechie]

Description

Migrate the MMU-UI (Mobile Medical Unit) application from Angular 16.2.0 to Angular 19 with Zard UI (shadcn for Angular) replacing Angular Material 16. Unlike the Helpline104 and 1097 projects (which are on Angular 4), MMU-UI is already on a modern Angular version with HttpClient and RxJS 7. The primary work is migrating from NgModule to standalone components, replacing Angular Material with Zard UI, and replacing Bootstrap 5 with Tailwind CSS v4.

Current state: Angular 16.2.0 | 153 components | 30 services | 11 directives | 26 Material modules imported | nurse-doctor module has 108 components (70% of total)

Note on AI-assisted development: A project of this scale is not achievable through manual coding alone within the expected timeline. Contributors will be provided a Claude Code Pro/Max subscription to accelerate development using AI agentic coding. Understanding how to work effectively with AI coding agents and copiloting is an important skill for this project. That said, this is not a vibe coding project. Contributors must understand the architecture and review all AI-generated code critically rather than blindly trusting the output. The existing repository serves as the reference point to ensure all functionality is preserved.

Goals & Mid-Point Milestone

• Upgrade Angular 16 -> 19 using ng update incremental path (16->17->18->19)
• Convert NgModule architecture to standalone components across all 15 modules
• Replace all 26 Angular Material modules with Zard UI equivalents
• Replace Bootstrap 5 + jQuery with Tailwind CSS v4
• Port core module: 17 components, 13 services, 10 directives to standalone
• Mid-point milestone: Angular 19 upgrade complete + core module + registrar + lab modules converted to standalone with Zard UI
• Port nurse-doctor module (108 components, the largest module at 70% of the app)
• Port registrar, lab, pharmacist, and data-sync modules
• Decompose workarea.component.ts (3,762 lines, the largest component)
• Replace ngx-bootstrap with Zard UI equivalents
• Replace ng2-charts + Chart.js setup with modern charting integration

Setup/Installation

• AMRIT Setup Guide
• Existing project: git clone https://github.com/PSMRI/MMU-UI.git
• Upgrade path: ng update @angular/core@17 @angular/cli@17 (then repeat for 18, 19)

Expected Outcome

A fully functional MMU-UI application on Angular 19 with:

• Standalone component architecture (no NgModule)
• Zard UI component library replacing all 26 Angular Material modules
• Tailwind CSS v4 replacing Bootstrap 5
• Lazy-loaded feature modules for optimal performance
• All existing functionality preserved with the same API endpoints and clinical workflows
• Production build succeeds and deploys correctly

Acceptance Criteria

• All 153 components ported to standalone and functional
• All 30 services working correctly with existing backend APIs
• Clinical workflows functional: registration -> nurse vitals -> doctor consultation -> lab -> pharmacy
• No references to Angular Material, ngx-bootstrap, or Bootstrap CSS remain
• ng build --configuration=production succeeds with no errors
• All 10 validator directives work correctly as standalone
• workarea.component.ts (3,762 lines) decomposed into smaller components
• Webcam, audio recording, and IoT device integrations functional
• Data sync module operational for offline-capable scenarios

Implementation Details

• Approach: Incremental ng update (16->17->18->19) since codebase is already modern, then NgModule->standalone conversion and Material->Zard UI swap
• UI Library: Zard UI replacing Angular Material 16 (26 Material modules to replace)
• CSS: Tailwind CSS v4 replacing Bootstrap 5.3.2
• Module System: Convert all 15 NgModules to standalone components with lazy routing
• HTTP: Already on HttpClient, so no HTTP layer rewrite is needed
• RxJS: Already on RxJS 7, so no RxJS migration is needed
• Dependencies to remove: @angular/material, @angular/cdk (Material), ngx-bootstrap, jquery, bootstrap
• Dependencies to keep/upgrade: chart.js/ng2-charts, ngx-webcam, recordrtc, exceljs, crypto-js
• Key risk: The nurse-doctor module (108 components) is massive and requires parallel work streams
• Key risk: workarea.component.ts (3,762 lines) needs careful decomposition to avoid logic loss

Mockups/Wireframes

N/A. UI should match existing application screens with modernized Zard UI styling.

Product Name

MMU-UI

Organisation Name

Piramal Swasthya Management and Research Institute

Domain

Healthcare

Tech Skills Needed

• Angular
• TypeScript
• Tailwind CSS
• HTML
• RESTful APIs
• Refactoring
• AI Agentic Coding
• Testing Library

Mentor(s)

@drtechie

Category

• Frontend
• Refactoring
• Performance Improvement

[drtechie]

This is a Dedicated Mentoring Program (DMP) ticket under C4GT. Applications will be accepted through proposals via C4GT, and assignees will be added through due process. Please refrain from spamming.