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.

1 Like
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.