Inspiration CANVAMON started because we were honestly just tired of the "deadline blindness" that turns every semester into a burnout cycle. We realized that most planners are just boring, static spreadsheets that don't actually help you manage the stress or stay motivated, they just list it. We ditched the traditional to-do list to build a motivating ecosystem where assignments feel like "living" entities rather than just rows in a database. Our goal was to turn high-stress Canvas data into a supportive, intuitive experience that actually keeps you inspired instead of just overwhelmed.
What it does We’ve built a production-ready, end-to-end sync engine that connects a browser extension and a mobile app in real-time.
The Extension: A high-fidelity React interface featuring a custom-built Weekly Navigation Matrix and a "Needs Attention" algorithm that calculates priority using a proprietary urgency weight.
The Mobile Dashboard: A seamless React Native app that provides mirrored data persistence across all your devices.
AI Pedagogical Coach: This isn't just another LLM wrapper. Our AI uses a "Socratic Guardrail" architecture—it pulls in assignment metadata to give conceptual hints and coaching while strictly blocking direct-answer generation.
Unified State Management: Local "Mark Done" tracking ensures 100% user privacy and data integrity without side-channeling into the Canvas API.
How we built it
To make sure the project was technically deep and architecturally stable, we implemented a pretty sophisticated full-stack setup:
Backend (Node.js/Express): A centralized API acting as middleware for Canvas OAuth, data normalization, and the complex state logic for the "pet-state" evolution.
Frontend (React/Vite & React Native/Expo): We used a shared logic layer to keep urgency calculations 100% consistent across platforms.
The Pipeline: We engineered a robust data flow: Canvas API/Cookies -> Normalized JSON Schema -> Urgency Weighting Engine -> Cross-Platform State Sync.
Challenges we ran into
Our biggest technical headache was Cross-Platform Date Determinism. Handling UTC offsets from Canvas while keeping a consistent "Weekly View" across a web extension and a mobile device required us to build a custom date-handling utility. Dealing with "Context Dilution" was a huge headache—basically, when Canvas descriptions were too short, the AI would start hallucinating. We fixed this by building a "Vector-lite Context Injection" method. It forces the AI to stick strictly to the specific details of the student's prompt so it doesn't go off the rails.
Accomplishments that we're proud of
95% Feature Parity: We hit a near-perfect MVP where the extension and mobile app are fully continuous and work together end-to-end.
Production-Grade UX: We built a design system following Atomic Design principles, featuring fluid animations, and a "Zero-Instruction" UI.
Technical Synergy: Successfully bridging three distinct environments (Extension, Mobile, Backend) into one cohesive, bug-free demo was a huge win for the team.
What we learned
We pushed ourselves way outside our comfort zones by mastering Chrome Extension Manifest V3 and React Native’s asynchronous storage at the same time. We learned that system architecture is about more than just "making it work"; it's about building a scalable schema that can handle messy third-party API data. We also gained a lot of expertise in Prompt Engineering and Guardrail Logic to keep the AI within academic integrity boundaries.
What's next for CANVAMON
We’re moving toward RAG (Retrieval-Augmented Generation) integration so the AI can parse linked PDFs and lecture slides for hyper-specific coaching. We’re also designing a Burnout Analytics Suite that uses predictive modeling to warn students of "high-pressure weeks" before they happen. Our final step is a public beta launch with a fully automated onboarding flow and cloud deployment for global scalability.
Log in or sign up for Devpost to join the conversation.