Greetings, open-source community!

I’m Pranjal Goyal, a software engineer from India, currently based in Munich, Germany. I am honored to announce my participation in this year’s Google Summer of Code with 52°North Spatial Information Research GmbH. I am thrilled to contribute to the KomMonitor Web Client by completing its critical migration from AngularJS to modern Angular. During the current Community Bonding Period, I have been collaborating closely with my mentors, Sebastian Drost and Christoph Wagner, to lay a solid foundation for this project.

About KomMonitor

KomMonitor, developed at Bochum University of Applied Sciences and co-managed by 52°North, is a powerful open-source platform that fuses Geographic Information Systems (GIS) with statistical data to support municipalities in urban and social planning, as well as environmental management. As part of a local funding program of the State of North Rhine-Westphalia, KomMonitor is instrumental in poverty reduction efforts by enabling detailed analysis of socioeconomic data. However, the current AngularJS foundation of the KomMonitor Web Client limits performance and community support. My mission is to transform it into a modern, scalable Angular application.

Powering KomMonitor’s Future with Angular

Building on the foundational work of past GSoC contributors, such as Ashwanth Kumar, I will complete the migration of the KomMonitor Web Client to Angular. My goal is to enhance performance and maintainability while elevating 52°North’s development standards.

The main challenges lie in refactoring complex legacy code, managing the hybrid AngularJS/Angular application state, and the inherent complexity of interwoven services—which our phased migration strategy for services directly addresses.

Migration presents an excellent opportunity to implement UI/UX improvements that enhance the user experience. For example, in the AdminTopic Management Component, we can leverage the migrated Notification service (from the GSOC entry task) to display success messages when adding new sub-topics. These notifications will clearly indicate which parent component the topic has been added to, providing users with immediate, contextual feedback.

What’s next?

To ensure a smooth and maintainable migration from AngularJS to modern Angular, I’ve structured our approach into four clear phases. Our strategy prioritizes migrating components first, using service proxies to handle dependencies until full transition is complete.

Phase 1: Foundation (Community Bonding Period) – During the initial phase I have tried to make a robust development foundation and comprehensive planning framework. It’s all about understanding the existing AngularJS codebase and preparing the technical infrastructure.

• Created a list for tracking all services and components to be migrated.
• Developed a high-level dependency diagram (using mermaid syntax on GitHub Gist) to visualize interconnections.

This diagram illustrates the Admin Components of the system and their dependencies on core services. The Admin Component serves as a central hub, relying on the Auth Service, Config Storage Service, and Data Exchange Service.This diagram illustrates the Admin Components of the system and their dependencies on core services. The Admin Component serves as a central hub, relying on the Auth Service, Config Storage Service, and Data Exchange Service.

Phase 2: Component-Driven Migration (with Service Proxying)

This is where the core migration work begins, focusing entirely on transforming UI components to Angular. The challenge with services is their interconnected nature – modifying one often requires updating several others simultaneously.

Our Solution – Service Proxies: Instead of migrating services immediately, we create Angular “proxy” services that initially pipe through to existing AngularJS services. This allows component migration without getting bogged down in complex service refactoring.

In addition, components are categorized systematically:

• UI Components (buttons, modals, notifications)
• Feature Components (admin panels, dashboards, maps)
• Core Components (layout, navigation, routing).

The process involves converting AngularJS directives and controllers to modern Angular components with enhanced type safety.

Phase 3: Service Finalization

Once all dependent components are migrated, we finalize service migration. The proxy services are updated to contain native Angular/TypeScript logic instead of piping to AngularJS services. This systematic approach starts with smaller, independent services before tackling complex, interdependent ones.

Each service migration follows a structured process: reviewing TypeScript interfaces, refactoring service logic, removing pipe-through mechanisms, and documenting decisions and edge cases.

Phase 4: Integration and Testing

The final phase focuses on establishing a scalable testing foundation rather than achieving complete coverage within the project timeframe. We implement Unit Testing with Jest for services and utilities, Component Testing with Angular Testing Library for behavior verification, and End-to-End Testing with Cypress for critical user flows.

The goal is to create reusable test patterns and comprehensive documentation that future developers can easily expand upon, ensuring long-term project sustainability.

About Me

I’m a Full Stack Software Engineer with a strong focus on AI-powered applications and modern web technologies. My expertise lies in TypeScript, React, and Node.js, currently engaged at the Digital Product School at Unternehmer TUM, Technical University of Munich. I hold a B.Tech in Electronics and Communication Engineering from NIT Hamirpur. My experience spans building scalable, intelligent web applications, including a matchmaking tool for BMW and an educational platform serving 10,000+ students at The Homework App. I’m particularly passionate about integrating LLMs, automation workflows, and intelligent UIs into real-world products. My sincere thanks to 52°North and GSoC for this remarkable opportunity. I’m ready to make this summer a milestone in KomMonitor’s evolution!