Interactive User Interfaces With Vue.js — Submitty

Submitty's frontend relies on server-rendered Twig templates and jQuery for interactivity, leading to fragmented, hard-to-maintain interfaces. This project migrates Submitty's most critical pages - the TA grading interface, discussion forum, office hours queue, and rainbow grades customization to modular, reusable Vue.js components backed by clean PHP JSON APIs and centralized Pinia state management. The migration follows a progressive enhancement strategy using the Mount Container Pattern, allowing Vue components to coexist with legacy code at every stage, ensuring zero disruption to active users mid-semester. Deliverables include a reusable Vue component library, full reactive migration of the discussion forum and TA grading interface, a Pinia and Axios powered state and API layer, comprehensive unit and E2E tests, and a developer migration guide for future contributors. A proof of concept PR migrating the TA grading score box to Vue.js has already been submitted, validating the end-to-end approach before the program begins.