GSoC 2026 Project: Frontend Modernization & TypeScript Migration

1

Hello OpenELIS Community!

I will be working on the Frontend Modernization and TypeScript Migration project for GSoC 2026 under OpenELIS Global.

This project focuses on improving the maintainability, scalability, and performance of the OpenELIS frontend by incrementally migrating the existing React codebase from JavaScript to TypeScript and optimizing rendering behavior in data-intensive workflows.

Project Goal

This project aims to expand and standardize the existing TypeScript adoption across selected high-impact frontend modules in OpenELIS.

The focus is on improving maintainability, consistency, type safety, and developer experience while establishing a repeatable migration path for future frontend modernization efforts.

The project will also include measured performance improvements for selected data-intensive workflows based on profiling and real rendering observations.

Current Gaps

After reviewing the frontend codebase, I identified several areas that can be improved incrementally during GSoC 2026:

Inconsistent TypeScript Adoption

Although OpenELIS already contains partial TypeScript support, many frontend modules still rely heavily on JavaScript, resulting in inconsistent typing patterns across the application.

Limited Shared Typing Infrastructure

Some components and utilities lack reusable interfaces and centralized data models, which increases duplication and makes large workflows harder to maintain.

Frontend Maintainability Challenges

Different implementation styles across modules make onboarding and long-term maintenance more difficult for contributors.

Rendering Performance Concerns

Some data-heavy workflows may contain unnecessary re-renders and inefficient state updates that should first be profiled and then optimized carefully.

Lack of Standardized Migration Patterns

There is currently no clearly documented migration strategy or frontend typing convention that contributors can consistently follow.

Proposed Implementation Plan

My implementation approach focuses on incremental migration, maintainability, and minimizing disruption to existing workflows.

Milestone 1: Discovery and Migration Strategy

  • Audit existing TypeScript usage in the frontend

  • Review current tsconfig configuration and frontend constraints

  • Identify 2–3 high-impact JavaScript modules suitable for migration

  • Discuss migration priorities and scope with mentors

  • Define reusable typing conventions and migration guidelines

Milestone 2: Incremental TypeScript Migration

  • Convert selected components and utilities from JavaScript to TypeScript

  • Add reusable interfaces and shared data models

  • Type API responses, props, hooks, and state management logic

  • Keep pull requests modular, incremental, and review-friendly

Milestone 3: Type Safety and Pattern Standardization

  • Improve shared frontend typing consistency

  • Reduce duplicated data shapes and improve reusability

  • Align migrated modules with existing frontend practices and component standards

  • Document migration patterns for future contributors

Milestone 4: Performance and Stability

  • Profile selected data-intensive workflows

  • Identify proven unnecessary re-renders before optimization

  • Improve rendering efficiency and state boundaries where needed

  • Add focused testing and documentation for migrated modules

Stay Updated

I will be documenting my journey, technical hurdles, and milestones regularly. You can follow my progress and read detailed deep-dives on my Medium blog.

Discussion Points

I would love feedback and suggestions from mentors and community members regarding:

  • Which frontend modules are considered most difficult to maintain currently?

  • Are there existing frontend performance bottlenecks contributors frequently encounter?

  • Preferred TypeScript patterns or frontend architecture practices within the project?

  • Recommendations for safely migrating large React modules incrementally?

  • Suggestions for improving consistency across frontend components?

Thank you, and I’m excited to contribute to the modernization of the OpenELIS frontend and collaborate with the community throughout GSoC 2026.

2 Likes
2

Hello everyone,

Here is my detailed Week 1 progress update for GSoC 2026 under the project:

“Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.”

This week, my primary focus was establishing the initial TypeScript migration baseline for the frontend. The goal was to start with smaller shared utilities and common reusable modules that will support future large-scale migrations in upcoming weeks.

Week 1 - Manroop’s Medium Blog

Completed Work – Week 1

  1. Shared Common Component Migration

I converted the following shared common component from JavaScript to TypeScript:

  • frontend/src/components/common/PageTitle/PageTitle.jsx
    → PageTitle.tsx

During the migration:

  • Added TypeScript typings for component props

  • Preserved existing behavior and UI rendering

  • Ensured import compatibility remained intact

  1. Shared Utility Modules Migration

I migrated important shared utility/helper files from JavaScript to TypeScript:

  • Utils.js → Utils.ts

  • BrandingUtils.js → BrandingUtils.ts

  • PathRoute.js → PathRoute.ts

Work completed in these files included:

  • Adding proper TypeScript typings/interfaces

  • Typing helper functions and callback parameters

  • Preserving existing utility behavior without introducing breaking changes

  • Maintaining compatibility with existing frontend modules

These utilities are widely reused across the frontend, so migrating them early helps create a stronger foundation for future TypeScript adoption.

  1. Data/Constants Module Migration

I also migrated several pure data/constants modules inside:

frontend/src/components/data/

Converted files:

  • LabTableHeaders.tsx

  • PatientResultsTableHeaders.tsx

  • SampleEntryTestsForTypeProvider.ts

  • SampleTypesTableHeaders.tsx

  • countries.ts

  • orderCurrentTestsHeaders.tsx

  • orderOptions.ts

Work done here included:

  • Converting static configuration/data files to TypeScript

  • Adding type safety for table headers and configuration objects

  • Improving maintainability and future developer experience

  • Keeping all existing application behavior unchanged

Week 1 PR

Thank you.

3

GSoC 2026 – Week 2 Progress Update

This week I continued working on my GSoC project “Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.”

Completed Work

  • Migrated layout search components from JavaScript to TypeScript:

    • searchBar.jsx → searchBar.tsx

    • searchOutput.jsx → searchOutput.tsx

    • searchService.jsx → searchService.ts

  • Updated related home component functionality (LandingPage.tsx)

  • Added TypeScript typings for component props, event handlers, callbacks, and search-related logic

  • Preserved existing functionality and Carbon Design System behavior

GitHub Links

Blog Post

I also published my Week 2 progress blog describing the work completed, challenges encountered, and key learnings during the migration process:

:link: <BLOG_LINK>

Looking forward to mentor feedback and continuing the TypeScript migration in the upcoming weeks.

4

GSoC 2026 – Week 3 Update

This week, I completed the migration of several Analyzer Management modules from JavaScript to TypeScript as part of my GSoC project: Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.

What I worked on

  • Migrated core analyzer-related services and components to TypeScript:

    • analyzerService

    • serialService

    • AnalyzersList

    • DeleteAnalyzerModal

    • TestConnectionModal

  • Created reusable TypeScript interfaces and types for:

    • Analyzer models

    • API responses

    • Status and lifecycle management

  • Improved type safety and maintainability across the analyzer module.

  • Added TypeScript-focused tests to validate:

    • Analyzer status types

    • API response structures

    • Field type safety

    • Compile-time validation using @ts-expect-error

Validation

  • ESLint checks passed

  • Prettier checks passed

  • Unit tests passed

  • TypeScript type checks completed successfully for migrated files

Github Link

Issue: #3704

PR: [PR_LINK]

Medium Blog

Blog: [Blog_link]

Looking forward to continuing the TypeScript migration and improving frontend maintainability in the coming weeks. Feedback is always welcome!

5

GSoC 2026 – Week 4 Update

This week, I completed Week 4: Migrate Analyzer Forms, Configuration, and Field Mapping to TypeScript as part of my GSoC project, Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.

What I worked on

Successfully migrated multiple analyzer management modules from JavaScript to TypeScript, including:

  • Analyzer Form

  • Analyzer Type Management

  • Serial Configuration

  • Validation Rule Editor

  • Error Dashboard & Error Details Modal

  • Field Mapping module and its supporting components

Key Improvements

  • Introduced a shared analyzerTypes.ts file containing reusable interfaces and type definitions.

  • Added strong typing for:

    • Component props

    • Form state and values

    • API responses and callbacks

    • Modal state management

    • Field mappings and validation rules

    • Serial configuration data

    • Error dashboard data structures

  • Improved code maintainability and developer experience through better type safety and reusable type definitions.

Testing & Validation

Added and updated tests for migrated components, including:

  • Analyzer Form

  • Validation Rule Editor

  • Serial Configuration

  • Error Dashboard & Error Details Modal

  • Field Mapping components

Validation completed through:

  • TypeScript compilation checks

  • ESLint verification

  • Prettier formatting checks

  • Component test execution

Week 4 Highlights

  • Migrated 15+ analyzer-related components to TypeScript

  • Added shared analyzer type definitions used across multiple modules

  • Expanded test coverage for newly migrated components

  • Reduced risk of runtime errors through stronger compile-time validation

Github Link

Issue: #3725

PR: [Link]

Medium Blog

Blog: [#Medium_Blog]

This migration further strengthens the Analyzer Management module by improving consistency, maintainability, and type safety across forms, configuration management, validation workflows, and field mapping functionality.

Thanks!

6

GSoC 2026 – Week 5 Update

This week, I completed Week 5: Migrate Independent Admin Configuration Modules to TypeScript as part of my GSoC project, Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.

What I worked on

Migrated multiple admin configuration modules from JavaScript to TypeScript, including:

  • General Configuration & Site Branding

  • Organization Management

  • Provider Menu

  • Lab Number Management

  • Localization Management

  • Plugin File

  • Search Index Management

Key Improvements

  • Added strong typing for component props, form state, callbacks, and configuration models.

  • Migrated related test files to TypeScript.

  • Preserved existing functionality, React Intl integration, and Carbon Design System components.

Testing & Validation

Validated the migration through:

  • TypeScript compilation

  • ESLint & Prettier checks

  • Component test execution

GitHub Links

Issue: #3802

PR: [Link]

Medium Blog

Blog: [#Medium_Blog]

Thanks!

7

GSoC 2026 – Week 6 Update (Midterm Milestone)

This week, I completed Week 6 of my GSoC project, Modernizing OpenELIS Frontend with TypeScript and Performance Optimization. This also marks the work completed up to the GSoC midterm evaluation.

What I worked on

Migrated a large set of admin management modules from JavaScript to TypeScript, including:

  • Batch Test Reassignment & Cancellation

  • Result Reporting Configuration

  • Program Management

  • Test Management

  • Reflex Test Management

  • User Management

  • Test Notification Configuration

  • Additional Order Entry Questions

  • Analyzer Test Name

  • Multiple test configuration and shared management components

Key Improvements

  • Added strong typing for component props, state, form data, API responses, and callbacks.

  • Replaced implicit any types with reusable TypeScript interfaces.

  • Preserved existing functionality while improving type safety and maintainability.

Testing & Validation

Validated the migration through:

  • TypeScript compilation

  • ESLint & Prettier checks

  • Migration of applicable test files to TypeScript

  • Verification that existing runtime behavior remained unchanged

GitHub Links

Issue: #3821

PR: [Link]

Medium Blog

Blog: [#week6_blog]

Blog (Midterm): [Midterm_Blog]

This milestone significantly expands TypeScript adoption across the OpenELIS admin module and represents the work completed through the GSoC 2026 midterm evaluation, improving long-term maintainability while preserving existing functionality.

Thanks!

8

GSoC 2026 – Week 7 Update

Another milestone completed! This week, I focused on migrating the Patient Management workflows from JavaScript to TypeScript as part of my GSoC 2026 project, Modernizing OpenELIS Frontend with TypeScript and Performance Optimization.

Completed Migration

  • Patient Management

  • Patient Merge

  • Patient Photo Management

Highlights

  • Added reusable TypeScript interfaces for patient records, form state, search criteria, API models, merge workflows, and photo management.

  • Migrated the patient merge service and related components to TypeScript.

  • Converted patient management tests to TypeScript while preserving existing behavior.

  • Improved type safety and code consistency without introducing any UI or business logic changes.

Validation

  • Prettier & ESLint checks

  • Targeted patient module tests

  • Verified migration while preserving existing functionality

GitHub Links

Issue: #3871

PR: [Link]

Medium Blog

Blog: [#Week7_Blog]

This migration further strengthens the OpenELIS frontend by bringing the complete patient workflow closer to full TypeScript adoption, improving maintainability and developer experience while keeping the user experience unchanged.

Thanks!

9

GSoC 2026 – Week 8 Update

This week, I focused on migrating the Storage LocationPicker module from JavaScript to TypeScript, continuing the modernization of the OpenELIS frontend.

What was completed

  • Migrated the complete LocationPicker workflow to TypeScript.

  • Converted reusable components, hooks, utilities, shared types, and tests.

  • Added strong typing for location hierarchy, selection state, reducer actions, callbacks, and API models.

Validation

  • Prettier & ESLint checks

  • LocationPicker tests

  • Existing functionality and UI preserved

GitHub Links

Issue: #3883

PR: [Link]

Medium Blog

Blog: [#Week8_Blog]

This migration improves the maintainability and type safety of the LocationPicker workflow while preserving its existing behavior.

Thanks!