Canvas V5

Canvas V5 is an alternate interface for Canvas, bringing courses, assignments, pages, and other learning resources into a browser extension.

The problem

Coursework involves moving between a lot of different kinds of information: an assignment's instructions, a course page, a file, and the submission itself. I've been working on an interface that makes those workflows easier to navigate.

What I've worked on

• Assignment submission workflows for rich text, URLs, and files.
• Draft persistence scoped to an account, course, and assignment, with drafts cleared after a successful submission.
• A sync engine that normalizes Canvas API responses into a local IndexedDB database connected to the UI.
• A cloud sync target that makes course data available to the MCP server.
• Background refreshes triggered by browser push notifications from the MCP server.
• Chrome and Firefox extension packages.

The biggest engineering challenge: the sync engine

The UI is connected to a local database in IndexedDB. A remote connection to the Canvas API updates that database, so navigation can read local data immediately while the sync engine revalidates it in the background.

The difficult part is keeping that local data consistent. Different Canvas API queries can return overlapping data, so the sync engine normalizes their responses before updating the database. Information returned by one query updates the same records used by another, and the UI reads from that shared local state.

This separates navigation from network requests: moving between views doesn't need to wait for another API response when the data is already available locally, and that data can be revalidated independently.

Extending sync to the cloud

There is also an external sync target for cloud operations. In this architecture, only the client can access the Canvas API through the browser extension, so the client syncs data to a cloud database that the Model Context Protocol (MCP) server uses.

When the MCP server needs refreshed data, it sends a browser push notification. That triggers a background script in the extension, which fetches new Canvas data and updates the cloud database. The server can request a refresh through the extension without needing direct access to the Canvas API.

Current work

I'm continuing to develop the interface and its integrations. I'll add a visual walkthrough of the interface and sync flow as I update the portfolio.