Sarah Rose Hassan

logo retro no background
tmu gradtrack logo

Automating Graduate Progress: How I Built TMU GradTrack using Next.js and Supabase

TMU GradTrack: A Full-Stack Solution for Academic Milestone Tracking

Navigating graduate school is challenging enough without the added burden of manual paperwork. At Toronto Metropolitan University (TMU), graduate students traditionally submitted their termly progress reviews via a tedious process involving manual emails to supervisors.

Our team developed TMU GradTrack, a centralized, automated platform designed to eliminate manual labor and streamline the tracking of academic milestones.

tmu gradtrack logo.webp

The Problem: Administrative Bottlenecks

Before GradTrack, students had to manually email forms, leading to wasted time and constant back and forth communication. These forms required approvals from the student, supervisor, Graduate Program Assistant (GPA), and Graduate Program Director (GPD).

tmu gradtrack presentation

The Solution: A Unified Digital Workflow

TMU GradTrack facilitates progress for all stakeholders through these core interactions:

  • For Students: Users can upload, edit, and submit progress forms and monitor their status in real-time.
  • For Supervisors: Faculty members review, annotate, and provide feedback directly within the app.
  • For GPAs and GPDs: Staff and directors use a tiered workflow to provide initial and final approvals.

The system logic follows a specific review cycle to ensure every form is accurate before final approval.

tmu gradtrack presentation (1)

Technical Spotlight: Architecting for Progress

We focused on a robust architecture to handle these complex role-based interactions.

1. Hybrid MVC and Client-Server Architecture We chose a Model, View, Controller (MVC) pattern combined with a Client-Server model to ensure a clear separation of responsibilities.

  • View (React): Role-specific interfaces that update dynamically based on server responses.
  • Controller (Next.js): The bridge that processes inputs, handles routing, and makes API requests.
  • Model (Supabase): Manages data storage, retrieval, and role-based access.
image

2. Relational Database Design The database is built on Supabase (PostgreSQL). We used separate relationship schemas because supervisors often oversee multiple students. This design decision allows for efficient one to many relationships without data redundancy.

screenshot 2025 12 27 at 4.34.14 pm

3. Secure Authentication and Notifications Security is handled via Supabase Auth, supporting custom accounts and Google OAuth. To keep the process moving, we integrated the Resend API to trigger email notifications whenever a significant action occurs in the workflow.

Rigorous Quality Assurance

To ensure a reliable experience, we implemented a comprehensive test suite. This included verifying valid TMU email logins, ensuring the dashboard displays role-specific tasks, and checking that the system processes uploads within 2000ms.

Summary

TMU GradTrack transforms a fragmented email process into a cohesive digital experience. By automating the manual workflow, we allow students and faculty to focus on research rather than paperwork.

Deep Dive: Full Project Presentation

Source Code

Link to GitHub Repository: https://github.com/sarahrosehassan/graduate-project-cps731

Project Presentation

Want to see the full breakdown of our process, including team contributions and use case details? You can flip through our complete presentation below:

Technical Report

Project Team: Sarah Hassan, Zain Zubair, Vicheka Oeun, and Tahshin Shahriar. Course: CPS 731: Software Engineering I, Professor Dr. Sadaf Mustafiz.


Discover more from Sarah Rose Hassan

Subscribe to get the latest posts sent to your email.

Leave a Reply