OnTrack is the open-source system Deakin units use to track student tasks, feedback and portfolios. In my capstone I built its light and dark theme system and redesigned its pages, led the notifications stream, fixed security and correctness bugs from a product audit, landed the whole cohort's trimester on the team's 11.0.x branch, and opened it upstream as 24 pull requests.
The student progress dashboard in dark mode. All screenshots come from the team's 11.0.x branch running locally on the project's own demo seed, signed in as its made-up Demo Student.
103
merged pull requests
464
web commits, most in the cohort
24
upstream pull requests opened
Context
SIT374, Deakin's Thoth Tech capstone, Trimester 2 2026, with 42 students in the cohort. I was one of its three leads and the lead of the notifications stream. Across the team's API, web and deploy repos I merged 103 pull requests, and on the web app I made 464 of the trimester's commits, the most of anyone.
What I built
themelight, dark and system themes, colour tokens, contrast tests, and the redesign of the student and staff pages
notificationsled the stream: event model, email, web push, the due-soon job, the bell, the dropdown and the notifications page
audit fixesfive rounds of web fixes and more on the API, including permission and sign-in holes
featuressubmission processing with retries, DOCX feedback, a verified second email, plagiarism rescans, a shared panel layout
landingmerged the cohort's closed pull requests back onto 11.0.x, then cut the trimester into 24 upstream pull requests
Theme system and redesign
OnTrack had one light look with colours written straight into each page. I wrote the theme contract, built the foundation (tokens, the theme service, startup and saving the choice to the account), with a teammate building out much of the service, and brought both themes up to WCAG contrast. The redesign of the student and staff pages was closed unmerged when pull request intake closed on 19 Sep, so I relanded it on 11.0.x: 144 conflicting files, 96 of its 100 commits mine, keeping every functional fix from the branch and the redesign's look on top.
The same home page in both themes. With the preference on system, it follows the device.
a written contract first over restyling page by page
Before any code I wrote down what light, dark and system mean, separating what the user chose from what is on screen. The account stores the choice, so "system" stays "system" and never gets saved as whatever the device showed that day. Every later change was checked against it.
colour tokens over hard-coded colours
Pages read named tokens instead of hex values, so one switch changes the whole app. 166 files use them today, including the charts, which re-read their colours when the theme changes.
set before the first paint over fixing it after load
The saved theme is applied before Angular starts, so a dark-mode user never sees a white flash. The choice is also saved on the account, so it follows them to another device.
contrast as a test over contrast by eye
A spec measures every status, urgency and chart token against its background in both themes and fails below 4.5:1, the WCAG level for body text. Seven pairs failed, and I fixed them in both themes.
A task in dark mode, inside the shared collapsible and resizable panel layout I built for the inbox, dashboard and task list.
Notifications
Half the cohort, 21 people, worked on notifications, and I led the stream with one co-lead. I wrote the core: the event column and first email path, push subscriptions and delivery, the due-soon job, the bell, the dropdown and the notifications page. I opened 35 of the 72 pull requests merged into the notification branches and wrote 159 of the 360 API test cases. Teammates wrote most of the per-event emails, the Sidekiq email queue and the settings section.
The bell and its dropdown, in the redesigned dark theme.
The notifications page, grouped by day.
The dropdown on a phone.
one event column on the existing hub over a new notification system
OnTrack stored notifications in five categories, so "a tutor commented" and "your task is due tomorrow" got the same email. One new column names the exact event; the category still decides who can switch it off.
split the work by event over split it by layer
Each event was one ticket with the same six steps, so nobody waited on another person's layer. The previous trimester split by layer and merged nine pull requests in total.
push rides on email over push wired event by event
Delivery fans out from one service, so every event that sends an email also sends a push, with no extra code per event.
review by risk over one rule for every change
A ticket that only added its own files needed one approval; anything touching a migration, config or the shared service needed two. With 21 people, review was the bottleneck, not coding.
Security and correctness fixes
A product audit of the codebase turned up defects across both apps. I fixed them in rounds: five on the web app and several on the API. The security ones:
›grading a task now needs assessment permission
›an LTI enrolment token is bound to its subject and works once
›a federated sign-in only matches on what the identity provider asserts
›overseer assessment results are scoped to the authorised project
›a SCORM pass is authorised wherever it is written
›students cannot upload to a finalised task
›every staff route in the web app has the role guard
›comment drafts belong to the signed-in user and clear on sign-out
Where it stands
Everything is merged into the cohort's fork, on its 11.0.x branch, including the redesign and the panel, accessibility and notification pull requests that closed unmerged when intake shut on 19 Sep, which I relanded afterwards. I then cut the trimester into 24 upstream pull requests to Thoth Tech, by area: theme, redesign, notifications, security, submissions, calendar, Unit Hub, accessibility and more. With everything merged together, 1,722 API tests and 1,440 web tests passed. All 24 are open and not yet reviewed, so production OnTrack does not run any of it.
Stack
WebAngular 22 · Angular Material · Tailwind CSS 4 · Angular service worker · Vitest
