[DMP 2026]: Helpline104-UI - Angular 4 to Angular 19 + Zard UI Migration

[drtechie]

Description

Migrate the Helpline104-UI application from Angular 4.1.3 to Angular 19 with Zard UI (shadcn for Angular) as the component library. The current codebase uses deprecated Angular Material 2.0.0-beta.11, @angular/http, RxJS 5, and Bootstrap 3, all of which are end-of-life. Every file in the project requires rewriting, making a fresh scaffold + module-by-module port the recommended approach over incremental version upgrades.

Current state: Angular 4.1.3 | 118 components | 67 services | 20 directives | Monolithic AppModule (530 lines)

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

• Scaffold Angular 19 project with Zard UI, Tailwind CSS v4, and standalone component architecture
• Rewrite HTTP layer: replace deprecated @angular/http with @angular/common/http functional interceptors
• Port all 67 services (mechanical: Http -> HttpClient, RxJS 5 -> 7 operators)
• Port core infrastructure: auth guards (class-based -> functional), session storage, config service
• Port shared components: 20 directives, 3 pipes, common dialog, loader
• Port authentication flow (login -> captcha -> role selection -> dashboard)
• Mid-point milestone: Core infrastructure + auth flow + dashboard fully functional against existing backend
• Port beneficiary registration, call management, and case sheet modules
• Port SIO services, supervisor, role-specific, and supporting feature modules
• Replace all Angular Material beta components with Zard UI equivalents
• Replace Bootstrap 3 grid/utilities with Tailwind CSS v4
• Decompose giant components: case-sheet (2,900 lines), beneficiary-registration (2,282 lines)

Setup/Installation

• AMRIT Setup Guide
• Existing project: git clone https://github.com/PSMRI/Helpline104-UI.git
• New scaffold: ng new helpline104-ui --style=scss --routing=true --standalone && npx @ngzard/ui init

Expected Outcome

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

• Modern standalone component architecture (no monolithic NgModule)
• Zard UI component library replacing all Angular Material beta components
• Tailwind CSS v4 replacing Bootstrap 3
• Lazy-loaded feature modules for optimal performance
• All existing functionality preserved with the same API endpoints and user workflows
• Production build succeeds and deploys via existing WAR packaging pipeline

Acceptance Criteria

• All 118 components ported and functional
• All 67 services communicate correctly with existing backend APIs
• Login -> role selection -> dashboard -> case sheet -> closure flow works end-to-end
• No references to @angular/http, @angular/material beta, Bootstrap 3, or RxJS 5 remain
• ng build --configuration=production succeeds with no errors
• WAR packaging via pom.xml works for deployment
• Giant components decomposed into smaller standalone components
• All form validations (20 directives) work correctly
• Socket.io upgraded to 4.x with proper Observable patterns

Implementation Details

• Approach: Fresh Angular 19 scaffold, port code module-by-module (not incremental 4->5->...->19)
• UI Library: Zard UI (shadcn philosophy - npx @ngzard/ui add <component>) replacing Material beta
• CSS: Tailwind CSS v4 replacing Bootstrap 3 (col-xs-12 col-md-6 -> w-full md:w-1/2)
• Module System: Standalone components with lazy-loaded routes (no NgModule)
• HTTP: Functional HttpInterceptorFn replacing class-based Http extension
• Guards: Functional CanActivateFn replacing class-based CanActivate
• RxJS: Pipe operators replacing prototype patching (Observable.throw -> throwError(() => ...))
• Dependencies to remove: jQuery, Tether, Bootstrap JS, angular2-toaster, ng2-smart-table, md2
• Dependencies to upgrade: socket.io-client 2->4, d3 4->7, xlsx 0.13->0.20, moment -> date-fns
• Key risk: Business logic loss during port. Mitigate by running old and new apps against the same backend.

Mockups/Wireframes

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

Product Name

Helpline104-UI

Organisation Name

Piramal Swasthya Management and Research Institute

Domain

Healthcare

Tech Skills Needed

• Angular
• TypeScript
• Tailwind CSS
• RxJS
• RESTful APIs
• HTML
• WebSockets
• AI Agentic Coding
• Refactoring

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.