Allen Padilla

Manitoba Métis Federation • Shipped 2025

Graduation Ceremony Portal

Scan a student card to check a gown out or back in, and scan again at the stage to put their name on the projector. Handled over 150 graduates across two ceremonies, and built to keep working if the venue Wi-Fi drops.

Role
Sole developer
Timeline
Two consecutive graduation ceremonies
Team
Solo, built for the department that runs the ceremony and run on-site with their staff
Stack
SvelteKit, Convex, Service Worker

Context

Louis Riel College, one of the Federation's affiliates, holds a graduation every year. Gowns go out beforehand and have to come back after, and during the ceremony someone has to get each graduate's name and program on the projector at exactly the right moment.

The college asked IT for help, so I built the intake and live-event app and ran it on the night. Two years in a row now, 2025 and 2026.

Projector screen showing a graduate's name and department after their card was scanned
The projector the moment a card is scanned at the stage. The graduate's name and program, big enough for the back row.

Problem

Two things could go wrong, and both had before.

  • Gowns went missing. Without a record of who took which size, there was no way to know what was still out after the event.
  • The ceremony could stall. You can't count on venue Wi-Fi. If the projector needs a live connection, one dropout stops the show in front of a few hundred people.

Approach

  • SvelteKit
  • Convex
  • Service Worker
  • Barcode scanning

Gown check-out and check-in. Staff scan a student's card. That records the gown size going out and marks it returned when it comes back, so at the end of the night every gown is accounted for.

Gown rental screen with a student's record, gown size, and a return gown button
Gown check-out. Scan a card, pick the size, and one big button toggles between rented and returned.

Getting the list in. The college sends the graduate list as a CSV. The import page takes the file, lets staff add or remove someone by hand, and exports the current state back out.

Import and export page with a CSV import, an add student form, and the graduate table
The import page. Add a graduate, import the CSV, export it back, and see the current list with gown status. The roster is blurred.

The stage station. A second scanner runs the ceremony. As each student walks up, one scan puts their name and program on the projector. No typing, no searching.

Projector idle screen reading LRC Graduation, scan student ID
The idle screen between graduates. The station listens for the scanner, so nobody has to click into a field.

Works offline. It's SvelteKit with Convex behind it. The stage station pulls the full graduate list into the browser whenever it's online and looks every scan up from that local copy, so if the venue connection drops mid-ceremony the projector keeps going. A service worker keeps the app itself loaded. Gown check-out needs a connection, but that happens before the event, not during it.

Access control. Every station is locked behind an access code that the Convex backend checks on every call, so a laptop left open on a table can't change anything.

Access code prompt shown before any page of the app
The lock screen. The code is checked server-side, not just hidden in the page.

Outcome

Both ceremonies ran on it start to finish. Over 150 graduates checked in, gowned, and announced through it. Every gown came back, and the projector kept up with the stage without anyone running it by hand.