Canvas Helper

Inspiration

As students, we often feel overwhelmed by Canvas—assignments, announcements, and deadlines are scattered across multiple pages. It’s easy to miss important updates or spend too much time checking everything manually. We started asking ourselves: how can we make this simpler for everyone?

Instead of relying on restricted APIs, we designed a system that integrates directly into students’ existing workflows.

What it does

Canvas Helper is a local desktop assistant that automatically collects, organizes, and summarizes Canvas data.

It provides:

A unified view of pending assignments across all courses
Structured and easy-to-read announcements
AI-powered summaries that highlight what actually matters
Real-time synchronization via a browser extension

Instead of forcing users to navigate Canvas, we bring everything into one clean, unified interface.

How we built it

Our system consists of two main parts:

Browser Extension (canvas-bar)
- Extracts assignments and announcements directly from Canvas pages
- Formats the data into structured text
- Sends it to the local app via a background script
Desktop Application (Canvas-Helper-Front)
- Built with React + Vite + Electron
- Runs a local server (localhost:3001) to receive synced data
- Stores data in canvas_data.txt for persistence
- Parses and displays assignments and announcements in the UI
- Integrates LLM APIs (OpenRouter / Claude) for summarization

This local-first architecture eliminates the need for Canvas API tokens and works for all students without special permissions.

Challenges we ran into

Canvas API restrictions
Many users cannot generate access tokens, which forced us to redesign our entire data pipeline.
Data synchronization
Ensuring reliable communication between the browser extension and the local desktop app required careful handling of messaging and local server endpoints.
Parsing complex data formats
Announcements often contain multi-line rich text, which required custom parsing logic to correctly structure the data.
User experience
Designing a desktop UI that is both simple and informative—without overwhelming users—was a constant balancing act.

What we learned

How to design systems that work within real-world constraints, not just ideal APIs
Building cross-platform architectures combining browser extensions and desktop applications
Managing data pipelines and synchronization across multiple environments
Integrating LLMs into practical productivity tools, not just standalone features