Developer > Google Summer of Code 2026

Ansh Jindal

Interactive User Interfaces With Vue.js — Submitty

At a Glance

Overview

Migrated Submitty’s frontend from jQuery + Twig to Vue.js, restructuring logic scattered across dozens of files into self-contained single-file components. Rather than a risky full frontend rewrite, I designed a component-by-component migration path that let the legacy and Vue systems coexist safely in production throughout the transition. To guarantee each migrated component behaved correctly before merge, I introduced Cypress component testing as part of the migration workflow — giving the team a repeatable safety net for every future component, not just mine.

About Me

Hello! My name is Ansh Jindal, pursuing B.Tech in Information Technology at College of Technology, Pantnagar. The Submitty community was hyperactive and rewarding - that is what kept me contributing well past my initial PRs

Primary Contributions

Vue component re-render (Migrate ReceivedMarkForm to Vue)

PR #12910 — This PR introduced the re-render of a Vue component without unmount and remount. Saves stale copies of a Vue app and prevents memory leaks.

Stack: Vue.js, twig, TypeScript, Cypress · Status: Merged

Migrate PanelSelectorModal to Vue in TAGrading

PR #12901 — In this PR, I refactored the PanelPositionSelector to work in sync with the Parent Vue component and remove all the junk files that previously made the component work.

Stack: Vue.js, twig, TypeScript, Cypress · Status: Merged

Infrastructure & Tooling

Cypress component testing for Vue

PR #12836 — This PR introduces cypress component testing in the Submitty Codebase

Stack: YML, TypeScript, Cypress, HTML, JSON · Status: Merged

Code coverage for Component tests

PR #12959 — This PR adds code coverage for Cypress Component Tests · Enables coverage in CI · Uploads the reports to Codecov · Adds a dedicated cypress-component Codecov flag · Surfaces the coverage directly in the PR comment

Stack: YML, JavaScript, TypeScript, JSON · Status: Merged

Events mapping infrastructure for Vue migration

PR #12959 — I designed a component-by-component migration setup for Vue components

Stack: YML, JavaScript, TypeScript, JSON · Status: Merged

Other PRs

Full list of merged PRs →

Code Reviews & Community Impact

Reviewed 18 Pull Requests from other contributors, Reviewing others’ code was an invaluable experience as it accelerated my understanding of Submitty’s massive architecture and allowed me to help shape the quality of the project.

Documentation

Reflection

The hardest part of the summer wasn’t writing Vue components — it was designing a migration architecture that other developers, including ones who’d never touch my code, could reuse without understanding my full mental model. Every decision had to be reproducible: could the next contributor apply this pattern to their component without asking me first? With guidance from my mentors, I landed on an approach that’s now migrated 30 components and is structured to scale to the rest of Submitty’s codebase. That shift — from “does my code work” to “will this pattern hold up when someone else uses it” — was the biggest jump in how I think about engineering this summer.

Thanks

What’s Next

Contact